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

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

YAML

# 插入代码到头部 </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,输入以下内容:

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 %}