原文鏈接：
https://learnvue.co/2019/12/8-free-vue-icon-libraries-to-pretty-up-your-web-app/
如有翻譯不準確，請多指正！
圖標（當被準確使用的時候）是一個吸引訪客注意力的好方式，並且可以給予他們視覺線索。隨著VueJS的興起，特別是Vue3.0版本的發行帶來的預期，社群同樣也開始開發更多的可以直接被人們在Vue中開發時使用的Vue圖標庫。
這兒有一份我使用過的（或者想要使用的）8個免費的Vue圖標庫的列表，這個列表涵蓋了從自始至終獨立的Vue庫到純粹的圖標庫的所有內容。僅僅只要確保你不會過度使用它們，因為它們實在是太好用了。
1. Vue-Awesome
每一個人都愛FontAwesome（一套風靡全球的圖標字體庫——在線圖標網站）——在數以千計的高質量的、自定義的圖標中，它是最流行的圖標庫之一。Vue-Awesome為Vue帶來FontAwesome，允許你僅僅只是通過一個簡單的組件就能訪問所有免費的圖標。
你甚至可以傳入所有選項作為屬性以使得你的圖標跳動、旋轉或者是縮放，因此想要自定義或者甚至是動畫圖標都是容易操作的。
圖片源自網絡，僅做配文展示
2. Vue Unicons
可能這是我曾經偶然發現的最被低估的/未被充分使用的圖標庫之一，VueUnicons有超過1K的免費的SVG圖標（可縮放矢量圖形圖標），把它添加到你的項目中，並開始使用，操作起來超級簡單。
每一個VueUnicon組件運行起來與一個取用一些屬性的svg非常相似：
名
寬度和高度
填充色
圖標風格（直線/單色）
我個人傾向於尋找極簡風格的圖標，但是你可以自己找更多種類風格的圖標。
圖片源自網絡，僅做配文展示
3. Vue Material Design
這是一個很棒的庫對於在你的Vue項目中使用Google的MaterialDesign Icons（谷歌UI圖標）。
不僅是在這個庫中有大量文檔，而且我認為它超級簡單對於打開以及啟用這些圖標。作為一個單獨的文件組件它包含每一個圖標，因此你可以為每一個你需要的用例準確輸入你需要的東西。
同時自從VueMaterial Design使用SVGs，你需要做的就是改變一些周圍的屬性以便自定義圖標。
圖片源自網絡，僅做配文展示
包含一個Vue圖標庫的完整的UI庫列表
上面的列表僅僅只是進入一些獨立的Vue圖標庫，但是有很多很好的UI庫是你可以在全部的項目中使用的。這裡有一些我最喜歡的UI庫，有一個整體良好的界面。
1. Vuetify
在這個列表上沒有Vuetify是不太可能的事情，作為最流行之一且被維護得很好的Vue組件庫，它超級靈活，還對所有的項目都非常功能強大。Vuetify有超過100個組成元件，配有響應式網格系統，並且完全支持事件處理。
在圖標方面，Vuetify為MaterialDesign和FontAwesome庫提供使用支持。我認為具備同時處理二者的能力使得Vuetify對於尋找一致性界面的開發者來說是一個很好的選擇。
伴隨著每週的修補補丁和持續的更新，Vuetify可能會在未來的幾年裡保持最流行的Vue庫之一的地位。
2. AT UI
ATUI的創立是用於前端的應用程序。憑藉其使用CSS預處理的能力，它幾乎適用於所有的程序開發團隊。
從個人層面上來講，我真的很喜歡ATUI默認的簡約風格和字體選擇，並且我認為它可以很直接很容易的就添加到任何的項目裡。它的內置的圖標庫（Feather）也同樣發揮巨大的作用當與其他的庫相比較的時候。
3. iView
iView是最流行的UI庫之一，因為它的神奇的自定義功能。它為不同的字體、圖標大小、元件大小、循環形式選項，以及一個開發者建立好看的前端可能需要的一切提供建立與支持。
它有很多內置的組件和光滑的圖標使得開發是一件輕而易舉的事。如果你正打算嘗試開發一個前端項目，iView是一定要考慮的，但是不要想著自己重塑至關重要的組件。
更多通用圖標庫
很多時候，你可能有意願為你獨立選擇的圖標庫多做一些工作和實現。然而這可能不會像一個npm安裝和運行一樣容易，這是一個很好的選擇如果有你喜愛的圖標集。並且誰知道呢——或許你甚至可能為了它發佈自己的Vue集成！
總之，這有一些我的最愛。
1. Icomoon
Icomoon是被一些諸如谷歌和蘋果這樣的大公司使用的超級流行的圖標庫。它有大量的免費的和高級選項，對於SVG和圖標的字體，你可以混合搭配以此找到你的完美的圖標設置。
如果你此時正有意願做一些額外的工作將它集成到Vue中，Icomoon是毋庸置疑值得查看的。
圖片源自網絡，僅做配文展示
2. IconMonstr
從個人角度來說，IconMonstr有一些我最喜歡的風格的庫——簡約的外觀似乎對於相當多的apps來說都很完美。並且它們有成百上千的免費的svg、png、psd和eps文件。
如果你只是想要快速的讓它在你的項目裡實現，它們有一個複製和粘貼嵌入代碼。但是我認為讓它在你的項目裡實現的一個好辦法是使用第一部分中的一個Vue圖標庫，並將從IconMonstr下載的任何內容實現為自定義圖標。
圖片源自網絡，僅做配文展示
建立自己的Vue圖標集
如果你想要從不同的來源中挑選你的svg庫，這有相當簡單的辦法將它們在你的項目中實現。例如，在Nuxt中，有一個叫作nuxt-svg-loade的便捷的庫，允許你自動將svg文件轉換為組件。
甚至僅僅只是在一個普通的Vueapp，vue-svg-loader運行的也非常類似。因此，如果你有額外的創意，想要得到一切，你可以稍微準備一下然後行動。
享受Vue圖標庫！
Vue圖標庫是美化你的web應用程序的一個好方法。獨立的應用程序為你提供了一個整潔簡單的界面，以此可以在你的項目中添加一些最大的圖標庫。完整的UI庫幫助你為你的用戶構建一個聚合的應用體驗。
不管你用的是什麼，確保你是明智地使用圖標以此來最大限度的發揮其作用。
希望這篇文章能夠對你起到幫助！
閱讀更多 渡一web前端 的文章
