如何优雅的使用阿里图标库

此文章仅用于记录，根据Akilar大佬的文章整理而成。

新建图标项目

  1. 访问阿里巴巴矢量图标库 , 注册登录。

  2. 搜索自己心仪的图标，然后选择添加入库，加到购物车。

  3. 选择完毕后点击右上角的购物车图标，打开侧栏，选择添加到项目，如果没有项目就新建一个。

  4. 可以通过上方顶栏菜单 -> 资源管理 -> 我的项目，找到之前添加的图标项目。

引入图标

  1. 找到之前新建的图标项目，选择Symbol->查看在线链接，获取 Symbol.js 的在线链接，并引入。

    以 Butterfly 主题为例，在 [Blogroot]\_config.butterfly.yml 的 inject 配置项中填入：

    1
    2
    3
    4
        inject:
          head:
          bottom:
    +       - <script async src="//at.alicdn.com/t/font_2264842_3izu8i5eoc2.js"></script>

    此处 async 是异步加载属性，能够减少 HTML 阻塞。

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    svg.icon {
       width: 1em; height: 1em;
       /* width和height定义图标的默认宽度和高度*/
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
       font-size: 20px;
        /* 控制图标大小*/
    }

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    '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);

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

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

1
2
3
4
{% icon icon-pingjing %}
{% icon icon-pingjing,2 %}
{% icon icon-pingjing,4 %}
{% icon icon-pingjing,6 %}

导航栏图标设置

  1. 修改 [Blogroot]\themes\butterfly\layout\includes\header\menu_item.pug,

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
      if theme.menu
        //- for mobile sidebar
        - let sidebarChildHide = theme.hide_sidebar_menu_child ? 'hide' : ''

        .menus_items
          each value, label in theme.menu
            if typeof value !== 'object'
              .menus_item
                a.site-page(href=url_for(trim(value.split('||')[0])))
                  if value.split('||')[1]
    -               i.fa-fw(class=trim(value.split('||')[1]))
    +               - var icon_value = trim(value.split('||')[1])
    +               if icon_value.substring(0,2)=="fa"      
    +                 i.fa-fw(class=icon_value)
    +               else if icon_value.substring(0,4)=="icon"          
    +                 svg.icon(aria-hidden="true")
    +                   use(xlink:href=`#`+ icon_value)
                  span=' '+label
            else
              .menus_item
                a.site-page(href='javascript:void(0);')
                  if label.split('||')[1]
    -               i.fa-fw(class=trim(label.split('||')[1]))
    +               - var icon_label = trim(label.split('||')[1])
    +               if icon_label.substring(0,2)=="fa"      
    +                 i.fa-fw(class=icon_label)
    +               else if icon_label.substring(0,4)=="icon"    
    +                 svg.icon(aria-hidden="true")
    +                   use(xlink:href=`#`+ icon_label)
                  span=' '+ trim(label.split('||')[0])
                  i.fas.fa-chevron-down.expand(class=sidebarChildHide)
                ul.menus_item_child
                  each val,lab in value
                    li
                      a.faa-parent.animated-hover.site-page.child(href=url_for(trim(val.split('||')[0])))
                        if val.split('||')[1]
    -                     i.fa-fw(class=trim(val.split('||')[1]))
    +                     - var icon_val = trim(val.split('||')[1])
    +                     if icon_val.substring(0,2)=="fa"      
    +                       i.fa-fw(class=icon_val)
    +                     else if icon_val.substring(0,4)=="icon"
    +                       svg.icon(aria-hidden="true")
    +                         use(xlink:href=`#`+ icon_val)
                        span=' '+ lab

  2. 此处再提供修改好以后的完整代码便于更新复制

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    if theme.menu
      //- for mobile sidebar
      - let sidebarChildHide = theme.hide_sidebar_menu_child ? 'hide' : ''

      .menus_items
        each value, label in theme.menu
          if typeof value !== 'object'
            .menus_item
              a.site-page(href=url_for(trim(value.split('||')[0])))
                if value.split('||')[1]
                  //- i.fa-fw(class=trim(value.split('||')[1]))
                  - var icon_value = trim(value.split('||')[1])
                  if icon_value.substring(0,2)=="fa"      
                    i.fa-fw(class=icon_value)
                  else if icon_value.substring(0,4)=="icon"          
                    svg.icon(aria-hidden="true")
                      use(xlink:href=`#`+ icon_value)
                span=' '+label
          else
            .menus_item
              a.site-page(href='javascript:void(0);')
                if label.split('||')[1]
                  //- i.fa-fw(class=trim(label.split('||')[1]))
                  - var icon_label = trim(label.split('||')[1])
                  if icon_label.substring(0,2)=="fa"      
                    i.fa-fw(class=icon_label)
                  else if icon_label.substring(0,4)=="icon"    
                    svg.icon(aria-hidden="true")
                      use(xlink:href=`#`+ icon_label)
                span=' '+ trim(label.split('||')[0])
                i.fas.fa-chevron-down.expand(class=sidebarChildHide)
              ul.menus_item_child(style=`left:`+ (-52.5 * Object.keys(value).length + 38.5) + `px;`)
                each val,lab in value 
                  li
                    a.site-page.child(href=url_for(trim(val.split('||')[0])))
                      if val.split('||')[1]
                        //- i.fa-fw(class=trim(val.split('||')[1]))
                        - var icon_val = trim(val.split('||')[1])
                        if icon_val.substring(0,2)=="fa"      
                          i.fa-fw(class=icon_val)
                        else if icon_val.substring(0,4)=="icon"
                          svg.icon(aria-hidden="true")
                            use(xlink:href=`#`+ icon_val)
                      span=' '+ lab

  3. 以下是填写示例，在 [Blogroot]\_config.butterfly.yml 中修改。icon-xxx 字样的为iconfont的 symbol 引入方案的 id 值，可以在你的iconfont图标库内查询。

    1
    2
    3
    4
    5
    6
    menu:
      主页: https://blog.akilar.top/ || fas fa-tasks
      博客: / || icon-rat
      生活 || icon-tiger :
        相册: /gallery/ || fa fa-camera
        追番: /bangumis/ || icon-snake

Social 卡片彩色图标引入

  1. 重写 [Blogroot]\themes\butterfly\layout\includes\header\social.pug, 替换为以下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    each value, title in theme.social
      a.social-icon(href=url_for(trim(value.split('||')[0])) target="_blank" title=title === undefined ? '' : trim(title))
        if value.split('||')[1]
          - var icon_value = trim(value.split('||')[1])
          if icon_value.substring(0,2)=="fa"      
            i.fa-fw(class=icon_value)
          else if icon_value.substring(0,4)=="icon"          
            svg.icon(aria-hidden="true")
              use(xlink:href=`#`+ icon_value)

  2. 以下为对应的 social 配置项。写法沿用 menu_item 的写法示例。修改 [Blogroot]\_config.butterfly.yml 的 social 配置项。

    1
    2
    3
    4
    5
    6
    7
    social:
      # iconfont多彩图标
      Github: https://github.com/Akilarlxh || icon-rat
      # fontawesome单色图标
      Email: mailto:Akilarlxh@gmail.com || fas fa-envelope
      # iconfont单色图标
      Bilibili: https://space.bilibili.com/22976782 || fa icon-ox