背景

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>