Vue3封装svg-icon公共组件

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>