Nuxt使用iconfont矢量圖標

 

　　Nuxt可使用各類前端UI框架，這些框架通常都自帶的有一些icon圖標可供用戶使用，可是通常項目開發的時候，UI框架自帶的icon是不能知足實際項目需求的，這個時候咱們能夠本身找一些圖片放到本地項目裏，而後引用這個圖片，可是總感受這樣不太好。

這個時候咱們可使用  Iconfont-阿里巴巴矢量圖標庫

 

 

下面就講一講怎麼在nuxt中使用iconfont

 1、普通沒有顏色的矢量圖標

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值便可

 

 

2、帶有顏色的矢量圖標

 

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>

 

 

 

 

嗯，就醬~