Icon 图标

Element Plus 内置多种 Icon 图标，可参考 Element Plus —— Icon 图标 的文档。

在项目的 /src/assets/svgs (opens new window)目录下，自定义了 Icon 图标，默认注册到全局中，可以在项目中任意地方使用。如下图所示：

![](/media/202409/2024-09-02_100703_036563.png)

### 1. Icon 图标组件
友情提示：
该小节，基于 [《vue element plus admin —— Icon 图标组件 》](https://element-plus-admin-doc.cn/components/icon.html "《vue element plus admin —— Icon 图标组件 》")的内容修改。

Icon 组件位于 src/components/Icon 内，用于项目内组件的展示，基本支持所有图标库（支持按需加载，只打包所用到的图标），支持使用本地 svg 和 [Iconify](https://iconify.design/ "Iconify") 图标。

> 提示
在[ Iconify](https://iconify.design/ " Iconify") 上，你可以查询到你想要的所有图标并使用，不管是不是 element-plus 的图标库

### 1.1 基本用法
如果以 svg-icon: 开头，则会在本地中找到该 svg 图标，否则，会加载 Iconify 图标。代码如下：

![](/media/202409/2024-09-02_101653_575159.png)
### 1.2 useIcon
如果需要在其他组件中如 ElButton 传入 icon 属性，可以使用 useIcon。代码如下：

![](/media/202409/2024-09-02_101708_329076.png)

useIcon 的 props 属性如下：

![](/media/202409/2024-09-02_101425_987334.png)

## 2. 自定义图标
① 访问 https://www.iconfont.cn/ (opens new window)地址，搜索你想要的图标，下载 SVG 格式。如下图所示：
> 友情提示：其它 SVG 图标网站也可以。

![](/media/202409/2024-09-02_101740_322867.png)

② 将 SVG 图标添加到 /src/assets/svgs (opens new window)目录下，然后进行使用。

> <Icon icon="svg-icon:helpless" />