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>