Icon 图标

通用图标组件，支持 SVG、字体图标、图片图标等多种形式，不依赖任何特定图标库。

基础用法

默认图标

不传入任何参数时，显示默认的星形图标：

<template>
  <ExIcon />
</template>

SVG 图标

通过插槽传入 SVG 内容：

<template>
  <ExIcon>
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path
        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
      />
    </svg>
  </ExIcon>
</template>

字体图标

支持 Font Awesome、Iconfont 等字体图标库：

<template>
  <!-- Font Awesome -->
  <ExIcon name="star" prefix="fas" />
  <ExIcon name="heart" prefix="far" />

  <!-- Iconfont -->
  <ExIcon name="icon-home" />
</template>

图片图标

使用图片作为图标：

<template>
  <ExIcon src="/logo.png" alt="Logo" />
</template>

Iconify API 图标

使用 Iconify API 提供的在线图标，无需安装依赖：

<template>
  <ExIcon src="https://api.iconify.design/ri/home-line.svg" />
  <ExIcon src="https://api.iconify.design/ri/user-line.svg" />
  <ExIcon src="https://api.iconify.design/ri/settings-line.svg" />
  <ExIcon src="https://api.iconify.design/ri/search-line.svg" />
</template>

图片图标着色

通过 color 属性可以对图片图标进行着色（使用 CSS mask 技术）：

<template>
  <!-- 使用 color 属性对图片图标着色 -->
  <ExIcon src="https://api.iconify.design/ri/home-line.svg" color="#29ABE2" :size="24" />
  <ExIcon src="https://api.iconify.design/ri/user-line.svg" color="#ff6b6b" :size="24" />
  <ExIcon src="https://api.iconify.design/ri/heart-line.svg" color="#4ecdc4" :size="24" />
</template>

提示

图片着色功能使用 CSS mask 属性实现，适用于单色图标。对于彩色图标，着色后会变成单色。

图标大小

预设大小

<template>
  <ExIcon :size="12" />
  <ExIcon :size="16" />
  <ExIcon :size="20" />
  <ExIcon :size="24" />
  <ExIcon :size="32" />
</template>

自定义大小

<template>
  <ExIcon size="2rem" />
  <ExIcon size="48px" />
</template>

图标颜色

<template>
  <ExIcon color="#29ABE2" />
  <ExIcon color="#ff6b6b" />
  <ExIcon color="#4ecdc4" />
  <ExIcon color="#45b7d1" />
</template>

图标旋转

静态旋转

<template>
  <ExIcon :rotate="45" />
  <ExIcon :rotate="90" />
  <ExIcon :rotate="180" />
</template>

旋转动画

<template>
  <ExIcon spin />
</template>

可点击图标

<template>
  <ExIcon clickable @click="handleClick" />

  <ExIcon clickable disabled />
</template>

API

Props

参数	说明	类型	默认值
name	图标名称（字体图标）	string	-
prefix	图标前缀（如 fas, far）	string	-
src	图片路径（图片图标）	string	-
alt	图片替代文本	string	'icon'
size	图标大小	number | string	16
color	图标颜色	string	-
rotate	旋转角度	number	0
spin	是否旋转动画	boolean	false
clickable	是否可点击	boolean	false
disabled	是否禁用	boolean	false
customClass	自定义类名	string	-
tag	HTML 标签	string	'span'

Events

事件名	说明	参数
click	点击事件（需要设置 clickable）	(event: MouseEvent)

Slots

插槽名	说明
default	自定义图标内容（通常是 SVG）

常用图标集合

以下是组件库中其他组件常用的32个图标示例：

基础操作

添加

减少

编辑

删除

保存

关闭

确认

刷新

导航

左箭头

右箭头

上箭头

下箭头

菜单

更多

外链

下载

状态

信息

警告

成功

错误

加载

显示

隐藏

锁定

功能

邮件

电话

日历

时间

文件

文件夹

图片

收藏

使用建议

图标库集成

ExIcon 组件设计为通用图标容器，可以与任何图标库配合使用：

Font Awesome

npm install @fortawesome/fontawesome-free

@import '@fortawesome/fontawesome-free/css/all.css';

<ExIcon name="star" prefix="fas" />
<ExIcon name="heart" prefix="far" />
<ExIcon name="github" prefix="fab" />

Iconify API（推荐）

无需安装任何依赖，直接使用 Iconify API：

<template>
  <!-- Heroicons 风格 -->
  <ExIcon src="https://api.iconify.design/heroicons/star.svg" />

  <!-- Lucide 风格 -->
  <ExIcon src="https://api.iconify.design/lucide/star.svg" />

  <!-- Remix Icon 风格 -->
  <ExIcon src="https://api.iconify.design/ri/star-line.svg" />
</template>

性能优化

1. SVG 优化：使用工具如 SVGO 优化 SVG 文件
2. 按需加载：只引入需要的图标
3. 图标精灵：对于大量小图标，考虑使用 SVG 精灵图

无障碍性

1. 为装饰性图标添加 aria-hidden="true"
2. 为功能性图标提供合适的 aria-label
3. 确保可点击图标有足够的点击区域（至少 44x44px）