vue3 引入svg
- 进入阿里图标素材库 选择需要的图标并添加进我的项目
- 打开我的项目 选择symblo 下载到本地
- 解压后删除不必要的东西,只留下 iconfont.js 文件,并放到src\assets\svg文件夹下
- 在main.js中进行全局导入
import '@/assets/svg/iconfont.js'
项目中引入svg-icon
在 src 目录下,创建一个用于存放插件的目录 plugin
index.vue
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconClassName" :fill="color" />
</svg>
</template>
<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps({
iconName: {
type: String,
required: true
},
className: {
type: String,
default: ''
},
color: {
type: String,
default: '#409eff'
}
})
// 图标在 iconfont 中的名字
const iconClassName = computed(() => {
return `#${props.iconName}`
})
// 给图标添加上类名
const svgClass = computed(() => {
if (props.className) {
return `svg-icon ${props.className}`
}
return 'svg-icon'
})
</script>
<style scoped>
.svg-icon {
fill: currentColor;
vertical-align: middle;
}
</style>
index.ts
import { App } from 'vue'
import SvgIcon from './index.vue'
export function setupSvgIcon(app: App) {
app.component('SvgIcon', SvgIcon)
}
在页面中使用