8 個我使用過的免費 Vue 圖標庫

英文 | 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 庫可幫助我們爲用戶構建具有凝聚力的應用體驗。

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

希望這有幫助！

web 前端開發 一個專業而懂你的前端開發技術研究學習平臺，每天與你分享【web 前端開發】相關的技術文章與案例，互聯網資訊，編程圖書與課程，前端開發工具等學習資源，堅持每天學習一點點，每天進步一點點，關注我們，一起學習成長進步。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/BTvkPmoZpNOGJPybnH8cCQ

猜你喜歡