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>

Nuxt使用iconfont矢量圖標