在vue3.x中使用svg ,在vue-cli4.5.x以上Vue项目中使用svg

在Vue2 vue-cli4.5以下的Vue脚手架中使用svg大家已经很常见了，那么如何在Vue3.x  中使用svg呢

首先安装  svg-sprite-loader

npm i -D svg-sprite-loader

1. 首先 在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>

或者 

<template>
  <svg :class="svgClass" v-bind="$attrs" :style="{ color: color }">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
import { computed } from "@vue/runtime-core";
export default {
  props: {
    name: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    let iconName = computed(() => `#icon-${props.name}`);
    let svgClass = computed(() => {
      console.log(props.name, "props.name");
      if (props.name) {
        return `svg-icon icon-${props.name}`;
      } else {
        return "svg-icon";
      }
    });
    return { iconName, svgClass };
  },
};
</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 中配置chainWebpack

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" />

现在可以正常使用了，使用效果