@zmaui/icons-vitarx

适用于 vitarx 框架的图标组件库，基于 SVG Symbol 方案，提供 独立组件 和 Symbol 引用 两种使用方式，支持 Tree-shaking 按需引入。

安装

npm install @zmaui/icons-vitarx

需要 vitarx >= 4.0.0

使用方式

一、独立组件（推荐）

每个图标自动生成为独立的 vitarx 组件，支持 Tree-shaking，仅引入使用的图标。

import { IconHome, IconCheckCircleFill } from '@zmaui/icons-vitarx'

export default function App() {
  return (
    <div>
      <IconHome />
      <IconCheckCircleFill size="24px" color="red" />
    </div>
  )
}

组件命名规则：icon- 前缀 + 短横线命名 → Icon 前缀 + 大驼峰命名

| iconfont id | 组件名 | |--------------------------|-----------------------| | icon-home | IconHome | | icon-check-circle-fill | IconCheckCircleFill |

二、Symbol 引用

通过 Icons 组件引用全局注入的 SVG Symbol，适用于自定义图标库或需要加载完整图标集的场景。

import { Icons } from '@zmaui/icons-vitarx'

export default function App() {
  return <Icons use="icon-name" />
}

使用前需在 index.html 中加载 iconfont 资源：

<!-- 加载本库内置的 550+ 图标 -->
<script src="node_modules/@zmaui/icons-vitarx/dist/assets/iconfont.js"></script>

<!-- 或加载远程自定义图标库 -->
<script src="https://at.alicdn.com/t/c/font_4802092_0jhy18kzqt7.js"></script>

use 属性支持带 # 前缀和不带前缀两种写法：

<Icons use="icon-home" />
<Icons use="#icon-home" />

API

通用属性（IconOptions）

所有图标组件（包括 Icons）均支持以下属性：

| 属性 | 类型 | 默认值 | 说明 | |---------|-------------------|------------------|--------------------------| | size | string | '1em' | 图标尺寸，同时设置 width 和 height | | color | string | 'currentColor' | 图标颜色，继承父元素文本颜色 | | class | ClassProperties | — | CSS 类名 | | style | StyleProperties | — | 行内样式 |

此外还支持所有 SVG 原生属性（viewBox、fill、stroke 等），但 children、width、height 除外。

独立组件属性（SVGIconOptions）

继承 IconOptions，额外支持：

| 属性 | 类型 | 默认值 | 说明 | |------------|--------------------------------------------|-----|----------------| | pathFill | (string \| null \| false \| undefined)[] | — | 按索引为每条路径设置填充颜色 |

// 多路径图标分别设置颜色
<IconSomeIcon pathFill={['red', 'blue', 'green']} />

// null / false / undefined 的路径回退到 color 或 currentColor
<IconSomeIcon pathFill={['red', null]} />

Icons 组件属性（IconProps）

继承 IconOptions，额外支持：

| 属性 | 类型 | 必填 | 说明 | |-------|----------|----|-------------------| | use | string | 是 | 引用的 SVG Symbol id |

导出入口

| 路径 | 说明 | |--------------------------------|------------------------------| | @zmaui/icons-vitarx | 主入口，导出所有图标组件和类型 | | @zmaui/icons-vitarx/data | 图标元数据（名称、分类等） | | @zmaui/icons-vitarx/iconfont | 原始 iconfont.js SVG Symbol 资源 |

import { IconHome } from '@zmaui/icons-vitarx'           // 图标组件
import data from '@zmaui/icons-vitarx/data'               // 图标元数据
import '@zmaui/icons-vitarx/iconfont'                     // iconfont 资源

类型导出

import type { IconOptions, SVGIconOptions, IconProps } from '@zmaui/icons-vitarx'

| 类型 | 说明 | |------------------|-------------------------------------------------| | IconOptions | 基础图标配置（size / color / class / style + SVG 原生属性） | | SVGIconOptions | 独立组件配置，扩展 pathFill | | IconProps | Icons 组件配置，扩展 use |

License

MIT