1. Vue-awesome
也許大家知道 Font-awesome 之類比較流行的圖標庫,就像各大組件庫都有各自版本一樣,它也有Vue的版本
Github地址:https://github.com/Justineo/vue-awesome
里面包括數千個高質量,可自定義的圖標,Vue-awesome將Font Awesome帶入到Vue中,使開發者可以通過單個組件訪問所有的免費圖標。
2. Vue Unicons
Github地址: https://github.com/antonreshetov/vue-unicons
該圖標庫有着超過一千個的免費SVG圖標。
而且每一個Vue Unicon 組件都具有以下屬性:
-
名稱
-
寬高
-
顏色
-
樣式
3. Vue Material Design
Github地址: https://github.com/robcresswell/vue-material-design-icons
這是一個很棒的庫,它可以幫助你在Vue項目中使用Material Design 圖標
該庫不僅有出色的文檔,而且用這些圖標入門很容易。它的每個圖標作為單個文件組件,所以可以准確導入每個Vue項目所需的圖標。
而且,該庫使用的是SVG圖標,所以可以輕松更改來自定義自己喜歡的圖標
以上的庫都是一些單獨的圖標庫,下面給大家介紹一些不一樣的
4. Vuetify
在項目中,有許多可能會用到驗證,作為最流行且維護良好的Vue組件庫之一,它非常靈活。Vuetify擁有100多個組成元素,帶有響應式網格系統,並完全支持事件處理。
官網:https://vuetifyjs.com/
在圖標方面,Vuetify使用了Material Design
和Font Awesome
庫。具備這兩種功能使Vuetify是為尋求一致UI的開發人員的絕佳選擇。
它憑借每周的補丁程序和不斷的更新,Vuetify可能仍會是數年來最受歡迎的Vue庫之一。
5. AT UI
AT UI專為前端Web應用程序而構建。具備使用CSS預處理程序的能力,它幾乎適用於幾乎所有開發團隊。
AT UI中默認的最小樣式和字體選擇功能,並且添加到任何項目中都非常直觀且容易。與其他庫相比,它的內置圖標庫(Feather)也是一個巨大的特點。
官網:https://at-ui.github.io/at-ui
6. iView
這個我覺得就算我不介紹也有很多人知道,這個庫在平時的開發中經常遇到,而且它也內置了許多組件和圖標,同時也對不同的字體,圖標大小,元素大小有良好的支持
官網 :https://www.iviewui.com/
7. Icomoon
Icomoon是超級流行的圖標庫,谷歌和蘋果等一些主要公司都在使用它。它提供了大量的SVG圖標和圖標字體,同時也有很多高級的付費選項,可以將其混合搭配以找到理想的圖標。
官網地址 :https://icomoon.io/
8. IconMonstr
官網 https://iconmonstr.com/
這個庫與上述不同的特點是,它的圖標庫中不僅有svg格式圖標,還有 png,psd和eps格式的圖標。
如果想要快速上手該項目,只需要復制粘貼並嵌入代碼到項目中。
建立自己的圖標庫
如果在不同的庫中選擇SVG圖標,可以用其他辦法將這些圖標聚合在一起。例如,在Nuxt中,有一個庫名為 nuxt-svg-loader
(地址:https://www.npmjs.com/package/nuxt-svg-loader) 它可以使SVG轉為自己的組件。