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

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

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

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

  • 首先介绍下本地引入的步骤:
    操作步骤
    如图所示,在有项目图标库的情况下 ,选择 【菜单管理】-【我的项目】,点击批量操作,全选或者选择所需要的之后批量加入购物车,可以看到购物车多少个icon。点击购物车小图标,下载代码到本地。将所下载代码放到某个目录,如图我放在了 asserts/icon/iconfont 目录中。
    文件目录
    并在项目入口文件 main.js 中引入 icon 相关的文件:
    main.js
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 会生成新的链接,导致又需要手动更新项目中的链接。如果有更好的办法,请留言~

Logo

前往低代码交流专区

更多推荐