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中 ,而导致引用失败