easy-vue-icon

Easy Vue SVG 图标库（核心图标 + 业务图标）

特性

• 🎨 纯 SVG 图标，内嵌在组件中，无需额外资源文件
• 📦 支持按需导入和全局插件注册
• 🎯 统一的属性规范，类型安全
• 🚀 基于 Vue 3 + TypeScript 构建
• 💡 核心图标和业务图标分离，便于维护和扩展

安装

# 使用 npm
npm install easy-vue-icon

# 使用 yarn
yarn add easy-vue-icon

# 使用 pnpm
pnpm add easy-vue-icon

快速开始

按需导入

<template>
  <icon-about-us />
  <icon-contact />
  <easy-icon-menu-list />
</template>

<script setup lang="ts">
import { iconAboutUs, iconContact, EasyIconMenuList } from 'easy-vue-icon'
</script>

全局注册

import { createApp } from 'vue'
import { easyIcons } from 'easy-vue-icon'

const app = createApp(App)
app.use(easyIcons)
app.mount('#app')

然后在组件中直接使用：

<template>
  <easy-icon-menu-list />
</template>

组件列表

业务图标

| 组件名 | 文件名 | 描述 | |--------|--------|------| | icon-about-us | aboutUs.ts | 关于我们图标 | | icon-contact | contact.ts | 联系我们图标 | | icon-follow-us | followUs.ts | 关注我们图标 | | icon-help | help.ts | 帮助图标 | | icon-login | login.ts | 登录图标 | | icon-message | message.ts | 消息图标 |

核心图标

| 组件名 | 文件名 | 描述 | |--------|--------|------| | easy-icon-menu-list | list/src/menu.ts | 菜单列表图标 |

API

所有图标组件都支持以下属性：

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | iconClass | string | 'easy-icon' | 图标的 CSS 类名 | | size | string | - | 图标的尺寸（如 '24px'、'2em'） | | color | string | - | 图标的颜色（如 '#ff0000'、'red'） |

使用示例

<template>
  <icon-about-us 
    icon-class="my-icon" 
    size="32px" 
    color="#3b82f6" 
  />
</template>

详细的 API 文档请参考 API.md

类型定义

项目提供完整的 TypeScript 类型支持。

依赖

• Peer Dependencies: vue >= 3.3.0
• Dependencies: @dgfun/ui-kit (workspace 依赖)

构建

# 开发模式
pnpm dev

# 构建
pnpm build

# 类型检查
pnpm type-check

目录结构

packages/easy-vue-icon/
├── src/
│   ├── business/              # 业务图标模块
│   │   ├── aboutUs.ts
│   │   ├── contact.ts
│   │   ├── followUs.ts
│   │   ├── help.ts
│   │   ├── index.ts
│   │   ├── login.ts
│   │   └── message.ts
│   ├── core/                  # 核心图标模块
│   │   ├── list/
│   │   │   ├── src/
│   │   │   │   └── menu.ts
│   │   │   └── index.ts
│   │   └── index.ts
│   └── index.ts               # 项目主入口
├── docs/                      # 文档目录
├── package.json
├── tsconfig.json
└── vite.config.ts

贡献指南

欢迎提交 Issue 和 Pull Request！

许可证

MIT License