StIcon 是一个封装了 Iconify 图标、文本图标、图标图片链接、unicode、font class、symbol 等多种图标类型（或者说图标使用方式）的图标组件。

提示

1. 对于 Iconify 图标，当前组件中使用的是 StIconIconify 组件；
2. 对于图标图片链接，当前组件中使用的是 img 标签；
3. 对于文本图标、unicode、font class 等图标类型，当前组件中使用的是 span 标签；
4. 对于 symbol 图标，当前组件中使用的是 svg 标签。

组件参数

参数名	描述	类型	默认值
icon	图标	IconifyIcon | string	''
iconType	图标类型	IconTypeEnum	IconTypeEnum.ICONIFY
style	图标样式	Partial<CSSStyleDeclaration> | string	{}
className	图标样式类名	string | string[]	''

图标类型枚举

导入：

import {IconTypeEnum} from "st-common-ui-vue3"

枚举值说明：

枚举值从 1 开始

export enum IconTypeEnum {
  // Iconify 图标
  ICONIFY = 1,
  // 文本图标
  TEXT,
  // 图标图片链接
  LINK,
  // unicode
  UNICODE,
  // font class
  FONT_CLASS,
  // symbol
  SYMBOL,
}

组件样式

1. 当前图标组件的盒子样式 display 设置为 inline-block；
2. 当前图标组件的垂直对齐方式 vertical-align 设置为 middle；

贡献者

• tongchaowei

变更历史

最后更新于: 查看全部变更历史

• 1ca46-

  更新：图标选择器新增组件参数文档说明

  于 2025/1/4