vue3.x使用SvgIcon

安装插件

1.在vue3.x中安装createSvgIconsPlugin插件
2.在vite.config.ts中使用
// 2.1引用
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// 2.2 使用插件
export default defineConfig(({ command }) => {
  const prodMock = true
  return {
   plugins: [
      vue(),
      // 把src/icons 下的所有svg 自动加载到body下，供组件使用
      createSvgIconsPlugin({
        // 绑定需要存放的图标文件夹
        iconDirs: [resolve(process.cwd(), 'src/icons')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]',
      }),
  }
})

[注意：插件绑定了放置icon的文件路径]

创建svg组件

在components文件夹下面创建svgIcon文件夹，里面包含SvgIcon.vue和index.ts

// SvgIcon.vue
<template>
  <svg aria-hidden="true" :class="svgClass">
    <use :href="symbolId" :fill="color" />
  </svg>
</template>

<script lang="ts" name="SvgIcon" setup>
import { computed } from 'vue'

const props = defineProps({
  prefix: {
    type: String,
    default: 'icon',
  },
  name: {
    type: String,
    required: true,
  },
  color: {
    type: String,
    default: '',
  },
  className: {
    type: String,
    default: '',
  },
})
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
const svgClass = computed(() => {
  if (props.className) {
    return `svg-icon ${props.className}`
  }
  return 'svg-icon'
})
</script>
<style scoped>
.svg-icon {
  width: 40px;
  height: 40px;
}
</style>

// index.ts

import type { App } from 'vue'
import SvgIcon from './SvgIcon.vue'

import 'virtual:svg-icons-register'

const svgIconPlugin = {
  install(app: App): void {
    // 全局挂载
    app.component('svg-icon', SvgIcon)
  },
}

export default svgIconPlugin

全局注册

// svg封装插件
import svgIcon from '@/components/svgIcon'
const app = createApp(App)
app.use(router).use(pinia).use(ElementPlus).use(svgIcon)

在页面使用

 <svg-icon name="user" color="#fff"></svg-icon>
 
 // name="user"中的user是下载来的svg图