记录一下vue3中如何使用svg图标，vue2中大家常用iconfont字体图标，现在vue3大家都又推荐svg的方式使用图表，包括elementplus组件库也变成使用svg方式引用图标。
1、创建svg组件 components/IconSvg.vue
<template>
<svg class="symbol-icon-svg" aria-hidden="true">
<use :xlink:href="iconSvg"></use>
</svg>
</template>
<!-- 选项式 -->
<!-- <script>
export default {
name: "IconSvg",
props: {
svgName: {
type: String,
required: true,
}
},
computed: {
iconSvg() {
return `#${this.svgName}`
}
}
}
</script> -->
<!-- 组合式 -->
<script setup>
import { defineProps, computed } from "vue";
const props = defineProps({
svgName: {
type: String,
required: true,
}
})
const iconSvg = computed(() => `#${props.svgName}`)
</script>
<style scoped>
.symbol-icon-svg {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
2、去阿里iconfont下载图标
拷贝下载的iconfont.js文件放到项目中
3、在main.js中全局使用
// 全局使用svg组件 iconfont svg
import "./assets/iconfont/iconfont.js"
import IconSvg from "@/components/IconSvg/IconSvg.vue";
const app = createApp(App)
app.component("IconSvg", IconSvg);
app.mount('#app')4、在组件中使用
<template>
<div>
<IconSvg class="iconf" svg-name="wh-a-tiaochawenjuan1Copy1" ref="elsvg" />
</div>
</template>效果
