项目中如何引入Iconfont-图标库，并解决彩色图标显示黑白的问题

iconfont-阿里巴巴矢量图标库

首先附上阿里巴巴矢量图标库

找到想要的图标之后，点击购物车按钮，可以将选中的素材添加到购物车中

然后点击顶部的购物车，打开侧边栏，点击添加至项目，输入项目名后确定

然后在我的项目中，找到对应项目名的项目，点击下载至本地

下载至本地之后是一个压缩包，解压至本地

 把 iconfont.css、 iconfont.ttf、iconfont.woff、iconfont.woff2 文件引入到项目中，在vue脚手架项目的main.js中引入iconfont.css文件

import "./fonts/iconfont.css";

然后在html的元素中，使用 iconfont icon-xxx 就可以引入对应的图标

<span class="iconfont icon-fuwuqi"></span>

 

但是这里有一个问题，就是引入的图标是黑色的，原来的图标明明是蓝色，如果让引入到项目中的iconfont图标保留它原有的颜色呢？

需要在main.js中额外引入iconfont.js文件（js文件也在下载到本地的压缩包里）

 然后在html页面中使用svg标签引入图标，写法如下：href值为对应的图标名称#icon-xxx

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-fuwuqi"></use>
</svg>

 这样就可以引入彩色的iconfont图标了，初始化引入的彩色图标都比较大，可以设置默认样式，或者根据实际情况调整大小

<style>
    .icon {
        width: 1em;
        height: 1em;
    }
</style>