前言

今天在做公司的Vue项目，其中涉及到了字体图标的引用，以及对element-ui字体图标的修改，因为在之前的公司就是改改bug，很多东西虽然了解过但在项目中很少自己动手实践。因此有些简单的东西都已经忘了，所以写下这篇文章坐下记录

先说图标的引用

其实图标的引用主要分为三种方式，Unicode，Font class和Symbol引入，以前我一直不知道为什么字体图标的文件是这样子的，今天仔细看了下，发现其实这就是提供了三种不同的引入方式的文件

其中iconfont.css就是为了给Unicode和FontClass引入而提供的一个文件，iconfont.js就是为了给Symbol引入而提供的一个文件，其中Unicode和FontClass引入是很类似的，基本没什么区别，具体可以看demo，Symbol的可以引入彩色图标，具体可以看demo
如果想在vue项目中使用他们的话，只要在main.js导入就行

// 使用unicode和fontclass的方式
import "./assets/iconfont/iconfont.css"
// 使用Symbol的方式
import "./assets/iconfont/iconfont.js"

使用

<template>
  <el-tree
    :data="data"
    :props="defaultProps"
    @node-click="handleNodeClick"
  ></el-tree>
  <!-- unicode -->
  <span class="iconfont">&#xe6cc;</span>
  <!-- font-class 语义更明确一些-->
  <span class="iconfont icon-jianhao"></span>
  <!-- Symbol引入 -->
  <div>
    <svg class="iconfont" aria-hidden="true">
      <use xlink:href="#icon-jiahao"></use>
    </svg>
  </div>
</template>

<script>
export default {
  name: "Element",
  data() {
    return {
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
  },
};
</script>

<style scoped></style>

再说element-ui图标的替换

<template>
  <el-tree
    class="tree"
    :data="data"
    :props="defaultProps"
    @node-click="handleNodeClick"
  ></el-tree>
  <!-- unicode -->
  <span class="iconfont">&#xe6cc;</span>
  <!-- font-class 语义更明确一些-->
  <span class="iconfont icon-jianhao"></span>
  <!-- Symbol引入 -->
  <div>
    <svg class="iconfont" aria-hidden="true">
      <use xlink:href="#icon-jiahao"></use>
    </svg>
  </div>
</template>

<script>
export default {
  name: "Element",
  data() {
    return {
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
  },
};
</script>

<style scoped lang="scss">
/*
[class*="el-icon-"] 表示class包含el-icon-的元素。
[class^="el-icon-"] 表示class的值是以el-icon-开头的元素
*/
.tree /deep/ [class*="el-icon-"],
[class^="el-icon-"] {
  // 更换图标库
  font-family: "iconfont" !important;
}
.tree /deep/ .el-tree-node__expand-icon.expanded {
  // 动画取消
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.tree /deep/ .el-tree-node__expand-icon.el-icon-caret-right:before {
  // 收起
  content: "\e6cb";
  font-size: 18px;
}
.tree /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  // 展开
  content: "\e6cc";
  font-size: 18px;
}
</style>

结尾

好好学，好好看