vue3如何使用svg图片

1、下载loader

npm install --save-dev svg-sprite-loader，svgo，svgo-loader

2、在vue.config.js中配置

const path = require('path')
module.exports = {
    lintOnSave:false, //关闭语法检查
    chainWebpack: config => {
        // 给svg规则增加⼀个排除选项
        config.module
          .rule('svg')
          .exclude.add(path.resolve(__dirname, './src/icons/svg'))
    
        // 新增icons规则，设置svg-sprite-loader处理icons⽬录中的svg
        config.module
          .rule('icons')
          .test(/\.svg$/)
          .include.add(path.resolve(__dirname, './src/icons/svg'))
          .end()
          .use('svg-sprite-loader')
          .loader('svg-sprite-loader')
          .options({ symbolId: 'icon-[name]' })
          .end()
          .use('svgo-loader')
          .loader('svgo-loader')
      }
}

2、在src/components下建立SvgIcon/index.vue；
在src下建立icons文件夹，以及index.js文件，svg文件夹下放svg图片

3、各文件内容如下：

src/components/SvgIcon/index.vue：

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

<script>
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.18em;
  fill: currentColor;
  overflow: hidden;
}
</style>

src/icons/index.js:

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

//vue2中
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg组件
// 注册为全局组件
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

main.js:

//vue3中
import { createApp } from 'vue'
import App from './App.vue'
// svg组件
import './icons'
import SvgIcon from '@/components/SvgIcon'

const app = createApp(App)
app.component('svg-icon', SvgIcon) //注册svg组件
app.mount('#app')

//vue2中
import './icons'

页面中使用：

<svg-icon icon-class="此处为svg图片的名字"></svg-icon>

标签：icons,svg,loader,vue3,import,icon,SvgIcon,图片
来源： https://blog.csdn.net/weixin_46032200/article/details/122682991