vue3使用svg图片

网上试了好几个文章都显示不出来，宽度总是0没找到原因。终于试成功了一个，原文blog.csdn.net/csl125/arti…

1.npm i -D svg-sprite-loader

2.在src文件下创建 svgIcon 文件夹 文件夹下创建svg存放svg文件，创建index.js index.vue

index.js内容

//下面这个是导入svgIcon/svg下的所有svg文件
const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context("./svg", false, /\.svg$/);
/*
 第一个参数是:'./svg' => 需要检索的目录，
 第二个参数是：false => 是否检索子目录,
 第三个参数是: /\.svg$/ => 匹配文件的正则
*/
requireAll(req);

index.vue内容

   <template>
  <svg :class="svgClass" v-bind="$attrs" :style="{color: color}">
    <use :xlink:href="iconName"/>
  </svg>
</template>
 
<script setup>
 
 
import { defineProps, computed } from "vue";
 
const props = defineProps({
  name: {
      type: String,
      required: true
    },
    color: {
      type: String,
      default: ''
    }
})
 
const iconName = computed(()=>`#icon-${props.name}`);
const svgClass = computed(()=> {
  console.log(props.name, 'props.name');
  if (props.name) {
        return `svg-icon icon-${props.name}`
      }
      return 'svg-icon'
});
 
 
 
 
 
</script>
 
<style lang='scss'>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}
</style>

main.js全局引用

import {
    createApp
} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
 
import "@/svgIcon/index"
import svgIcon from "@/svgIcon/index.vue";
 
 
 
createApp(App).use(store).use(router).use(ElementPlus, {
    size: 'small',
    zIndex: 3000
}).component('svg-icon',svgIcon).mount('#app')

vue.config.js中

const path = require('path')
const resolve = dir => path.join(__dirname, dir)
 
module.exports = {
    chainWebpack: config => {
        // set svg-sprite-loader
        config.module
          .rule('svg')
          .exclude.add(resolve('src/svgIcon/svg'))
          .end();
        config.module
          .rule('icons')
          .test(/\.svg$/)
          .include.add(resolve('src/svgIcon/svg'))
          .end()
          .use('svg-sprite-loader')
          .loader('svg-sprite-loader')
          .options({
            symbolId: 'icon-[name]',
          })
          .end()
      }
  }

组件中使用

//login_name 是svg目录下的svg文件名 
<svg-icon name="login_name" />