Remix Icon開(kāi)源圖標(biāo)庫(kù)
Remix Icon 是一套面向設(shè)計(jì)師和開(kāi)發(fā)者的開(kāi)源圖標(biāo)庫(kù)。圖標(biāo)風(fēng)格為中性風(fēng)格，適用于各種用戶群體的項(xiàng)目。與拼湊混搭的圖標(biāo)庫(kù)不同，Remix Icon 的每一枚圖標(biāo)都是由設(shè)計(jì)師按照統(tǒng)一規(guī)范精心繪制的，并確保每一枚圖標(biāo)在擁有完美像素對(duì)齊的基礎(chǔ)上風(fēng)格一致且簡(jiǎn)潔易讀。圖標(biāo)以24x24網(wǎng)格為基準(zhǔn)，分為“線性圖標(biāo)”和“面型圖標(biāo)”兩種風(fēng)格。所有的圖標(biāo)均可免費(fèi)用于個(gè)人項(xiàng)目和商業(yè)項(xiàng)目
使用說(shuō)明
基本用法
直接在remixicon.com點(diǎn)擊您想要的圖標(biāo), 該圖標(biāo)將會(huì)以SVG矢量格式進(jìn)行下載。
我們建議設(shè)計(jì)師小伙伴在需要使用某些圖標(biāo)的時(shí)候通過(guò)官網(wǎng)搜索下載使用，而不是將一整套圖標(biāo)全部下載放在本地文件夾中進(jìn)行管理；官網(wǎng)的搜索欄可以幫助您快速定位您想要的圖標(biāo)，而且支持中文關(guān)鍵詞搜索，這相比本地文件夾管理圖標(biāo)效率要高很多；最重要的是，官網(wǎng)的圖標(biāo)會(huì)持續(xù)更新。
SVG本身也是一種圖片格式，所以您可以像使用其他格式（如JPG、PNG）的圖片文件一樣使用SVG文件，例如直接引入的方式：
<img height="32" width="32" src="img/admin-fill.svg" />
Webfont 用法
Note: Webfont支持npm安裝引入、CDN引入或者手動(dòng)下載的方式引入到項(xiàng)目當(dāng)中，三選一即可。
安裝引入
Note: 如果您打算通過(guò)CDN的方式使用 Remix Icon，可以跳過(guò)安裝引入這一步。
npm install remixicon --save
import 'remixicon/fonts/remixicon.css'
入口文件引入CSS
CDN引入
如果不打算通過(guò)安裝的方式使用，可以直接復(fù)制下面這行代碼到您HTML文檔的 <head> 標(biāo)簽中，這樣就完成了CDN方式的圖標(biāo)引入，簡(jiǎn)單快捷，推薦方式。
<link rel="stylesheet">
手動(dòng)下載引入
下載保存remixicon.css文件，添加到項(xiàng)目的<head> 標(biāo)簽中即可。
使用
引入Remix Icon圖標(biāo)庫(kù)后，就可以在web項(xiàng)目中使用了，只要在使用圖標(biāo)的時(shí)候?qū)D標(biāo)名稱作為類名就可以了。類名規(guī)則：remixicon-{name}-{style}
<i class="remixicon-admin-line"></i> <i class="remixicon-admin-fill"></i>
Note: 您可以到官網(wǎng) remixicon.com 查閱圖標(biāo)對(duì)應(yīng)的名稱，然后在名稱后添加圖標(biāo)風(fēng)格，
-line代表線性風(fēng)格，-fill代表面型風(fēng)格。
SVG Sprite用法
下載 remixicon.symbol.svg 并添加到您的項(xiàng)目目錄中，通過(guò) <use> 標(biāo)簽來(lái)引用圖標(biāo)，通過(guò)css可以自定義圖標(biāo)的大小和顏色等屬性，例如：
<svg class='remix'> <use xlink:href="存放路徑/remixicon.symbol.svg#remixicon-admin-fill"></use> </svg>
.remix {
width: 24px;
height: 24px;
fill: #333;
}
Note: 上面示例中
#后面的remixicon-admin-fill可以替換為任何 Remix Icon 圖標(biāo)名稱，您可以到官網(wǎng) remixicon.com 查閱圖標(biāo)對(duì)應(yīng)的名稱，然后在名稱后添加圖標(biāo)風(fēng)格，-line代表線性風(fēng)格，-fill代表面型風(fēng)格。remixicon.symbol.svg文件默認(rèn)是無(wú)法預(yù)覽查看的，只能通過(guò)<use>使用之后查看。