@xy-admin/svgicon v1.2.0

🎨 SVG 自动索引插件

自动化扫描 SVG 文件并生成动态导入索引的 Vite 插件，专为高效图标管理而生。

🌟 特性

• 🚀 自动递归扫描 自定义 目录（如：src/assets/svgs）
• 💡 实时监听 SVG 文件变化，动态生成 TypeScript 索引文件
• 📦 按需加载组件
• 🔍 支持自定义查询参数
• 🌐 跨平台路径兼容（Windows/macOS/Linux）
• 🔄 支持热更新
• 🔐 类型安全的导入声明

📂 目录结构

src/
├─ assets/
│  └─ svgs/
│     ├─ system/
│     │  ├─ a-a.svg
│     │  └─ settings.svg
│     ├─ common/
│     │  └─ success.svg
│     └─ index.ts (自动生成)

📝 生成的索引文件

// index.ts
export default {
  'a-a': () => import('./system/dashboard.svg?component'),
  'settings': () => import('./system/settings.svg?component'),
  'success': () => import('./common/success.svg?component')
}

📦 安装

npm install @xy-admin/svgicon -D
# 或
pnpm install @xy-admin/svgicon -D

⚙️ 配置项

🚀 快速开始

1. 配置 vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import svgIcon from '@xy-admin/svgicon'
import { resolve } from 'path'
import svgLoader from 'vite-svg-loader'

export default defineConfig({
  plugins: [
    svgIcon({
      dir: resolve(__dirname, 'src/assets/svgs') // SVG 目录绝对路径
    }),
    svgLoader()
  ]
})

2. 创建 hooks/loadSvg.ts

import { reactive, Component } from 'vue'
import icons from '@/assets/svgs/index'
export default function () {
  const iconComponents = reactive<Record<keyof typeof icons, Component>>({} as any)
  const getIconComponent = (name: keyof typeof icons) => {
    if (!iconComponents[name]) {
      loadIcon(name)
    }
    return iconComponents[name]
  }
  const loadIcon = async (name: keyof typeof icons) => {
    const IconComponent = await icons[name]()
    iconComponents[name] = IconComponent
  }
  return { getIconComponent }
}

3. 页面中使用（动态加载svg）

// 页面使用
<script setup lang="ts">
import loadSvg from './loadSvg'
const { getIconComponent } = loadSvg()
</script>
<template>
  <component :is="getIconComponent('success')" />
</template>

🚨 注意事项

1. dir 必须使用绝对路径，配置时请使用 path.resolve 处理路径

📌 建议

1. 可配合 vite-svg-loader 使用，以实现按需加载 SVG 组件。