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

使用說明

基本用法

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

我們建議設計師小伙伴在需要使用某些圖標的時候通過官網(wǎng)搜索下載使用，而不是將一整套圖標全部下載放在本地文件夾中進行管理；官網(wǎng)的搜索欄可以幫助您快速定位您想要的圖標，而且支持中文關鍵詞搜索，這相比本地文件夾管理圖標效率要高很多；最重要的是，官網(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引入

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

手動下載引入

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

使用

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

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

SVG Sprite用法

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

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

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