vue 中 引用iconfont 保留颜色

 1. 下载至本地,将文件放置在src文件夹的iconfont下

 

 2. 在iconfont文件夹下新增一个icon.css文件，写入如下代码：

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

3. 在main.js中引入 icon.css 和 iconfont.js

import "./assets/iconfont/iconfont.js"
import "./assets/iconfont/icon.css"

4. 在vue组件中具体使用  ----   #图标的名称

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