ChuFix UI v0.2.1
开发预览 更新于 2026-05-10

Icon 图标

ChuFix 内置 SVG 图标组件，类型化 name，默认内联渲染，无需额外挂载 sprite。

基础用法

name 使用 IconName 类型，来自 @chufix-design/icons 的 231 个内置图标名。默认作为装饰性图标渲染；需要可访问名称时传 title 或 label。

背景
search
check-circle
alert-circle
calendar
table
layout
modal
component
theme-token
schema
diff
sandbox
 
<script setup lang="ts">
import { CfIcon, type IconName } from '@chufix-design/vue';

const icons: IconName[] = [
  'search',
  'check-circle',
  'alert-circle',
  'calendar',
  'table',
  'layout',
  'modal',
  'component',
  'theme-token',
  'schema',
  'diff',
  'sandbox',
];
</script>

<template>
  <div class="demo-stack">
    <div class="demo-row" style="gap: 1.25rem; align-items: center;">
      <CfIcon name="search" size="sm" />
      <CfIcon name="search" size="md" />
      <CfIcon name="search" size="lg" />
      <CfIcon name="search" :size="28" />
    </div>

    <div class="demo-row" style="gap: 1rem; align-items: center;">
      <CfIcon name="check-circle" color="var(--status-success)" size="lg" />
      <CfIcon name="alert-circle" color="var(--status-error)" size="lg" />
      <CfIcon name="info" color="var(--accent-1)" size="lg" />
      <CfIcon name="loader" motion="spin" size="lg" />
      <CfIcon name="bell" motion="pulse" color="var(--status-warning)" size="lg" />
      <CfIcon name="arrow-down" motion="bounce" color="var(--accent-1)" size="lg" />
    </div>

    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; width: 100%;">
      <div
        v-for="name in icons"
        :key="name"
        style="display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px; border: 1px solid var(--line-1); border-radius: var(--r-6); color: var(--fg-2);"
      >
        <CfIcon :name="name" />
        <code style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ name }}</code>
      </div>
    </div>
  </div>
</template>

<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="错误" />

尺寸

size 接受预设档位（xs / sm / md / lg / xl）或数字 / 字符串（自定义 px / em）。

背景
xs sm md lg xl 32px
 
<script setup lang="ts">
import { CfIcon } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; gap: 16px; align-items: center;">
    <span><CfIcon name="search" size="xs" /> xs</span>
    <span><CfIcon name="search" size="sm" /> sm</span>
    <span><CfIcon name="search" size="md" /> md</span>
    <span><CfIcon name="search" size="lg" /> lg</span>
    <span><CfIcon name="search" size="xl" /> xl</span>
    <span><CfIcon name="search" :size="32" /> 32px</span>
  </div>
</template>

<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 时图标用 currentColor，跟随父级文字颜色 — 这是默认且最灵活的方式。需要语义色时直接传 token：var(--status-success) / var(--accent-1) 等。

背景
继承父级颜色 
<script setup lang="ts">
import { CfIcon } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; gap: 16px; align-items: center; flex-wrap: wrap;">
    <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" />
    <CfIcon name="star" color="var(--accent-1)" size="lg" />
    <span style="color: var(--accent-1);">
      <CfIcon name="zap" size="lg" />
      继承父级颜色
    </span>
  </div>
</template>

<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 给图标加简单的循环动效 — spin（loader 用）/ pulse（呼吸高亮）/ bounce（强引导）。所有动效遵循 prefers-reduced-motion，用户开了减少动画选项时会自动停止。

背景
spin加载中motion="spin"
pulse状态呼吸motion="pulse"
bounce引导方向motion="bounce"
 
<script setup lang="ts">
import { CfIcon } from '@chufix-design/vue';

const motions = [
  {
    icon: 'loader',
    motion: 'spin',
    label: 'spin',
    hint: '加载中',
    tone: 'primary',
  },
  {
    icon: 'circle',
    motion: 'pulse',
    label: 'pulse',
    hint: '状态呼吸',
    tone: 'success',
  },
  {
    icon: 'arrow-down',
    motion: 'bounce',
    label: 'bounce',
    hint: '引导方向',
    tone: 'warning',
  },
] as const;
</script>

<template>
  <div class="motion-demo">
    <div
      v-for="item in motions"
      :key="item.motion"
      class="motion-demo__card"
      :data-tone="item.tone"
    >
      <span class="motion-demo__preview">
        <CfIcon :name="item.icon" :motion="item.motion" size="xl" />
      </span>
      <span class="motion-demo__body">
        <strong>{{ item.label }}</strong>
        <em>{{ item.hint }}</em>
      </span>
      <code>motion="{{ item.motion }}"</code>
    </div>
  </div>
</template>

<style scoped>
.motion-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  width: min(100%, 640px);
}

.motion-demo__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-6);
  background: var(--bg-1);
  color: var(--fg-1);
}

.motion-demo__preview {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line-1);
  border-radius: var(--r-6);
  background: var(--bg-inset);
}

.motion-demo__card[data-tone='primary'] .motion-demo__preview { color: var(--accent-1); }
.motion-demo__card[data-tone='success'] .motion-demo__preview { color: var(--status-success); }
.motion-demo__card[data-tone='warning'] .motion-demo__preview { color: var(--status-warning); }

.motion-demo__body {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.motion-demo__body strong {
  font-size: var(--t-13);
  line-height: 1.2;
}

.motion-demo__body em {
  color: var(--fg-3);
  font-size: var(--t-12);
  font-style: normal;
}

.motion-demo__card code {
  grid-column: 1 / -1;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

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

API

Prop类型默认值说明
nameIconName—图标名，类型化校验
size'xs' | 'sm' | 'md' | 'lg' | 'xl' | number | string'md'尺寸
strokeWidthnumber1.5描边宽度
colorstring—图标颜色；默认继承 currentColor
motion'spin' | 'pulse' | 'bounce'—简单动态图标效果，遵循 prefers-reduced-motion
titlestring—SVG title，同时让图标具备 img 语义
labelstring—Vue 专用 aria-label

React 可直接传 aria-label：

<CfIcon name="search" aria-label="搜索" />

图标清单

下面列出当前内置的全部图标。点击任意项会复制带组件前缀的用法，例如 <CfIcon name="search" />。

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

动态 SVG

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

3 个

方向导航

箭头、折叠、跳转、路由

26 个

状态反馈

校验、提示、加载、形状

18 个

常用操作

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

22 个

文件文档

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

12 个

界面布局

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

29 个

用户安全

账号、权限、认证、隐私

18 个

数据图表

表格、关系、趋势、公式

16 个

开发技术

代码、服务、网络、发布

29 个

媒体设备

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

19 个

内容编辑

文本、段落、排版、格式

18 个

业务场景

位置、交易、时间、主题

24 个

反馈与讨论

Icon 图标 的讨论

0
0 / 600
一键发送
正在加载评论...