1、src/components创建SvgIcon文件夹
2、SvgIcon下创建index.vue ==> 公共组件
index.vue
<template>
<svg class="svg-icon" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>
</template>
<script setup>
import { defineProps, computed } from 'vue'
// 在子组件中通过defineProps API来进行接受
const props = defineProps({
icon: {
type: String,
required: true
}
})
const iconName = computed(() => {
return `#icon-${props.icon}`
})
</script>
<style lang="scss" scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
3、src下创建icons文件夹
4、icons下创建svg文件夹(放svg)和index.js配置文件
index.js
import SvgIcon from '@/components/SvgIcon'
const svgRequired = require.context('./svg', false, /\.svg$/)
svgRequired.keys().forEach((item) => svgRequired(item))
// 创建全局组件
export default (app) => {
app.component('svg-icon', SvgIcon)
}
5、main.js中引入
import SvgIcon from '@/icons'
const app = createApp(App)
SvgIcon(app)
createApp(App).use(store).use(router).mount('#app')
6、使用
<svg-icon icon="password" class="svg-container"></svg-icon>