Remix Icon 是一套面向設(shè)計師和開發(fā)者的開源圖標庫。圖標風(fēng)格為中性風(fēng)格，適用于各種用戶群體的項目。與拼湊混搭的圖標庫不同，Remix Icon 的每一枚圖標都是由設(shè)計師按照統(tǒng)一規(guī)范精心繪制的，并確保每一枚圖標在擁有完美像素對齊的基礎(chǔ)上風(fēng)格一致且簡潔易讀。圖標以24x24網(wǎng)格為基準，分為“線性圖標”和“面型圖標”兩種風(fēng)格。所有的圖標均可免費用于個人項目和商業(yè)項目

使用說明

基本用法

直接在remixicon.com點擊您想要的圖標, 該圖標將會以SVG矢量格式進行下載。

我們建議設(shè)計師小伙伴在需要使用某些圖標的時候通過官網(wǎng)搜索下載使用，而不是將一整套圖標全部下載放在本地文件夾中進行管理；官網(wǎng)的搜索欄可以幫助您快速定位您想要的圖標，而且支持中文關(guān)鍵詞搜索，這相比本地文件夾管理圖標效率要高很多；最重要的是，官網(wǎng)的圖標會持續(xù)更新。

SVG本身也是一種圖片格式，所以您可以像使用其他格式（如JPG、PNG）的圖片文件一樣使用SVG文件，例如直接引入的方式：

Webfont 用法

Note:?Webfont支持npm安裝引入、CDN引入或者手動下載的方式引入到項目當中，三選一即可。

安裝引入

Note:?如果您打算通過CDN的方式使用 Remix Icon，可以跳過安裝引入這一步。

npm install remixicon --save

import 'remixicon/fonts/remixicon.css'

入口文件引入CSS

CDN引入

如果不打算通過安裝的方式使用，可以直接復(fù)制下面這行代碼到您HTML文檔的 標簽中，這樣就完成了CDN方式的圖標引入，簡單快捷，推薦方式。

手動下載引入

下載保存remixicon.css文件，添加到項目的 標簽中即可。

使用

引入Remix Icon圖標庫后，就可以在web項目中使用了，只要在使用圖標的時候?qū)D標名稱作為類名就可以了。類名規(guī)則：remixicon-{name}-{style}

Note:?您可以到官網(wǎng)?remixicon.com?查閱圖標對應(yīng)的名稱，然后在名稱后添加圖標風(fēng)格，-line?代表線性風(fēng)格，-fill代表面型風(fēng)格。

SVG Sprite用法

下載?remixicon.symbol.svg?并添加到您的項目目錄中，通過??標簽來引用圖標，通過css可以自定義圖標的大小和顏色等屬性，例如：

.remix {
  width: 24px;
  height: 24px;
  fill: #333;
}

Note:?上面示例中?#?后面的remixicon-admin-fill可以替換為任何 Remix Icon 圖標名稱，您可以到官網(wǎng)?remixicon.com?查閱圖標對應(yīng)的名稱，然后在名稱后添加圖標風(fēng)格，-line?代表線性風(fēng)格，-fill?代表面型風(fēng)格。remixicon.symbol.svg文件默認是無法預(yù)覽查看的，只能通過??使用之后查看。