vue3+vite+js配置svg

1、安装插件

npm add fast-glob -D    //glob 工具库   一个传入的作用
npm install vite-plugin-svg-icons -D   

2、配置 vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
export default defineConfig(({ mode }) => {
  return {
    plugins: [
      vue(),
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/svgIcon/svg')], //指定需要转换的图标文件    夹
        symbolId: 'icon-[name]',
      }),
    ]
  }
})

3、创建svg文件夹和.vue文件

 4、svgicon.vue组件

<template>
  <div>
    <svg :class="svgClass" aria-hidden="true">
      <use :xlink:href="iconName" />
    </svg>
  </div>
</template>
<script setup>
import { computed } from 'vue';
const props = defineProps({
  dataIconName: {
    type: String,
    required: true,
  },
  className: {
    type: String,
    default: '',
  },
});
// 图标在 iconfont 中的名字
const iconName = computed(() => {
  return `#icon-${props.dataIconName}`;
});
// 给图标添加上类名
const svgClass = computed(() => {
  if (props.className) {
    return `svg-icon ${props.className}`;
  } else {
    return 'svg-icon';
  }
});
</script>
<style scoped>
.svg-icon {
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

5、/main.js引入脚本
 

import { createApp } from 'vue';
import App from './App.vue';
import SvgIcons from './common/Svgicon.vue';
const app = createApp(App);
app.component('SvgIcon', SvgIcons);
app.mount('#app');

6、需要引入svg的vue组件

<SvgIcon dataIconName="headerlogo" className="logoheader" />