vite中加载使用svg

使用vite-plugin-svg-icons插件

安装 (yarn or npm)

这里使用的是1.0.5版本

yarn add vite-plugin-svg-icons -D
or
npm i vite-plugin-svg-icons -D

添加配置

在vite.config.js中配置插件

import viteSvgIcons from 'vite-plugin-svg-icons';
import path from 'path';

export default () => {
  return {
    plugins: [
      viteSvgIcons({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/icons')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  };
};

在 src/main.ts 内引入注册脚本

import 'virtual:svg-icons-register';

创建svg组件

创建文件夹/src/icons/SvgIcon.vue

<template>
    <svg :class="svgClass" v-bind="$attrs" :style="{ color: color }">
        <use :xlink:href="iconName"></use>
    </svg>
</template>

<script setup lang="ts">
    import { computed, defineProps } from 'vue'
    const props = defineProps({
        name: {
            type: String,
            required: true
        },
        color: {
            type: String,
            default: ''
        }
    })
    const iconName = computed(() => `#icon-${ props.name }`)
    const svgClass = computed(() => {
        if(props.name) return `svg-icon icon-${ props.name }`
        return 'svg-icon'
    })
</script>

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

全局导入

在mian.js中引入

import SvgIcon from "./icons/SvgIcon.vue";

const app = createApp(App)
app.component("Svg-icon",SvgIcon)

页面中使用

name这是svg图片的名字

<SvgIcon name="icon1"></SvgIcon>

在2版本之后引入方法

package.json

    "fast-glob": "^3.2.12",
    "vite-plugin-svg-icons": "^2.0.1"

vite.config

import {createSvgIconsPlugin} from 'vite-plugin-svg-icons';
import path from 'path';





 // ↓插件配置
    plugins: [
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]',
      }),
      vue(),
    ],