vite-plugin-svg-icon-generator

SVG 图标生成器插件，提供自动生成图标组件的功能。

English README

🚀安装

npm install vite-plugin-svg-icon-generator -D

在vite使用

// vite.config.ts
import { defineConfig } from "vite";
import svgIconGenerator from "vite-plugin-svg-icon-generator";
export default defineConfig({
  plugins: [
    svgIconGenerator({
      enter: path.resolve(import.meta.dirname, "src/assets/Icons"), // SVG文件存放目录
      output: path.resolve(import.meta.dirname, "src/components/Icons"), // 输出图标组件目录
    }),
  ],
});

目录结构示例

src/
  assets/
    Icons/
      ├── *.svg

💡配置说明

| 参数 | 说明 | 类型 | 默认值 | | ------ | ---------------- | ------ | ------ | | enter | SVG文件存放目录 | string | 无 | | output | 输出图标组件目录 | string | 无 |

📃特性说明

• 自动生成Vue图标组件：将SVG文件转换为可直接使用的Vue组件
• 支持热重载：在开发模式下，修改SVG文件后会自动重新生成组件并刷新页面
• 自动清理废弃图标：当SVG文件被删除时，对应的组件文件也会被自动删除
• 按需加载组件：每个SVG图标独立生成一个组件，支持按需导入使用

使用示例

在Vue组件中使用

生成的图标组件位于配置的output目录下，可以直接导入使用：

<template>
  <div>
    <SearchIcon />
    <UserIcon class="text-blue-500" />
  </div>
</template>

<script setup>
import SearchIcon from "@/components/Icons/Search.vue";
import UserIcon from "@/components/Icons/User.vue";
</script>

📣注意事项

• SVG文件名将作为组件名，建议使用驼峰命名法
• SVG文件应保持简洁，避免包含过多复杂的样式和脚本
• 生成的组件支持传递标准HTML属性（如class、style、width、height等）
• 如需在TypeScript项目中使用，确保配置了正确的类型声明

🤝贡献指南

欢迎任何形式的贡献！如果你想为这个项目做出贡献，请遵循以下步骤：

1. ** Fork 仓库 **：点击仓库页面右上角的 "Fork" 按钮
2. ** 克隆仓库 **：git clone https://github.com/your-username/vite-plugin-svg-icon-generator.git
3. ** 创建分支 **：git checkout -b feature/your-feature-name
4. ** 进行修改 **：实现你的功能或修复bug
5. ** 提交更改 **：git commit -m 'Add some feature'
6. ** 推送分支 **：git push origin feature/your-feature-name
7. ** 创建 Pull Request **：在 GitHub 页面上提交 PR

请确保你的代码符合项目的代码风格，并添加适当的测试（如果适用）。

📄许可证说明

本项目采用 MIT 许可证 开源。