在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

结构如下：

image.png

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 使用语法糖格式

或者

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文件名 

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

image.png

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