vue使用svg(svg-sprite-loader)

1. 安装 svg-sprite-loader

npm i svg-sprite-loader

2.新建@/components/SvgIcon/index.vue

<template>
  <svg :class="svgClass" aria-hidden="true" @click="svgClick">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script setup lang="ts">
import {computed} from "vue";

const emit = defineEmits(['click'])

const props = defineProps({
  iconClass: {
    type: String,
    require: true
  },
  className: {
    type: String,
    default: ""
  }
})

const iconName = computed(() => `#icon-${props.iconClass}`)
const svgClass = computed(() => props.className === "" ? "svg-icon" : `svg-icon ${props.className}`)

const svgClick = () => {
  emit('click')
}

</script>

<style scoped>
.svg-icon {
  width: 12px;
  height: 12px;
  /*vertical-align: -1.8px;*/
  fill: currentColor;
  overflow: hidden;
}
</style>

3. 新建 @/assets/icons/svg 文件夹下 放svg 图片资源
4. 新建 @/assets/icons/index.ts

import SvgIcon from "@/components/SvgIcon/index.vue"
import {App} from 'vue'

const requireAll = (requireContext: any) => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

export default (app: App): void => {
    app.component("svg-icon", SvgIcon)
}

5. 在main.ts中注册组件

import initSvgIcons from "@/assets/icons"
const app = createApp(App)
initSvgIcons(app)

6. vue.config.js 配置

const path = require('path')

const resolve = dir => {
  return path.join(__dirname, dir)
}

const svgConfig = config => {
  config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/icons'))
      .end()
  config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
}

module.exports = defineConfig({
  、、、
  chainWebpack: config => {
    // 自定义svg配置
    svgConfig(config)

    // 显示的开启Props解构默认值
    config.module
        .rule('vue')
        .use('vue-loader')
        .tap((options) => {
          return {
            ...options,
            reactivityTransform: true
          }
        })
  },

})

7.使用 如：Login.vue中

<template>
   <svg-icon icon-class="login-user"></svg-icon>
</template>
<script setup lang="ts">
import {ref, computed, onMounted} from "vue";
</script>