@zhiaiwan-icons/svg

框架无关 SVG 字符串图标包，对应 IconPark 的 @icon-park/svg。调用函数返回完整 <svg>...</svg> 字符串。

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

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

安装

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

调用函数

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

const svg = Home({ theme: 'outline' })
console.log(svg) // 完整 <svg>...</svg> 字符串

全局配置

使用 setConfig / getConfig 设置全局默认（单次调用仍可传 options 覆盖）：

import { setConfig, getConfig, Home } from '@zhiaiwan-icons/svg'

setConfig({
  theme: 'outline',
  size: '1em',
  strokeWidth: 4,
  strokeLinecap: 'round',
  strokeLinejoin: 'round',
  // 命名色字段会映射为 fill 四色数组
  outStrokeColor: '#000',
  outFillColor: '#2F88FF',
  innerStrokeColor: '#FFF',
  innerFillColor: '#43CCF8',
})

const svg = Home() // 使用全局默认
console.log(getConfig())

按需引入

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

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

嵌入元数据

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

import icons from '@zhiaiwan-icons/svg/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']。