vue3封装使用svg
时间: 2023-09-17 09:12:17 浏览: 52
在Vue3中,我们可以使用`<svg>`标签直接嵌入SVG代码。如果需要在多处使用相同的SVG图标,可以将其封装为组件,方便复用。
以下是一个简单的SVG图标组件封装示例:
```vue
<template>
<svg :width="size" :height="size" viewBox="0 0 24 24">
<path :d="iconPath" />
</svg>
</template>
<script>
export default {
props: {
iconPath: {
type: String,
required: true
},
size: {
type: Number,
default: 24
}
}
}
</script>
```
在父组件中使用该组件时,只需要传入相应的SVG路径即可:
```vue
<template>
<div>
<svg-icon iconPath="/path/to/my/icon.svg" />
</div>
</template>
<script>
import SvgIcon from '@/components/SvgIcon.vue'
export default {
components: {
SvgIcon
}
}
</script>
```
需要注意的是,SVG图标可能存在路径问题,需要根据实际情况进行调整。同时,在使用SVG图标时,也需要注意SVG文件的大小和性能问题。