引入阿里图标库

xinxin-l

发布于 2022-03-29 08:05:59

7790

发布于 2022-03-29 08:05:59

文章被收录于专栏：xinxin的随笔记录

hexo引入阿里图标库

（记录一下）

首先在https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a 找到想要的图标，然后点击右上角的购物车，生成图标项目（如果想找到自己以前的图标项目，可以在资源管理-我的项目中查找）
选择Symbol，生成在线链接，在[Blogroot]\_config.butterfly.yml中的inject配置项中添加：

 inject:
      head:
      bottom:
+       - <script async src="//at.alicdn.com/t/font_3174164_no8l0gbvn.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;
}

添加外挂标签，在[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);