@zhiaiwan-icons/vue3

Vue 3 图标包，对应 IconPark 的 @icon-park/vue-next。

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

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

安装

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

引入组件

在组件顶部引入图标，并在 template 中使用：

<template>
  <Home theme="filled" />
</template>

<script>
import { Home } from '@zhiaiwan-icons/vue3'

export default {
  components: { Home },
}
</script>

若不希望逐个注册，可全局安装全部图标（体积较大，推荐按需引入）：

import { createApp } from 'vue'
import { install } from '@zhiaiwan-icons/vue3'
import App from './App.vue'

const app = createApp(App)

// 默认注册为 icon-{name}，如 icon-home
install(app)
// 自定义前缀：install(app, 'i') → <i-home />

app.mount('#app')

样式

import '@zhiaiwan-icons/vue3/styles/index.css'

全局配置

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

<template>
  <IconProvider :value="iconConfig">
    <Home />
    <Home theme="filled" />
  </IconProvider>
</template>

<script setup lang="ts">
import { DEFAULT_ICON_CONFIGS, IconProvider, Home } from '@zhiaiwan-icons/vue3'
import '@zhiaiwan-icons/vue3/styles/index.css'

const iconConfig = { ...DEFAULT_ICON_CONFIGS, prefix: 'icon', size: 20 }
</script>

按需引入

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

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

动态图标

推荐按需加载以减小体积。远程菜单等场景可用 IconPark 按 type 动态渲染（支持 PascalCase / kebab-case）：

<template>
  <IconPark type="AddText" theme="filled" />
  <IconPark type="add-text" theme="filled" />
</template>

<script>
import { IconPark } from '@zhiaiwan-icons/vue3'

export default {
  components: { IconPark },
}
</script>

嵌入元数据

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

import icons from '@zhiaiwan-icons/vue3/icons.json'
// 含 name / title / category / tag / author 等元数据

图标属性

| 属性 | 说明 | 类型 | 默认 | | --- | --- | --- | --- | | 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']。