@zhiaiwan-icons/react

React 图标包（React ≥16.9），对应 IconPark 的 @icon-park/react。

同一份 SVG 资产与元数据编译产出；默认 fill: currentColor、prefix: 'i'（类名 i-icon）。

• 提供 2000+ 图标
• 四种主题：outline / filled / two-tone / multi-color

安装

npm install @zhiaiwan-icons/react --save
# 或
pnpm add @zhiaiwan-icons/react

引入组件

import { Home } from '@zhiaiwan-icons/react'

export function Demo() {
  return (
    <>
      <Home />
      <Home theme="filled" />
    </>
  )
}

样式

import '@zhiaiwan-icons/react/styles/index.css'
// 或
import '@zhiaiwan-icons/react/styles/index.less'

全局配置

使用 IconProvider 为子树设置默认配置（单图标 props 仍可覆盖）：

import { IconProvider, DEFAULT_ICON_CONFIGS, Home } from '@zhiaiwan-icons/react'
import '@zhiaiwan-icons/react/styles/index.css'

const iconConfig = { ...DEFAULT_ICON_CONFIGS, prefix: 'icon' }

export function App() {
  return (
    <IconProvider value={iconConfig}>
      <Home />
      <Home theme="filled" />
    </IconProvider>
  )
}

按需引入

可配合 babel-plugin-import 按需加载：

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "@zhiaiwan-icons/react",
        "libraryDirectory": "es/icons",
        "camel2DashComponentName": false
      }
    ]
  ]
}

动态图标

推荐按需加载。远程菜单等场景可用 Icon 组件按 type 渲染（支持 PascalCase / kebab-case）：

import { Icon } from '@zhiaiwan-icons/react'
import type { IconType } from '@zhiaiwan-icons/react'

export function Demo(props: { type: IconType }) {
  const { type } = props
  return (
    <>
      <Icon type={type} theme="filled" />
      <Icon type="AddText" theme="filled" />
      <Icon type="add-text" />
    </>
  )
}

不确定 type 是否合法时，可用 ALL_ICON_KEYS 校验：

import { Icon, ALL_ICON_KEYS } from '@zhiaiwan-icons/react'
import type { IconType } from '@zhiaiwan-icons/react'

export function Demo(props: { type: IconType }) {
  const { type } = props
  if (ALL_ICON_KEYS.indexOf(type) < 0) {
    return <span>Not Exists</span>
  }
  return <Icon type={type} theme="filled" />
}

React 端根节点透传 HTMLAttributes（如 className / style / onClick 等）。

嵌入元数据

如需图标名称、作者、分类、标签等信息，可使用包根目录的 icons.json：

import icons from '@zhiaiwan-icons/react/icons.json'

图标属性

| 属性 | 说明 | 类型 | 默认 | | --- | --- | --- | --- | | theme | 图标主题 | 'outline' \| 'filled' \| 'two-tone' \| 'multi-color' | outline | | size | 宽高 | number \| string | 1em | | spin | 旋转动画 | boolean | false | | fill | 主题颜色；多色时传数组 | string \| string[] | currentColor | | strokeLinecap | 端点 | 'butt' \| 'round' \| 'square' | round | | strokeLinejoin | 拐点 | 'miter' \| 'round' \| 'bevel' | round | | strokeWidth | 描边粗细 | number | 4 |

主题与颜色

fill 与 theme 共同决定最终 colors[]：

| theme | colors[0] | colors[1] | colors[2] | colors[3] | | --- | --- | --- | --- | --- | | outline | fill[0] | none | fill[0] | none | | filled | fill[0] | fill[0] | #FFF | #FFF | | two-tone | fill[0] | fill[1] | fill[0] | fill[1] | | multi-color | fill[0] | fill[1] | fill[2] | fill[3] |

多色推荐顺序：['外描边', '外填充', '内描边', '内填充']，例如 ['#333','#2F88FF','#FFF','#43CCF8']。