Remix Icon開源圖標(biāo)庫

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

使用說明

基本用法

直接在remixicon.com點(diǎn)擊您想要的圖標(biāo), 該圖標(biāo)將會(huì)以SVG矢量格式進(jìn)行下載。

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

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

Webfont 用法

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

安裝引入

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

npm install remixicon --save

import 'remixicon/fonts/remixicon.css'

入口文件引入CSS

CDN引入

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

手動(dòng)下載引入

下載保存remixicon.css文件，添加到項(xiàng)目的 標(biāo)簽中即可。

使用

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

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

SVG Sprite用法

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

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

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