在 VUE 项目中使用 iconfont 的彩色图标

背景

iconfont 提供了彩色图标的使用，不过需要一些特别的处理。

操作

• 将项目生成的 symbol 代码复制到一个名为 iconfont.js 的文件中。

• 在 main.js 中引入该文件。

// main.js
// ...
import 'xxx/iconfont.js';

• 在需要的地方引入图标

<svg class="icon-font">
  <use xlink:href="#icon-name"></use>
</svg>

• 引入对应样式

<style type="text/css">
.font-icon {
  width: 2em;
  height: 2em;
  fill: currentColor;
  overflow: hidden;
}
</style>