jixicons

基于 Vue3 的 SVG 图标库，包含 255+ 精选图标。

安装

npm install jixicons

使用

方式一：<jix-icon> 组件（推荐）

使用 name 属性按图标名称渲染（需全局注册后使用）：

<template>
  <jix-icon name="home" :size="24" color="#333" />
  <jix-icon name="arrow-down" :size="32" color="var(--primary-500)" />
</template>

name 支持 kebab-case（arrow-down）或 PascalCase（ArrowDown），自动识别。

使用 icon 属性直接传入组件实例（Tree-shakeable，无需全局注册）：

<template>
  <jix-icon :icon="Home" :size="24" color="#333" />
</template>

<script setup>
import { JixIcon, Home } from 'jixicons'
</script>

或通过 slot 传入子图标，属性会通过 provide/inject 自动传递：

<template>
  <jix-icon :size="24" color="#333">
    <Home />
    <Add />
  </jix-icon>
</template>

子图标也可以单独覆盖属性：

<template>
  <jix-icon :size="24" color="#333">
    <Home />              <!-- 继承: size=24, color=#333 -->
    <Add :size="32" />    <!-- 覆盖: size=32, color=#333 -->
    <User color="#42b983" />  <!-- 覆盖: size=24, color=#42b983 -->
  </jix-icon>
</template>

属性说明

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | name | string | - | 图标名称，支持 kebab-case 或 PascalCase（需全局注册） | | icon | Component | - | 图标组件实例（tree-shakeable，优先级高于 name） | | size | number \| string | 24 | 图标尺寸 | | color | string | 'currentColor' | 图标颜色 | | strokeWidth | number \| string | 4 | 描边宽度 |

自定义 SVG 图标

通过 jix-icon 的 slot 直接传入 SVG 内容：

<template>
  <jix-icon :size="24" color="#333">
    <circle cx="24" cy="24" r="20" />
    <path d="M..." />
  </jix-icon>
</template>

图标分组

通过 groups 对象按分组使用图标：

import { groups } from 'jixicons'

const { Home, ArrowLeft, ArrowRight } = groups.navigation

| 分组 | 说明 | 包含图标示例 | |------|------|-------------| | navigation | 导航方向 | Home, ArrowLeft, ArrowRight, MenuBurger | | action | 操作行为 | Add, Edit, Delete, Save, Copy, Close | | business | 商业业务 | User, Cart, ShopBag, Finance, Vip | | media | 媒体播放 | Play, Pause, Music, Video, Camera | | data | 数据图表 | ChartBar, Database, Calendar, Table | | system | 系统功能 | Config, Help, Info, Warning, Lock | | ungrouped | 未分组 | 自动归入未在 groups.json 中配置的图标 |

全局注册

在 main.ts 中使用 JixiconsPlugin 注册所有图标：

import { createApp } from 'vue'
import { JixiconsPlugin } from 'jixicons'
import 'jixicons/dist/jixicons.css'
import App from './App.vue'

const app = createApp(App)

app.use(JixiconsPlugin)

app.mount('#app')

全局注册后可直接在模板中使用，无需单独导入：

<template>
  <jix-icon name="home" :size="24" color="#333" />
  <jix-icon name="arrow-down" />
  <jix-icon :size="24">
    <Home />
  </jix-icon>
</template>

动态注册图标

运行时动态注册或替换图标：

import { registerIcon, unregisterIcon, hasIcon, getIcon } from 'jixicons'
import MyCustomIcon from './MyCustomIcon.vue'

// 注册新图标
registerIcon('MyCustomIcon', MyCustomIcon)

// 替换已有图标（同名覆盖）
registerIcon('Home', NewHomeComponent)

// 注销图标
unregisterIcon('MyCustomIcon')

// 查询图标
hasIcon('Home')        // true
getIcon('Home')        // Component

导入方式

// 按需导入（推荐，支持 tree-shaking）
import { JixIcon, Home, Add } from 'jixicons'

// 全量导入
import * as Jixicons from 'jixicons'

// 分组导入
import { groups } from 'jixicons'

图标新增与维护

新增图标

1. 将 SVG 文件放入 icons/svg/ 目录
2. 运行转换脚本：

npm run convert

3. 重新构建：

npm run build

分组管理

所有图标分组配置在 scripts/groups.json 文件中，采用 JSON 格式，键为分组名称，值为图标名称数组。

分组配置格式

图标名称使用短横线命名（kebab-case），与 SVG 文件名保持一致：

{
  "navigation": [
    "home", "arrowBack", "arrowLeft", "arrowRight"
  ],
  "action": [
    "add", "edit", "delete", "save"
  ]
}

新增分组

在 groups.json 中添加新的键值对即可：

{
  "navigation": ["home", "arrowBack"],
  "communication": ["message", "comment", "phone"]
}

删除分组

直接移除对应的键值对。该分组下的图标会自动归入 ungrouped 分组。

修改分组名称

将旧键名替换为新键名，值保持不变：

{
  "nav": ["home", "arrowBack"]
}

在分组间移动图标

将图标名称从一个数组移到另一个数组：

{
  "navigation": ["home"],
  "action": ["arrowBack", "add", "edit"]
}

上例中 arrowBack 从 navigation 移到了 action 分组。

从分组中移除图标

将图标名称从数组中删除即可。被移除的图标会自动出现在 ungrouped 分组中，不会丢失。

预览页即时更新

修改 groups.json 后，预览页面会即时热更新，无需运行 npm run convert 或手动刷新页面。这是因为预览页通过 Vite HMR 直接监听 groups.json 的变化。

注意：预览页的即时更新仅用于开发调试。正式构建发布前，仍需运行 npm run convert 以同步更新 icons/index.ts 中的 groups 导出对象。

构建

npm run build

技术栈

• Vue 3
• TypeScript
• Vite