Nuxt可以使用各種前端UI框架，這些框架一般都自帶的有一些icon圖標可供用戶使用，但是一般項目開發的時候，UI框架自帶的icon是不能滿足實際項目需求的，這個時候我們可以自己找一些圖片放到本地項目里，然后引用這個圖片，但是總感覺這樣不太好。
這個時候我們可以使用 Iconfont-阿里巴巴矢量圖標庫
下面就講一講怎么在nuxt中使用iconfont
一、普通沒有顏色的矢量圖標
1.到iconfont找好自己想要的圖標，然后下載到本地
下載完以后解壓一下，解壓完的目錄結構如下圖所示：
2.在nuxt項目的assets目錄下新建一個fonts目錄，這個目錄用來存放我們的字體和圖標文件，然后在fonts下再新建一個iconfont目錄，把剛才解壓的這四個文件（iconfont.eot，iconfont.svg，iconfont.ttf，iconfont.woff）放到這個目錄里來，如圖所示
3.在assets目錄下的css目錄里新建一個iconfont.scss文件，然后把剛才解壓出來的iconfont.css的內容粘貼到iconfont.scss文件內，然后把文件內引用剛才四個文件的路徑修改的與本項目的路徑一致，如下圖所示
然后在index.scss文件內引入一下這個iconfont.scss文件，如下圖所示
4.然后就可以在項目里引用這個iconfont里的圖標了
引用完以后npm run dev啟動項目，打開頁面就可以看到效果了
注意：圖標的顏色可以通過修改的字體顏色進行修改
沒錯，就是這么簡單~
如果添加過iconfont以后，又新增了新的圖標，這時候我們可以這樣做：
1.重新下載新的矢量圖標庫，然后把第一步的四個文件替換掉
2.把iconfont.scss里引用url得地方的四個key值替換成新的下載文件夾的iconfont.css文件的key值，然后把base64的值也替換成新值
3.在iconfont.scss文件下面，添加上新增圖標的名字和content值即可
二、帶有顏色的矢量圖標
1.在iconfont 下載好圖標壓縮包，解壓
2.把解壓出來的iconfont.js文件放到項目的plugins目錄下
3.然后, 在 nuxt.config.js 內配置 plugins 如下：
4. 在項目里加入通用CSS代碼（引入一次就行）
<style type="text/css"> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>
5.挑選相應圖標並獲取類名，在頁面直接應用。
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>
嗯，就醬~