【vite】vite-vue3下使用使用svg

1.首先先将svg进行整理

将多个svg文件整理成如下格式： 

 

（ps:需要去掉里面的fill，否则使用类名无法进行着色）

每个symbol就是原来的一个svg，用id进行区别，这么整理的目的是减少网络请求。

放在如下目录下：

 2.创建svg引用组件

<template>
  <svg width=100% height="100%" class="svg-symbol">
    <use :xlink:href="iconName"/>
  </svg>
</template>

<script lang="ts">
import {defineComponent, computed} from "vue";
import svgIcon from "../assets/svg/svg-icon.svg";

export default defineComponent({
  props: {
    name: {
      type: String,
      required: true,
    },
  },
  setup(props: any) {
    const iconName = computed(() => `${svgIcon}#${props.name}`);
    return {
      iconName
    }
  }
})


</script>

<style lang='scss'>
@import "./../utils/style/tool.scss";

.svg-symbol {
  transition: all $transition-duration-12 $transition-timing-function;
}
</style>

ps:为啥引用svg文件采取import的形式，是因为如果如下这么写

const iconName = computed(() => `../assets/svg/svg-icon.svg#${props.name}`);

在打包的时候回没有.svg文件，svg会直接在js中 ，而导致引用失败

 3.使用