vite-plugin-svg-icons 插件解决svg展示

vite-plugin-svg-icons 是一个 Vite 插件，用于将本地 SVG 文件转换为可直接在 Vue 组件中使用的图标。这个插件能够自动扫描指定目录下的 SVG 文件，并将其注册为 Vue 组件，从而简化了在 Vue 项目中使用 SVG 图标的过程。

1. 安装插件

首先，你需要在项目中安装 vite-plugin-svg-icons 以及相关依赖。

npm install vite-plugin-svg-icons --save-dev

或者使用 pnpm：

pnpm add vite-plugin-svg-icons --dev

2. 配置插件

在 vite.config.ts 或 vite.config.js 文件中配置插件。你需要指定一个目录，该目录包含你所有的 SVG 文件。

Vite 配置示例（vite.config.ts）

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path';

export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      // 配置SVG图标插件
      createSvgIconsPlugin({
        // 指定SVG图标目录
        iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]'
        }),
        ],
      });

在入口文件中注册

// 引入SVG图标注册脚本
import 'virtual:svg-icons-register'
// 引入自定义SVG组件
import SvgIcon from '@/components/SvgIcon/index.vue'
const app = createApp(App)
// 全局注册SVG图标组件
app.component('SvgIcon', SvgIcon)

创建SVG图标组件

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

interface Props {
  name: string;
  className?: string;
}

const props = withDefaults(defineProps<Props>(), {
  className: ''
})

// 生成图标名称，与vite.config.ts中的symbolId配置对应
const iconName = computed(() => `#icon-${props.name}`)
const svgClass = computed(() => {
  if (props.className) {
    return `svg-icon ${props.className}`
  }
  return 'svg-icon'
})
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

在组件中使用

<template>
  <div>
    <!-- 使用图标 -->
    <svg-icon name="ui_add" />
    
    <!-- 带样式的图标 -->
    <svg-icon name="ui_delete" className="custom-icon" />
    
    <!-- 设置尺寸和颜色 -->
    <svg-icon name="ui_edit" style="font-size: 24px; color: red;" />
  </div>
</template>

使用技巧

动态图标：可以根据数据动态显示图标

<svg-icon :name="item.meta.icon" />

自定义大小：由于使用了 em 单位，可以通过 font-size 控制图标大小

<svg-icon name="ui_add" style="font-size: 20px;" />

颜色继承：图标默认继承父元素颜色，也可以单独设置

<svg-icon name="ui_add" style="color: #1890ff;" />

这些步骤完成后，您就能在项目中轻松使用SVG图标，而无需每次都手动导入SVG文件