英文 | https://medium.com/swlh/8-free-vue-icon-libraries-to-pretty-up-your-web-app-82dfa6a59f57

圖標(biāo)如果使用得當(dāng)是吸引訪問(wèn)者注意力并為他們提供視覺(jué)的好方法。隨著 VueJS 的興起，社區(qū)也開(kāi)始開(kāi)發(fā)更多的 Vue 圖標(biāo)庫(kù)，這些庫(kù)是直接為使用 Vue 開(kāi)發(fā)的人設(shè)計(jì)的。

這是我使用過(guò)的 8 個(gè)免費(fèi) Vue 圖標(biāo)庫(kù)。這些庫(kù)涵蓋了從獨(dú)立的 Vue 庫(kù)到純圖標(biāo)庫(kù)的所有內(nèi)容，我想你肯定需要它們。

1、Vue-Awesome

地址：https://fontawesome.com/

每個(gè)人都喜歡 Font Awesome——它是最受歡迎的圖標(biāo)庫(kù)之一，擁有數(shù)千個(gè)高質(zhì)量、可自定義的圖標(biāo)。

Vue-Awesome 為 Vue 帶來(lái)了 Font Awesome，允許我們使用單個(gè)組件訪問(wèn)所有免費(fèi)圖標(biāo)。

甚至可以將所有選項(xiàng)作為屬性傳遞，從而使我們的圖標(biāo)脈沖、旋轉(zhuǎn)或縮放，以便輕松自定義甚至為圖標(biāo)設(shè)置動(dòng)畫。

2、Vue Unicons

地址：https://github.com/antonreshetov/vue-unicons

這個(gè)是我遇到的最被低估/未充分利用的圖標(biāo)庫(kù)之一。Vue Unicons 擁有超過(guò) 1K 的免費(fèi) SVG 圖標(biāo)，添加到項(xiàng)目并開(kāi)始使用非常簡(jiǎn)單。

每個(gè) Vue Unicon 組件的行為都非常類似于帶有一些屬性的 svg：

• 姓名

• 寬度和高度

• 填色

• 圖標(biāo)樣式（線條/單色）

我個(gè)人覺(jué)得這些圖標(biāo)非常干凈。

3、Vue Material Design

地址：https://github.com/robcresswell/vue-material-design-icons

這是一個(gè)很棒的庫(kù)，可以在Vue 項(xiàng)目中使用 Google 的 Material Design 圖標(biāo)。

這個(gè)庫(kù)不僅有很好的文檔，而且我認(rèn)為使用這些圖標(biāo)非常容易上手，它將每個(gè)圖標(biāo)包含為單個(gè)文件組件，因此，我們可以準(zhǔn)確導(dǎo)入每個(gè)用例所需的內(nèi)容。

此外，由于 Vue Material Design 使用 SVG，所要做的就是更改一些道具來(lái)自定義圖標(biāo)。

4、Vuetify

地址：https://vuetifyjs.com/en/

Vuetify作為最受歡迎和維護(hù)良好的 Vue 組件庫(kù)之一，它超級(jí)靈活，但對(duì)所有項(xiàng)目都非常友好。Vuetify 有 100 多個(gè)組件元素，帶有響應(yīng)式網(wǎng)格系統(tǒng)，并完全支持事件處理。

在圖標(biāo)方面，Vuetify 使用對(duì) Material Design 和 Font Awesome 庫(kù)的支持。我認(rèn)為擁有同時(shí)處理這兩者的能力使 Vuetify 成為尋求一致 UI 的開(kāi)發(fā)人員的絕佳選擇。

隨著Vuetify 持續(xù)更新，它很可能在幾年內(nèi)，仍然是最受歡迎的 Vue 庫(kù)之一。

5、AT UI

地址：https://at-ui.github.io/at-ui/#/en

AT UI 是為前端 Web 應(yīng)用程序構(gòu)建的，憑借使用 CSS 預(yù)處理器的能力，它非常適合幾乎所有的開(kāi)發(fā)團(tuán)隊(duì)。

就個(gè)人而言，我真的很喜歡 AT UI 默認(rèn)的最小樣式和字體選擇，我認(rèn)為它很直觀，很容易添加到任何項(xiàng)目中。與其他庫(kù)相比，其內(nèi)置的圖標(biāo)庫(kù)（Feather）也是一個(gè)巨大的優(yōu)勢(shì)。

6、iView

地址：https://www.iviewui.com/

iView 是最受歡迎的 UI 庫(kù)之一，因?yàn)樗哂谐錾淖远x功能。它支持不同的字體、圖標(biāo)大小、元素大小、無(wú)盡的表單選項(xiàng)，以及開(kāi)發(fā)人員構(gòu)建漂亮前端所需的幾乎所有東西。

它帶有一堆內(nèi)置組件和時(shí)尚的圖標(biāo)，讓開(kāi)發(fā)變得輕而易舉。如果你正在考慮開(kāi)發(fā)前端，但又不想自己重新制作基本組件，那么 iView 絕對(duì)是值得考慮試一試的事情。

7、Icomoon?

地址：https://icomoon.io/

Icomoon 是超級(jí)流行的圖標(biāo)庫(kù)，被谷歌和蘋果等一些大公司使用。它為 SVG 和圖標(biāo)字體提供了大量免費(fèi)和高級(jí)選項(xiàng)，我們可以混合搭配以找到完美的圖標(biāo)集。

如果你愿意投入額外的工作將其集成到 Vue 中，這絕對(duì)值得一試。

8、IconMonstr

https://iconmonstr.com/

就個(gè)人而言，IconMonstr 有一些我最喜歡的圖標(biāo)風(fēng)格——最小的外觀似乎非常適合許多應(yīng)用程序，他們有數(shù)以千計(jì)的免費(fèi) svg、png、psd 和 eps 文件。

如果你只是想快速將其應(yīng)用到你的項(xiàng)目中，他們有一個(gè)復(fù)制和粘貼嵌入代碼，但我認(rèn)為在你的項(xiàng)目中實(shí)現(xiàn)這一點(diǎn)的一個(gè)好方法是使用第一個(gè) Vue 圖標(biāo)庫(kù)，并從 IconMonstr 下載的任何內(nèi)容實(shí)現(xiàn)為自定義圖標(biāo)。

總結(jié)

構(gòu)建你自己的 Vue 圖標(biāo)集

如果你想從不同的來(lái)源中挑選你喜歡的 svg 圖標(biāo)，有個(gè)很簡(jiǎn)單的方法，就是可以將它們實(shí)現(xiàn)到你的項(xiàng)目中。例如，在 Nuxt 中，有一個(gè)名為 nuxt-svg-loader 的便捷庫(kù)，可讓你自動(dòng)將 svg 文件轉(zhuǎn)換為組件。

即使只是在普通的 Vue 應(yīng)用程序中，vue-svg-loader 的工作方式也非常相似。因此，如果你感覺(jué)更有創(chuàng)意并想要從各個(gè)方面獲得靈感，你可以通過(guò)一些設(shè)置來(lái)做到這一點(diǎn)。

Vue 圖標(biāo)庫(kù)是美化你的 Web 應(yīng)用程序的好方法。獨(dú)立應(yīng)用程序?yàn)槟闾峁┝艘粋€(gè)簡(jiǎn)潔的界面，可以將一些最大的圖標(biāo)庫(kù)包含到你的項(xiàng)目中，完整的 UI 庫(kù)可幫助我們?yōu)橛脩魳?gòu)建具有凝聚力的應(yīng)用體驗(yàn)。

無(wú)論你使用什么，請(qǐng)確保你明智地使用圖標(biāo)以最大限度地提高其有效性。

希望這有幫助！

如果您有興趣了解有關(guān) VueJS 的更多信息，請(qǐng)單擊此處獲取免費(fèi)的 Vue 備忘單，其中包含每個(gè) Vue 開(kāi)發(fā)人員都需要了解的基本知識(shí)。

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)

總結(jié)

以上是生活随笔為你收集整理的8个我使用过的免费Vue图标库的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。