AtIcon

沈孟平

最后更新于 2026-04-23 19:53:53

该组件同时支持 Naive Icon，Unocss Icon 以及 SvgIcon。

icon 模块当前对外暴露了 3 个组件：

• AtIcon：统一图标入口，按传入值自动切换渲染方式
• AtSvgIcon：更底层的 SVG Sprite 图标组件
• AtIconBtn：图标按钮，文档见 AtIconBtn

1. 如果使用 Svg Icon 请注意需要配置 vite-plugin-svg-icons 这个插件，并且传递的 icon 需要是以 svg- 开头的字符串。
2. 如果使用 Naive Icon，需要根据 Naive 文档 安装对应的图标包，传递的 icon 属性是对应的图标组件。
3. 如果使用 Unocss Icon，则需要安装 Unocss 以及对应的 图标包，传递的 icon 属性需要是以 i- 开头的字符串。

Important

注意 vite-plugin-svg-icons 插件的一个配置项 customDomId，默认值是 __svg__icons__dom__，@gupo-admin/components 采用 __@art-admin/components__svg__icons__dom__，若是出现重复图标会被覆盖导致无法显示的问题。

代码演示

AtIcon 基础用法

AtSvgIcon 基础用法

如果你已经接好了 vite-plugin-svg-icons，并且只是想直接渲染一个 SVG symbol，而不需要 AtIcon 那层字符串分发逻辑，可以直接使用 AtSvgIcon。

API

AtIcon Props

名称	类型	默认值	说明	版本
icon-props	IconProps	undefined	NaiveUI Icon Props
size	string	undefined	图标尺寸
spin	boolean	undefined	是否旋转
icon	string | Component	undefined	图标名称或者组件

AtSvgIcon Props

AtSvgIcon 是 AtIcon 在处理 svg-xxx 图标时内部使用的底层组件，也可以单独使用。

名称	类型	默认值	说明	版本
name	string	必填项	SVG symbol 名称，不带 svg- 前缀
size	string	'1em'	图标尺寸

changelog

1fc27 - feat(components): add AtSchemaGenerator on 2024/12/2

82b47 - feat(components): unocss 样式单位转为 px on 2024/7/17

64f6a - feat(components): at-empty test on 2024/6/26

ffb66 - feat(components): icon component test on 2024/6/24

贡献者

沈

s