Vue 项目如何使用阿里 iconfont 的 symbol 类型的图标并封装为组件

1. 首先介绍下 Symbol 类型的图标

参考阿里巴巴矢量图标库官方说法:
Symbol 是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：

• 支持多色图标了，不再受单色限制。
• 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
• 兼容性较差，支持 ie9+,及现代浏览器。
• 浏览器渲染svg的性能一般，还不如png。

2. 使用 Symbol 图标

原本按照官方网站的介绍引入 js ,并加入 icon 的 css ，应用于页面结果一片空白，试了好多次无果。
只能采用本地的方式去引入 icon 了。

• 首先介绍下本地引入的步骤：
  
  如图所示，在有项目图标库的情况下 ，选择 【菜单管理】-【我的项目】，点击批量操作，全选或者选择所需要的之后批量加入购物车，可以看到购物车多少个icon。点击购物车小图标，下载代码到本地。将所下载代码放到某个目录，如图我放在了 asserts/icon/iconfont 目录中。
  
  并在项目入口文件 main.js 中引入 icon 相关的文件：
  

3. 封装 icon 组件

接下来就是真正的如何使用了，但是考虑到项目中多个地方使用到了icon，并且主要用于菜单的icon，于是封装了icon组件，封装的代码如下：

<template>
  <svg :class="['gt-icon', customClass]" aria-hidden="true">
    <use :xlink:href="href"></use>
  </svg>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { State, Getter, Action, Mutation, namespace } from "vuex-class";

@Component({ components: {} })
export default class Icon extends Vue {
  // icon 名称
  @Prop({ required: true, type: String }) name;
  // 给 svg 定制化样式
  @Prop({ default: "", type: String }) customClass;

  get href() {
    return `#icon-${this.name}`;
  }
}
</script>

<style lang="scss">
.icon {
  fill: currentColor;
  overflow: hidden;
  width: 16px;
  height: 16px;
}
</style>

二级菜单被选中时候为彩色图标，其他都为灰色 图标，因此和设计师沟通了一个必要的规范，图标彩色的叫 XXX ，灰色的叫XXX_normal。因此配合element的菜单使用如下：

   <template v-for="{ name, children, path, icon } in menuList">
      <el-submenu :index="`${name}`" :key="`${name}`" v-if="children">
        <template slot="title">
          <span class="gt-menu__navicon">
            <icon :name="
              children.some(
                v => v.path == ($route.meta.activeMenuIndex || $route.path)
              )
                ? `${icon}`
                : `${icon}_normal`
            " />
          </span>
          <span slot="title"> {{ name }}</span>
        </template>
        <el-menu-item :index="subitem.path" v-for="(subitem, j) in children" :key="`${j}`">
          {{ subitem.name }}
        </el-menu-item>
      </el-submenu>
      </template>

至此彩色icon就可以显示了，但是有个问题是，只要设计师在图标库中添加新icon ，就需要手动再重复一次之前的 downdload 代码操作，替换现有的文件。
所以不采用本地引入的方式，直接采用引入远程连接。在public 下的 index.html 中用 script 标签引入 icon 即可。但是同样有一个问题，每一次iconfont 库发生更新的时候，iconfont 会生成新的链接，导致又需要手动更新项目中的链接。如果有更好的办法，请留言~