Hexo优雅的使用阿里矢量图标库

在 [Blogroot]\_config.butterfly.yml 的 inject 配置项中引入Unicode和Font-class的线上资源：

# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
  bottom:
     - <script async src="//at.alicdn.com/t/c/font_3480193_h80no0g3hm4.js"></script>

打开[Blogroot]\themes\butterfly\source\css\custom.css,输入以下内容:

/*阿里图标库*/
svg.icon {
   width: 1em; height: 1em;
   /* width和height定义图标的默认宽度和高度*/
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
   font-size: 20px;
}

添加外挂标签，在[Blogroot]\themes\butterfly\scripts\tag\目录下新建iconfont.js，打开[Blogroot]\themes\butterfly\scripts\tag\iconfont.js,输入：

'use strict';

function iconFont(args) {
  args = args.join(' ').split(',')
  let p0 = args[0]
  let p1 = args[1]?args[1]:1
  return `<svg class="icon" style="width:${p1}em; height:${p1}em" aria-hidden="true"><use xlink:href="#${p0}"></use></svg>`;
}

hexo.extend.tag.register('icon',iconFont);

hexo cl && hexo g以后即可使用外挂标签的形式来写入图标了

{% icon [icon-xxxx],[font-size] %}

icon-xxxx：表示图标font-class,可以在自己的阿里矢量图标库项目的font-class引用方案内查询并复制。
font-size：表示图标大小，直接填写数字即可，单位为em。图标大小默认值为1em。

{% icon icon-equip %}
{% icon icon-equip,2 %}
{% icon icon-equip,4 %}
{% icon icon-equip,6 %}