vue3+vite配置svg

一、基本使用

1、首先安装插件

npm install vite-plugin-svg-icons -D

2、vite.config.ts / vite.config.js引用插件
加入createSvgIconsPlugin配置项即可

import { fileURLToPath, URL } from "node:url"

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import vueDevTools from "vite-plugin-vue-devtools"

import { createSvgIconsPlugin } from "vite-plugin-svg-icons"
import path from "path"

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), "src/assets/svg")],
      symbolId: "icon-[dir]-[name]",
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  server: {
    host: true,
    // port: 3030,
    // 设置反向代理
    proxy: {
      "/api": {
        target: "http://localhost:8080", // 后端API服务器的地址和端口
        changeOrigin: true, // 是否改变源地址
        rewrite: (path) => path.replace(/^\/api/, ""), // 重写路径
      },
    },
  },
})

3、根据上述配置路径添加src/assets/svg存放svg文件即可

4、在main.ts入口文件中引入

// main.ts
import "virtual:svg-icons-register"

5、页面中使用svg

<div>
    <svg>
      <!-- "#icons-" + "svg文件名" -->
      <use xlink:href="#icon-house"></use>
    </svg>
  </div>

二、进阶使用（在基本使用基础上封装svg全局公共组件）

1、svg组件页面

<!-- SvgIcon.vue -->
<template>
  <div>
    <svg :style="{ width: width, height: height }">
      <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
  </div>
</template>

<script setup lang="ts">
defineProps({
  //宽
  width: {
    type: String,
    default: "10px",
  },
  //高
  height: {
    type: String,
    default: "10px",
  },
  //前缀
  prefix: {
    type: String,
    default: "#icon-",
  },
  //svg文件名
  name: String,
  //图标颜色
  color: {
    type: String,
    default: "",
  },
})
</script>

2、封装批量注册全局组件（components下创建index.ts）

import SvgIcon from "@/components/SvgIcon.vue"

import type { App, Component } from "vue"
const components: Component = { SvgIcon }

export default {
  install(app: App) {
    Object.keys(components).forEach((key: string) => {
      app.component(key, components[key]) //遍历挂载组件
    })
  },
}

3、main.ts挂载

import globalComponent from "@/components/index"
app.use(globalComponent)

4、页面无需引用，直接使用全局注册组件

<svg-icon name="glove" width="50px" height="50px"></svg-icon>