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

圖標如果使用得當是吸引訪問者注意力并為他們提供視覺的好方法。隨著 VueJS 的興起，社區也開始開發更多的 Vue 圖標庫，這些庫是直接為使用 Vue 開發的人設計的。

這是我使用過的 8 個免費 Vue 圖標庫。這些庫涵蓋了從獨立的 Vue 庫到純圖標庫的所有內容，我想你肯定需要它們。

1、Vue-Awesome

地址：https://fontawesome.com/

每個人都喜歡 Font Awesome——它是最受歡迎的圖標庫之一，擁有數千個高質量、可自定義的圖標。

Vue-Awesome 為 Vue 帶來了 Font Awesome，允許我們使用單個組件訪問所有免費圖標。

甚至可以將所有選項作為屬性傳遞，從而使我們的圖標脈沖、旋轉或縮放，以便輕松自定義甚至為圖標設置動畫。

2、Vue Unicons

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

這個是我遇到的最被低估/未充分利用的圖標庫之一。Vue Unicons 擁有超過 1K 的免費 SVG 圖標，添加到項目并開始使用非常簡單。

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

• 姓名

• 寬度和高度

• 填色

• 圖標樣式（線條/單色）

我個人覺得這些圖標非常干凈。

3、Vue Material Design

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

這是一個很棒的庫，可以在Vue 項目中使用 Google 的 Material Design 圖標。

這個庫不僅有很好的文檔，而且我認為使用這些圖標非常容易上手，它將每個圖標包含為單個文件組件，因此，我們可以準確導入每個用例所需的內容。

此外，由于 Vue Material Design 使用 SVG，所要做的就是更改一些道具來自定義圖標。

4、Vuetify

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

Vuetify作為最受歡迎和維護良好的 Vue 組件庫之一，它超級靈活，但對所有項目都非常友好。Vuetify 有 100 多個組件元素，帶有響應式網格系統，并完全支持事件處理。

在圖標方面，Vuetify 使用對 Material Design 和 Font Awesome 庫的支持。我認為擁有同時處理這兩者的能力使 Vuetify 成為尋求一致 UI 的開發人員的絕佳選擇。

隨著Vuetify 持續更新，它很可能在幾年內，仍然是最受歡迎的 Vue 庫之一。

5、AT UI

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

AT UI 是為前端 Web 應用程序構建的，憑借使用 CSS 預處理器的能力，它非常適合幾乎所有的開發團隊。

就個人而言，我真的很喜歡 AT UI 默認的最小樣式和字體選擇，我認為它很直觀，很容易添加到任何項目中。與其他庫相比，其內置的圖標庫（Feather）也是一個巨大的優勢。

6、iView

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

iView 是最受歡迎的 UI 庫之一，因為它具有出色的自定義功能。它支持不同的字體、圖標大小、元素大小、無盡的表單選項，以及開發人員構建漂亮前端所需的幾乎所有東西。

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

7、Icomoon?

地址：https://icomoon.io/

Icomoon 是超級流行的圖標庫，被谷歌和蘋果等一些大公司使用。它為 SVG 和圖標字體提供了大量免費和高級選項，我們可以混合搭配以找到完美的圖標集。

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

8、IconMonstr

https://iconmonstr.com/

就個人而言，IconMonstr 有一些我最喜歡的圖標風格——最小的外觀似乎非常適合許多應用程序，他們有數以千計的免費 svg、png、psd 和 eps 文件。

如果你只是想快速將其應用到你的項目中，他們有一個復制和粘貼嵌入代碼，但我認為在你的項目中實現這一點的一個好方法是使用第一個 Vue 圖標庫，并從 IconMonstr 下載的任何內容實現為自定義圖標。

總結

構建你自己的 Vue 圖標集

如果你想從不同的來源中挑選你喜歡的 svg 圖標，有個很簡單的方法，就是可以將它們實現到你的項目中。例如，在 Nuxt 中，有一個名為 nuxt-svg-loader 的便捷庫，可讓你自動將 svg 文件轉換為組件。

即使只是在普通的 Vue 應用程序中，vue-svg-loader 的工作方式也非常相似。因此，如果你感覺更有創意并想要從各個方面獲得靈感，你可以通過一些設置來做到這一點。

Vue 圖標庫是美化你的 Web 應用程序的好方法。獨立應用程序為你提供了一個簡潔的界面，可以將一些最大的圖標庫包含到你的項目中，完整的 UI 庫可幫助我們為用戶構建具有凝聚力的應用體驗。

無論你使用什么，請確保你明智地使用圖標以最大限度地提高其有效性。

希望這有幫助！

如果您有興趣了解有關 VueJS 的更多信息，請單擊此處獲取免費的 Vue 備忘單，其中包含每個 Vue 開發人員都需要了解的基本知識。

學習更多技能

請點擊下方公眾號

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。