Icon 图标

Element UI 内置多种 Icon 图标，可参考 [Element Icon 图标 (opens new window)](https://element.eleme.cn/#/zh-CN/component/icon) 的文档。

在项目的 [`/src/assets/icons/svg` (opens new window)](https://github.com/yudaocode/yudao-ui-admin-vue2/tree/master/src/assets/icons/svg) 目录下，自定义了 Icon 图标，默认注册到全局中，可以在项目中任意地方使用。如下图所示：

![ 目录](https://note.lazzman.com:18084/media/202404/2024-04-30_093456_4023400.8635622715715344.png)

## [#](#_1-使用方式) 1. 使用方式

```

<svg-icon icon-class="password" class-name='custom-class' /> 
<el-button icon="el-icon-plus">新增</el-button> 
<el-button> <svg-icon icon-class="password" class-name='custom-class' /> 新增
</el-button>
```

## [#](#_2-自定义图标) 2. 自定义图标

① 访问 [https://www.iconfont.cn/ (opens new window)](https://www.iconfont.cn/) 地址，搜索你想要的图标，下载 SVG 格式。如下图所示：

![下载 SVG 格式](https://note.lazzman.com:18084/media/202404/2024-04-30_093456_4055110.19251328852351723.png)

② 将 SVG 图标添加到 [`@/icons/svg` (opens new window)](https://github.com/yudaocode/yudao-ui-admin-vue2/blob/master/src/icons/svg) 目录下，然后进行使用。

```
<svg-icon icon-class="helpless" />
```

## [#](#_3-改变颜色) 3. 改变颜色

`<svg-icon />` 默认会读取其父级的 color `fill: currentColor;` 。

你可以改变父级的 `color` ，或者直接改变 `fill` 的颜色即可。

疑问：

如果你遇到图标颜色不对，可以参照本 [issue (opens new window)](https://github.com/PanJiaChen/vue-element-admin/issues/330) 进行修改