Icon

图标以独立 SVG Vue 组件的形式由 @cedarjs/icons-vue 提供，支持按需导入和 Tree Shaking。

配置 CedarResolver() 后，推荐使用模板标签自动按需导入。c-icon-* 是 Resolver 的图标命名空间，实际仍只会加载对应的单个图标：

<c-icon size="40" color="red">
  <c-icon-check-circle-fill />
</c-icon>

也可以手动导入独立图标组件：

import { IconCheckCircleFill } from "@cedarjs/icons-vue";

手动导入时，同样推荐通过 c-icon 容器统一控制尺寸、颜色和旋转：

<c-icon size="40" color="red">
  <IconCheckCircleFill />
</c-icon>

以上两种写法效果一致，均支持 Tree Shaking。前者由 Resolver 生成导入，后者由业务代码显式导入。

动态名称只查询显式注册到当前 Vue 应用的图标，c-icon 本身不会导入图标全集：

// main.ts
import { createApp } from "vue";
import { IconCheckCircleFill, IconWarning } from "@cedarjs/icons-vue";
import App from "./App.vue";

const app = createApp(App);
app.component("IconCheckCircleFill", IconCheckCircleFill);
app.component("IconWarning", IconWarning);
app.mount("#app");

<c-icon name="check-circle-fill" size="24" />

如果业务确实需要通过任意名称访问全部图标，可以主动批量注册。此时会加载完整图标集合：

import * as CedarIconsVue from "@cedarjs/icons-vue";

for (const [name, component] of Object.entries(CedarIconsVue)) {
  if (name !== "iconNames") app.component(name, component);
}

案例

基础用法

图标尺寸

图标颜色

旋转与持续旋转

rotate 设置静态角度，spin 开启持续旋转动画，两者可以组合使用。

点击事件

自定义图标

全部图标

PC 与移动端使用同一套规范名称。点击图标即可复制对应的按需导入标签。

API

Icon Props

属性	说明	类型	默认值
name	已显式注册的图标名称	string	-
size	大小	number | string	-
color	图标颜色	string	-
rotate	旋转角度	number	-
spin	是否持续旋转	boolean	false
transition	名称切换动画时长（ms）	number | string	0
animation-class	自定义切换动画类名	string	-

Icon-xxx Props

属性	说明	类型	默认值
size	大小	number | string	-
color	图标颜色	string	-
rotate	旋转角度	number	-
spin	是否旋转	boolean	false
title	无障碍标题	string	-
stroke-width	线宽	number	4
stroke-linecap	端点类型	'butt' | 'round' | 'square'	'butt'
stroke-linejoin	拐角类型	'bevel' | 'inherit' | 'miter' | 'round'	'miter'

Icon Events

事件名	说明	参数
click	点击触发的事件	(event: MouseEvent) => void

Icon Slots

插槽名	说明
default	自定义默认内容

类型定义

组件导出以下类型定义

import type { IconProps } from "@cedarjs/ui";

同源实现与平台边界

两端各自保存完整源码，不引用公共核心，不共享组件实例或响应式状态；修改时同步维护两份实现。主体、Props、关键样式及配对测试纳入只读源码一致性检查，主题 token 和安装入口各自维护。

只解析本应用已注册的图标；连续切换 name 会取消过期定时器，卸载后不再执行切换。各库注册前缀和历史 spin 类由本地适配保留，图标资源不跨库引用。