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