JixIcon

一个基于 Vue 3 的 SVG 线条图标组件库，包含 255 个精心设计的图标。

特性

• 255 个图标 — 覆盖箭头、媒体、编辑、文件、用户、图表、设备、社交、业务、状态等 11 个分类
• Vue 3 组件 — 每个图标都是独立的 SFC 组件，完整的 TypeScript 类型支持
• 按需加载 — 支持 Tree Shaking，只打包实际使用的图标
• 灵活属性 — 支持尺寸、颜色、旋转、动画、描边粗细等属性配置
• 全局配置 — 通过 provide/inject 设置默认尺寸、颜色和类名前缀
• 线条风格 — 干净的 SVG 线条图标，圆角连接（stroke-linejoin: round）

安装

npm install jixicon

需要 Vue 3.0+ 作为 peer dependency。

快速上手

方式一：JixIcon 容器 + 图标组件（推荐）

使用 <JixIcon> 包裹图标，统一控制尺寸、颜色等样式：

<template>
  <!-- 默认使用（继承全局配置或默认值） -->
  <JixIcon>
    <Home />
  </JixIcon>

  <!-- 自定义尺寸和颜色 -->
  <JixIcon :size="24" color="#1890ff">
    <Home />
  </JixIcon>

  <!-- 旋转动画（加载状态） -->
  <JixIcon :spin="true">
    <Loading />
  </JixIcon>

  <!-- 旋转角度 -->
  <JixIcon :rotate="90">
    <ArrowRight />
  </JixIcon>
</template>

<script setup lang="ts">
import { JixIcon, Home, Loading, ArrowRight } from 'jixicon'
</script>

方式二：直接使用图标组件

每个图标都支持直接传入 props，无需包裹：

<template>
  <Home :size="24" color="#1890ff" />
  <Loading :spin="true" />
  <ArrowRight :rotate="90" />
  <Search :size="20" color="#333" :stroke-width="3" />
</template>

<script setup lang="ts">
import { Home, Loading, ArrowRight, Search } from 'jixicon'
</script>

方式三：自定义 SVG 图标

在 <JixIcon> 中放置任意自定义 SVG，继承容器的样式：

<template>
  <JixIcon :size="24" color="#1890ff">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M12 2L2 22h20L12 2z" />
    </svg>
  </JixIcon>
</template>

<script setup lang="ts">
import { JixIcon } from 'jixicon'
</script>

全局配置

在应用入口文件中通过 Vue 的 provide API 设置默认配置：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { JixIconConfig } from 'jixicon'

const app = createApp(App)

app.provide(JixIconConfig, {
  size: 20,
  color: '#333333',
  classPrefix: 'jix-icon'
})

app.mount('#app')

图标组件的独立 props 会始终覆盖全局配置。

API 参考

JixIcon 容器组件 Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|-------|------| | size | number \| string | — | 图标尺寸（数字为 px，或传 CSS 字符串）。覆盖全局配置 | | color | string | — | 图标颜色。覆盖全局配置 | | spin | boolean | false | 是否开启旋转动画 | | rotate | number | — | 旋转角度（度） | | class | string | — | 自定义 CSS 类名 | | style | CSSProperties | — | 自定义内联样式 |

图标组件 Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|-------|------| | size | number \| string | 16 | 图标尺寸（数字为 px，或传 CSS 字符串） | | color | string | 'currentColor' | 图标颜色 | | spin | boolean | false | 是否开启旋转动画 | | rotate | number | 0 | 旋转角度（度） | | strokeWidth | number | 4 | SVG 描边粗细 |

JixIconConfig 类型

interface JixIconConfigType {
  size?: number | string
  color?: string
  classPrefix?: string
}

iconGroups

import { iconGroups } from 'jixicon'
// iconGroups.arrow.icons → ['arrowUp', 'arrowDown', ...]

图标分类

| 分组 | 说明 | 数量 | 示例 | |-----|------|------|------| | arrow | 箭头方向 | 52 | arrowUp, arrowRight, expandDown | | media | 媒体控制 | 13 | play, pause, video, music | | edit | 编辑操作 | 18 | edit, copy, delete, save | | file | 文件文件夹 | 9 | folder, upload, download | | user | 用户相关 | 6 | user, users, idCard | | chart | 图表数据 | 10 | chartBar, chartPie, chartLine | | device | 设备硬件 | 11 | computer, phone, camera | | social | 社交平台 | 3 | socialTiktok, socialFb | | business | 业务功能 | 25 | home, search, calendar, config | | status | 状态提示 | 12 | check, close, info, warning | | other | 其他图标 | 96 | add, mail, lock, star, tag |

图标命名规范

• 驼峰命名（camelCase）— 如 ArrowRight、BatCharge、VolUp
• 具有语义化，便于理解和记忆
• 名称不超过 15 个字符
• 不使用阿拉伯数字和无语义后缀

按需引入

JixIcon 天然支持 Tree Shaking，只有你实际 import 的图标会被打包：

// 推荐 — 只有 Home、Edit、User 会被打包
import { Home, Edit, User } from 'jixicon'

// 避免 — 这会导入全部图标，增大包体积
import * as JixIcon from 'jixicon'

预览页面

运行内置的图标预览页面浏览所有图标：

git clone <repo-url>
cd jixicon
npm install
npm run dev

功能：分组展示、属性实时调整、搜索过滤、亮暗主题切换、代码复制。

技术栈

• Vue 3 — SFC 组件
• Vite 8 — 构建工具
• TypeScript — 完整类型定义
• vue-tsc — 类型检查与 .d.ts 生成

许可证

MIT