Preview Updated 2026-05-10

Icon

ChuFix's built-in SVG icon component. Type-safe `name`, inline rendering by default, no separate sprite mounting required.

Basic usage

name uses the IconName type, drawn from the 231 built-in icon names in @chufix-design/icons. Renders as a decorative icon by default; pass title or label when an accessible name is needed.

search

check-circle

alert-circle

calendar

table

layout

modal

component

theme-token

schema

diff

sandbox

src/App.vue vue

<CfIcon name="search" />
<CfIcon name="calendar" size="lg" />
<CfIcon name="component" :size="28" />
<CfIcon name="check-circle" color="var(--status-success)" />
<CfIcon name="loader" motion="spin" />
<CfIcon name="alert-circle" title="Error" />

src/App.tsx tsx

<CfIcon name="search" />
<CfIcon name="calendar" size="lg" />
<CfIcon name="component" size={28} />
<CfIcon name="check-circle" color="var(--status-success)" />
<CfIcon name="loader" motion="spin" />
<CfIcon name="alert-circle" title="Error" />

Sizes

size accepts a preset tier (xs / sm / md / lg / xl) or a number / string (custom px / em).

xs sm md lg xl 32px

src/App.vue vue

<CfIcon name="search" size="xs" />
<CfIcon name="search" size="sm" />
<CfIcon name="search" size="md" />
<CfIcon name="search" size="lg" />
<CfIcon name="search" size="xl" />
<CfIcon name="search" :size="32" />

src/App.tsx tsx

<CfIcon name="search" size="xs" />
<CfIcon name="search" size="sm" />
<CfIcon name="search" size="md" />
<CfIcon name="search" size="lg" />
<CfIcon name="search" size="xl" />
<CfIcon name="search" size={32} />

Color

When color is not passed, the icon uses currentColor and inherits the parent text color — this is the default and the most flexible option. For semantic colors, pass a token directly: var(--status-success) / var(--accent-1), etc.

继承父级颜色

src/App.vue vue

<CfIcon name="check-circle" color="var(--status-success)" size="lg" />
<CfIcon name="alert-triangle" color="var(--status-warning)" size="lg" />
<CfIcon name="x-circle" color="var(--status-error)" size="lg" />
<CfIcon name="info" color="var(--status-info)" size="lg" />

src/App.tsx tsx

<CfIcon name="check-circle" color="var(--status-success)" size="lg" />
<CfIcon name="alert-triangle" color="var(--status-warning)" size="lg" />
<CfIcon name="x-circle" color="var(--status-error)" size="lg" />
<CfIcon name="info" color="var(--status-info)" size="lg" />

Motion

motion adds a simple looping animation — spin (for loaders), pulse (breathing emphasis), bounce (strong cue). All motion respects prefers-reduced-motion and stops automatically when the user opts in.

spin加载中motion="spin"

pulse状态呼吸motion="pulse"

bounce引导方向motion="bounce"

src/App.vue vue

<CfIcon name="loader" motion="spin" size="lg" />
<CfIcon name="circle" motion="pulse" size="lg" />
<CfIcon name="arrow-down" motion="bounce" size="lg" />

src/App.tsx tsx

<CfIcon name="loader" motion="spin" size="lg" />
<CfIcon name="circle" motion="pulse" size="lg" />
<CfIcon name="arrow-down" motion="bounce" size="lg" />

API

Prop	Type	Default	Description
`name`	`IconName`	—	Icon name with typed validation
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number \| string`	`'md'`	Size
`strokeWidth`	`number`	`1.5`	Stroke width
`color`	`string`	—	Icon color; inherits `currentColor` by default
`motion`	`'spin' \| 'pulse' \| 'bounce'`	—	Simple animation effect; respects `prefers-reduced-motion`
`title`	`string`	—	SVG title; also gives the icon `img` semantics
`label`	`string`	—	Vue-only aria-label

In React you can pass aria-label directly:

<CfIcon name="search" aria-label="Search" />

Icon catalog

The full list of built-in icons. Click an entry to copy its prefixed component usage, e.g. <CfIcon name="search" />.

搜索图标

点击图标复制<CfIcon name="search" />

动态 SVG

基于同一套内联 SVG 图标，叠加 motion 预设；支持减少动画偏好。

3 个

方向导航

箭头、折叠、跳转、路由

26 个

状态反馈

校验、提示、加载、形状

18 个

常用操作

增删改查、复制、导入导出

22 个

文件文档

文件、目录、书籍、剪贴板

12 个

界面布局

窗口、面板、菜单、组件结构

29 个

用户安全

账号、权限、认证、隐私

18 个

数据图表

表格、关系、趋势、公式

16 个

开发技术

代码、服务、网络、发布

29 个

媒体设备

图片、音视频、设备、播放

19 个

内容编辑

文本、段落、排版、格式

18 个

业务场景

位置、交易、时间、主题

24 个