Icon 图标

图标组件，封装了图标系统，提供统一的图标使用方式。支持通过 data-name 属性自动初始化。

基础用法

方式 1：自动初始化（推荐）

通过 data-name 属性自动初始化，无需编写 JavaScript 代码。

html

<div id="auto-init-icon-demo">
  <i data-name="search" data-size="24"></i>
  <i data-name="plus" data-size="20" data-color="#409EFF"></i>
  <i data-name="delete" data-size="16" data-color="#F56C6C"></i>
</div>

<script>
SA.init('#auto-init-icon-demo');
</script>

加载 SanoUI 组件中...

方式 2：JavaScript 方式

html

<i id="demo-icon"></i>

<script>
  const icon = new SaIcon('#demo-icon', {
    name: 'search',
    size: 24
  });
</script>

加载 SanoUI 组件中...

不同尺寸

通过 size 配置图标大小。

自动初始化方式

html

<div id="icon-size-auto-demo">
  <i data-name="search" data-size="16"></i>
  <i data-name="search" data-size="20"></i>
  <i data-name="search" data-size="24"></i>
  <i data-name="search" data-size="32"></i>
  <i data-name="search" data-size="48"></i>
</div>

<script>
SA.init('#icon-size-auto-demo');
</script>

加载 SanoUI 组件中...

JavaScript 方式

html

<div id="icon-size-js-demo">
  <i id="icon-16"></i>
  <i id="icon-20"></i>
  <i id="icon-24"></i>
  <i id="icon-32"></i>
  <i id="icon-48"></i>
</div>

<script>
  [16, 20, 24, 32, 48].forEach(size => {
    new SaIcon(`#icon-${size}`, {
      name: 'search',
      size: size
    });
  });
</script>

加载 SanoUI 组件中...

不同颜色

通过 color 配置图标颜色。

自动初始化方式

html

<div id="icon-color-auto-demo">
  <i data-name="success-filled" data-size="20" data-color="#F56C6C"></i>
  <i data-name="success-filled" data-size="20" data-color="#409EFF"></i>
  <i data-name="success-filled" data-size="20" data-color="#67C23A"></i>
</div>

<script>
SA.init('#icon-color-auto-demo');
</script>

加载 SanoUI 组件中...

JavaScript 方式

html

<div id="icon-color-js-demo">
  <i id="icon-red"></i>
  <i id="icon-blue"></i>
  <i id="icon-green"></i>
</div>

<script>
  new SaIcon('#icon-red', {
    name: 'success-filled',
    color: '#F56C6C'
  });
  
  new SaIcon('#icon-blue', {
    name: 'success-filled',
    color: '#409EFF'
  });
  
  new SaIcon('#icon-green', {
    name: 'success-filled',
    color: '#67C23A'
  });
</script>

加载 SanoUI 组件中...

自动初始化

图标组件支持自动初始化，主要作用包括：

自动渲染图标：如果元素有 data-name 属性，会自动渲染对应的图标
自动读取配置：从 data-size 和 data-color 属性自动读取配置
动态元素支持：通过 MutationObserver 自动监听 DOM 变化，动态添加的图标元素也会自动初始化

注意：
图标组件会在 SA.init() 时自动初始化所有带有 data-name 属性的元素。如果元素既没有 data-name 也没有手动创建实例，自动初始化对该元素不会有任何作用
动态添加：通过 JavaScript 动态添加到页面的图标元素（如 AJAX 加载、模板渲染等），会自动被检测并初始化，无需手动调用 SaIcon.init() 或 SA.init()

html

<div id="auto-init-demo">
  <!-- 普通元素：只需 data-name，自动初始化会自动渲染图标 -->
  <i data-name="search" data-size="24"></i>

  <!-- 带颜色的图标：自动初始化会自动读取 data-color -->
  <i data-name="success-filled" data-size="20" data-color="#67C23A"></i>

  <!-- 不同尺寸的图标 -->
  <i data-name="plus" data-size="16"></i>
  <i data-name="plus" data-size="24"></i>
  <i data-name="plus" data-size="32"></i>
</div>

<script>
// 自动初始化所有带 data-name 的图标
SA.init('#auto-init-demo');
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	`string \| HTMLElement`	-
options	配置选项	`SaIconOptions`	`{}`

配置选项

参数	说明	类型	默认值
name	图标名称	`string`	-
size	图标大小	`number`	`16`
color	图标颜色	`string`	`'currentColor'`

静态方法

方法名	说明	参数	返回值
`SaIcon.init(element)`	初始化单个图标元素	`element: HTMLElement` 图标元素	`SaIcon \| void`
`SaIcon.initAll(container?)`	初始化容器内所有带 `data-name` 的图标	`container?: HTMLElement \| string` 容器元素或选择器，默认为 `document`	`Array<SaIcon>`

实例方法

方法名	说明	参数	返回值
setName	设置图标名称	`name: string`	`SaIcon`
setSize	设置图标大小	`size: number`	`SaIcon`
setColor	设置图标颜色	`color: string`	`SaIcon`
getName	获取图标名称	-	`string`
destroy	销毁实例	-	`SaIcon`

HTML 属性

属性	说明	类型	默认值	示例
`data-name`	图标名称（必需）	`string`	-	`data-name="search"`
`data-size`	图标大小	`number`	`16`	`data-size="24"`
`data-color`	图标颜色	`string`	`'currentColor'`	`data-color="#409EFF"`

使用示例

自动初始化

html

<div id="example-auto-init">
  <i data-name="search" data-size="24" data-color="#409EFF"></i>
</div>

<script>
SA.init('#example-auto-init');
</script>

加载 SanoUI 组件中...

手动创建实例

html

<div id="example-manual-create">
  <i id="example-icon-1"></i>
</div>

<script>
const icon = new SaIcon('#example-icon-1', {
  name: 'search',
  size: 24,
  color: '#409EFF'
});

// 更新图标
icon.setName('close');
icon.setSize(32);
icon.setColor('#F56C6C');
</script>

加载 SanoUI 组件中...

使用静态方法

html

<div id="example-static-method">
  <i id="example-icon-2" data-name="search" data-size="24"></i>
  <i id="example-icon-3" data-name="plus" data-size="20"></i>
</div>

<script>
// 初始化单个元素
const element = Dom.query('#example-icon-2');
SaIcon.init(element);

// 初始化容器内所有图标
SaIcon.initAll('#example-static-method');
</script>

加载 SanoUI 组件中...

可用图标

SanoUI 提供了丰富的图标库，目前支持 21 个图标。所有图标都支持通过 data-name 属性使用。

图标展示

以下展示了所有可用的图标：

html

<div id="all-icons-demo" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 120px)); gap: 1rem; padding: 1rem; justify-content: start; width: 100%">
  <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px solid #e4e7ed; border-radius: 4px;">
    <i data-name="arrow-down" data-size="24"></i>
    <span style="font-size: 12px; color: #909399;">arrow-down</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px solid #e4e7ed; border-radius: 4px;">
    <i data-name="arrow-left" data-size="24"></i>
    <span style="font-size: 12px; color: #909399;">arrow-left</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px solid #e4e7ed; border-radius: 4px;">
    <i data-name="arrow-right" data-size="24"></i>
    <span style="font-size: 12px; color: #909399;">arrow-right</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px solid #e4e7ed; border-radius: 4px;">
    <i data-name="arrow-up" data-size="24"></i>
    <span style="font-size: 12px; color: #909399;">arrow-up</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px solid #e4e7ed; border-radius: 4px;">
    <i data-name="close" data-size="24"></i>
    <span style="font-size: 12px; color: #909399;">close</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px solid #e4e7ed; border-radius: 4px;">
    <i data-name="close-filled" data-size="24"></i>
    <span style="font-size: 12px; color: #909399;">close-filled</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px solid #e4e7ed; border-radius: 4px;">
    <i data-name="copy" data-size="24"></i>
    <span style="font-size: 12px; color: #909399;">copy</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px solid #e4e7ed; border-radius: 4px;">
    <i data-name="date" data-size="24"></i>
    <span style="font-size: 12px; color: #909399;">date</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px solid #e4e7ed; border-radius: 4px;">
    <i data-name="delete" data-size="24"></i>
    <span style="font-size: 12px; color: #909399;">delete</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px solid #e4e7ed; border-radius: 4px;">
    <i data-name="download" data-size="24"></i>
    <span style="font-size: 12px; color: #909399;">download</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px solid #e4e7ed; border-radius: 4px;">
    <i data-name="edit" data-size="24"></i>
    <span style="font-size: 12px; color: #909399;">edit</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px solid #e4e7ed; border-radius: 4px;">
    <i data-name="full-screen" data-size="24"></i>
    <span style="font-size: 12px; color: #909399;">full-screen</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px solid #e4e7ed; border-radius: 4px;">
    <i data-name="logo" data-size="24"></i>
    <span style="font-size: 12px; color: #909399;">logo</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px solid #e4e7ed; border-radius: 4px;">
    <i data-name="more" data-size="24"></i>
    <span style="font-size: 12px; color: #909399;">more</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px solid #e4e7ed; border-radius: 4px;">
    <i data-name="plus" data-size="24"></i>
    <span style="font-size: 12px; color: #909399;">plus</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px solid #e4e7ed; border-radius: 4px;">
    <i data-name="question-filled" data-size="24"></i>
    <span style="font-size: 12px; color: #909399;">question-filled</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px solid #e4e7ed; border-radius: 4px;">
    <i data-name="restore" data-size="24"></i>
    <span style="font-size: 12px; color: #909399;">restore</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px solid #e4e7ed; border-radius: 4px;">
    <i data-name="search" data-size="24"></i>
    <span style="font-size: 12px; color: #909399;">search</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px solid #e4e7ed; border-radius: 4px;">
    <i data-name="success-filled" data-size="24"></i>
    <span style="font-size: 12px; color: #909399;">success-filled</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px solid #e4e7ed; border-radius: 4px;">
    <i data-name="upload" data-size="24"></i>
    <span style="font-size: 12px; color: #909399;">upload</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px solid #e4e7ed; border-radius: 4px;">
    <i data-name="warning-filled" data-size="24"></i>
    <span style="font-size: 12px; color: #909399;">warning-filled</span>
  </div>
</div>

<script>
SA.init('#all-icons-demo');
</script>

加载 SanoUI 组件中...

图标列表

图标名称	说明	图标名称	说明
`arrow-down`	下箭头	`arrow-left`	左箭头
`arrow-right`	右箭头	`arrow-up`	上箭头
`close`	关闭（线条）	`close-filled`	关闭（实心）
`copy`	复制	`date`	日期
`delete`	删除	`download`	下载
`edit`	编辑	`full-screen`	全屏
`logo`	Logo	`more`	更多
`plus`	加号	`question-filled`	问号（实心）
`restore`	还原	`search`	搜索
`success-filled`	成功（实心）	`upload`	上传
`warning-filled`	警告（实心）	-	-

查看所有图标

在浏览器控制台中运行以下代码可以查看所有可用图标：

javascript

console.log(Object.keys(window.SaIcons));

实际使用场景

场景 1：按钮图标

在按钮中使用图标。

自动初始化方式（推荐）

html

<div id="btn-icon-auto-demo" style="display: flex; gap: 1rem; align-items: center;">
  <button class="sa-button sa-button--primary" style="display: flex; align-items: center; gap: 0.5rem;">
    <i data-name="search" data-size="16" data-color="#fff"></i>
    <span>搜索</span>
  </button>
  
  <button class="sa-button" style="display: flex; align-items: center; gap: 0.5rem;">
    <i data-name="download" data-size="16"></i>
    <span>下载</span>
  </button>
  
  <button class="sa-button sa-button--danger" style="display: flex; align-items: center; gap: 0.5rem;">
    <i data-name="delete" data-size="16" data-color="#fff"></i>
    <span>删除</span>
  </button>
</div>

<script>
SA.init('#btn-icon-auto-demo');
</script>

加载 SanoUI 组件中...

JavaScript 方式

html

<div id="btn-icon-js-demo" style="display: flex; gap: 1rem; align-items: center;">
  <button class="sa-button sa-button--primary" style="display: flex; align-items: center; gap: 0.5rem;">
    <i id="btn-icon-1"></i>
    <span>搜索</span>
  </button>
  
  <button class="sa-button" style="display: flex; align-items: center; gap: 0.5rem;">
    <i id="btn-icon-2"></i>
    <span>下载</span>
  </button>
  
  <button class="sa-button sa-button--danger" style="display: flex; align-items: center; gap: 0.5rem;">
    <i id="btn-icon-3"></i>
    <span>删除</span>
  </button>
</div>

<script>
  new SaIcon('#btn-icon-1', {
    name: 'search',
    size: 16,
    color: '#fff'
  });
  
  new SaIcon('#btn-icon-2', {
    name: 'download',
    size: 16
  });
  
  new SaIcon('#btn-icon-3', {
    name: 'delete',
    size: 16,
    color: '#fff'
  });
</script>

加载 SanoUI 组件中...

场景 2：状态图标

使用图标表示不同状态。

自动初始化方式（推荐）

html

<div id="status-icon-auto-demo" style="display: flex; flex-direction: column; gap: 1rem;">
  <div style="display: flex; align-items: center; gap: 0.5rem;">
    <i data-name="success-filled" data-size="20" data-color="#67C23A"></i>
    <span>操作成功</span>
  </div>
  <div style="display: flex; align-items: center; gap: 0.5rem;">
    <i data-name="warning-filled" data-size="20" data-color="#E6A23C"></i>
    <span>警告信息</span>
  </div>
  <div style="display: flex; align-items: center; gap: 0.5rem;">
    <i data-name="close-filled" data-size="20" data-color="#F56C6C"></i>
    <span>错误信息</span>
  </div>
  <div style="display: flex; align-items: center; gap: 0.5rem;">
    <i data-name="question-filled" data-size="20" data-color="#909399"></i>
    <span>提示信息</span>
  </div>
</div>

<script>
SA.init('#status-icon-auto-demo');
</script>

加载 SanoUI 组件中...

JavaScript 方式

html

<div id="status-icon-js-demo" style="display: flex; flex-direction: column; gap: 1rem;">
  <div style="display: flex; align-items: center; gap: 0.5rem;">
    <i id="status-success"></i>
    <span>操作成功</span>
  </div>
  <div style="display: flex; align-items: center; gap: 0.5rem;">
    <i id="status-warning"></i>
    <span>警告信息</span>
  </div>
  <div style="display: flex; align-items: center; gap: 0.5rem;">
    <i id="status-error"></i>
    <span>错误信息</span>
  </div>
  <div style="display: flex; align-items: center; gap: 0.5rem;">
    <i id="status-info"></i>
    <span>提示信息</span>
  </div>
</div>

<script>
  new SaIcon('#status-success', {
    name: 'success-filled',
    size: 20,
    color: '#67C23A'
  });
  
  new SaIcon('#status-warning', {
    name: 'warning-filled',
    size: 20,
    color: '#E6A23C'
  });
  
  new SaIcon('#status-error', {
    name: 'close-filled',
    size: 20,
    color: '#F56C6C'
  });
  
  new SaIcon('#status-info', {
    name: 'question-filled',
    size: 20,
    color: '#909399'
  });
</script>

加载 SanoUI 组件中...

场景 3：动态更新图标

根据业务逻辑动态更新图标。

html

<div id="dynamic-icon-demo">
  <div style="margin-bottom: 1rem;">
    <i id="dynamic-icon" data-name="plus" data-size="24"></i>
    <span id="icon-text" style="margin-left: 0.5rem;">点击切换</span>
  </div>
  <button class="sa-button" id="toggle-icon-btn">切换图标</button>
</div>

<script>
const dynamicIconEl = Dom.query('#dynamic-icon');
const dynamicIconText = Dom.query('#icon-text');
const dynamicToggleBtn = Dom.query('#toggle-icon-btn');

if (dynamicIconEl && dynamicIconText && dynamicToggleBtn) {
  // 先初始化图标
  SA.init('#dynamic-icon-demo');
  
  // 手动创建实例以便后续操作
  const dynamicIconInstance = new SaIcon(dynamicIconEl);
  
  let isPlus = true;
  
  Dom.onClick(dynamicToggleBtn, () => {
    isPlus = !isPlus;
    
    if (isPlus) {
      dynamicIconInstance.setName('plus');
      dynamicIconInstance.setColor('#409EFF');
      dynamicIconText.textContent = '加号图标';
    } else {
      dynamicIconInstance.setName('close');
      dynamicIconInstance.setColor('#F56C6C');
      dynamicIconText.textContent = '关闭图标';
    }
  });
}
</script>

加载 SanoUI 组件中...

注意事项

自动初始化：图标组件会在 SA.init() 时自动初始化所有带有 data-name 属性的元素。通过 MutationObserver 自动监听 DOM 变化，动态添加的图标元素也会自动初始化
图标依赖：图标功能依赖 SaIcons 全局对象，确保已加载图标库
必需属性：使用自动初始化时，data-name 属性是必需的
颜色继承：如果不设置 data-color，图标颜色会继承父元素的 color 样式（currentColor）
性能优化：
- 动态添加大量图标时，建议先构建 DOM 结构，再一次性添加到页面，减少 MutationObserver 的触发次数
- 对于需要频繁更新的图标，建议手动创建实例并使用 setName()、setColor() 等方法更新，而不是销毁重建

常见问题

Q: 如何查看所有可用图标？

A: 在浏览器控制台中运行：

javascript

console.log(Object.keys(window.SaIcons));

Q: 如何动态更新图标？

A: 使用实例方法：

javascript

const icon = SA.get('#my-icon');
icon.setName('new-icon-name');
icon.setSize(32);
icon.setColor('#409EFF');

Q: 图标不显示怎么办？

A: 检查以下几点：

确保已加载图标库（window.SaIcons 存在）
确保图标名称正确（可通过 window.SaIcons[iconName] 检查）
确保已调用 SA.init() 或手动创建了实例
检查元素是否有 data-name 属性（自动初始化必需）

Icon 图标 ​

基础用法 ​

方式 1：自动初始化（推荐） ​

方式 2：JavaScript 方式 ​

不同尺寸 ​

自动初始化方式 ​

JavaScript 方式 ​

不同颜色 ​

自动初始化方式 ​

JavaScript 方式 ​

自动初始化 ​

API ​

构造函数参数 ​

配置选项 ​

静态方法 ​

实例方法 ​

HTML 属性 ​

使用示例 ​

自动初始化 ​

手动创建实例 ​

使用静态方法 ​

可用图标 ​

图标展示 ​

图标列表 ​

查看所有图标 ​

实际使用场景 ​

场景 1：按钮图标 ​

自动初始化方式（推荐） ​

JavaScript 方式 ​

场景 2：状态图标 ​

自动初始化方式（推荐） ​

JavaScript 方式 ​

场景 3：动态更新图标 ​

注意事项 ​

常见问题 ​

Q: 如何查看所有可用图标？ ​

Q: 如何动态更新图标？ ​

Q: 图标不显示怎么办？ ​

Icon 图标

基础用法

方式 1：自动初始化（推荐）

方式 2：JavaScript 方式

不同尺寸

自动初始化方式

JavaScript 方式

不同颜色

自动初始化方式

JavaScript 方式

自动初始化

API

构造函数参数

配置选项

静态方法

实例方法

HTML 属性

使用示例

自动初始化

手动创建实例

使用静态方法

可用图标

图标展示

图标列表

查看所有图标

实际使用场景

场景 1：按钮图标

自动初始化方式（推荐）

JavaScript 方式

场景 2：状态图标

自动初始化方式（推荐）

JavaScript 方式

场景 3：动态更新图标

注意事项

常见问题

Q: 如何查看所有可用图标？

Q: 如何动态更新图标？

Q: 图标不显示怎么办？