element使用自定义icon图标的两种解决方式

当我们在使用Vue.js的element组件库时，有时需要使用自定义的icon图标。这时候，有两种方式可以进行解决。

方式一：使用element自定义主题

element UI自定义主题可以修改变量和mixin来达到定制化的效果。我们可以将自定义的icon放置在svg sprite中，然后通过在变量中设置$--font-path变量来指定图标路径。

具体步骤如下：

1. 首先需要准备SVG sprite。
2. 在 @/src/styles/variables.scss 文件中定义 $--font-path 变量指向SVG sprite的路径。

$--font-path: "~@/assets/svg/iconfont";

1. 在 @/src/styles/mixins/_icon.scss 文件中添加mixin。

@import "~@/assets/svg/iconfont"; //引入SVG sprite

@mixin iconfont {
  font-family: "iconfont" !important;
  font-size: @--iconfont-size;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  &:before {
      font-family: "iconfont";
  }
}

1. 修改主题文件 @/src/styles/element-variables.scss，为 el-icon 类添加字体图标样式。

//添加字体图标样式
.el-icon {
  @include font-size(14px);
  @include iconfont;
  &.el-icon-custom {
    &::before {
      content: "\e602";
    }
  }
}

1. 在element组件中使用自定义图标：

<el-button type="primary"><i class="el-icon-custom"></i>自定义ICON</el-button>

方式二：使用Iconfont

也可以将图标制作成字体，然后使用element的IconFont组件来引入自定义图标。具体步骤如下：

1. 在iconfont官网上创建自己的图标集，下载图标文件。
2. 在 main.js 中引入iconfont字体文件，例如：

import './assets/iconfont/iconfont.css'

1. 在element UI中使用 el-icon 类引入自定义icon，例如：

<el-button type="primary"><i class="el-icon-custom"></i>自定义ICON</el-button>

1. 在自定义图标的CSS文件中为 .el-icon-custom 类添加字体图标样式，例如：

.el-icon-custom {
    font-family: "my-iconfont" !important;
    font-size: 18px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.el-icon-custom:before {
    content: "\e602";
}

参考示例：

方式一：

1. element自定义主题实现自定义图标
2. 使用element-ui自定义主题方式来使用自定义icon

方式二：

1. Element自定义图标配置
2. 如何在Vue Element中使用Iconfont