設(shè)計(jì)師、前端開發(fā)者看過來，一套好看好用的圖標(biāo)庫推薦給你們。

Iconoir 是一個(gè)應(yīng)用圖標(biāo)庫，圖形設(shè)計(jì)非常簡潔，但辨識(shí)度很高，很實(shí)用。自2020年推出以來，一直在更新圖標(biāo)，截止我今天寫這篇文章為止，已經(jīng)擁有1600+高質(zhì)量的圖標(biāo)，從基礎(chǔ)功能操作到行業(yè)場景（如商業(yè)、金融）的圖標(biāo)都應(yīng)有盡有，覆蓋面廣，被很多設(shè)計(jì)師和開發(fā)者用在各種 web / 移動(dòng)應(yīng)用界面上。

• 使用友好：提供可修改的SVG文件、React / Vue 前端組件、滿足跨平臺(tái)開發(fā)需求；
• 風(fēng)格一致：所有圖標(biāo)遵循統(tǒng)一設(shè)計(jì)規(guī)范，視覺和諧，最重要是顏值夠高；
• 填充樣式：很多圖標(biāo)都提供了線框和填充樣式，方便實(shí)現(xiàn)多種 UI 的交互狀態(tài)。

設(shè)計(jì)師使用

Iconoir 網(wǎng)站首頁的左側(cè)有兩個(gè)快捷工具，一是調(diào)整圖標(biāo)尺寸，二是調(diào)整線框?qū)挾?#xff0c;調(diào)整后的圖標(biāo)會(huì)體現(xiàn)在導(dǎo)出的 SVG 文件中，保留完美像素效果，這樣批量調(diào)整就不用再導(dǎo)入到設(shè)計(jì)軟件中調(diào)整了，方便。

不過要注意的是，Iconoir 圖標(biāo)的填充樣式很好看，我個(gè)人很喜歡，但不是每一個(gè)圖標(biāo)都有填充樣式。

前端開發(fā)使用

Iconoir 對前端開發(fā)者非常友好，提供了多種方式安裝：

以我熟悉的 Vue 為例，集成到項(xiàng)目中很簡單。先安裝：

再 Vue 頁面中使用：

另外還支持更多用法，比如通過 Tree Shaking 僅導(dǎo)入使用到的圖標(biāo)組件，甚至還可以通過更簡單的 CSS 來使用，具體可以參考官網(wǎng)的文檔。

Iconoir 是一個(gè)免費(fèi)開源的圖標(biāo)項(xiàng)目，采用 MIT 開源協(xié)議，我們可以免費(fèi)下載來使用，可以自由用在商業(yè)項(xiàng)目上，二次修改也沒問題。

原文鏈接：https://www.thosefree.com/iconoir