Icon 图标

Element Plus 内置多种 Icon 图标,可参考 Element Plus —— Icon 图标 arrow-up-right 的文档。

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

# 1. Icon 图标组件

Icon 组件位于 src/components/Icon 内,用于项目内组件的展示,基本支持所有图标库(支持按需加载,只打包所用到的图标),支持使用本地 svg 和 Iconify arrow-up-right 图标。

# 1.1 基本用法

如果以 svg-icon: 开头,则会在本地中找到该 svg 图标,否则,会加载 Iconify 图标。代码如下:

# 1.2 useIcon

如果需要在其他组件中如 ElButton 传入 icon 属性,可以使用 useIcon。代码如下:

useIconprops 属性如下:

属性
说明
类型
可选值
默认值

icon

图标名

string

-

-

color

图标颜色

string

-

-

size

图标大小

number

-

16

# 2. 自定义图标

① 访问 https://www.iconfont.cn/ arrow-up-right 地址,搜索你想要的图标,下载 SVG 格式。如下图所示:

友情提示:其它 SVG 图标网站也可以。

② 将 SVG 图标添加到 /src/assets/svgs arrow-up-right 目录下,然后进行使用。

Last updated