VUE3 加载自定义SVG文件的详细步骤

npm install svg-sprite-loader -D 

const path = require('path');
module.exports = {
  chainWebpack: config => {
    // SVG 规则排除 icons 目录
    config.module.rule('svg')
      .exclude.add(path.resolve('src/assets/icons'))
    // 添加 icons 目录的 SVG loader
    config.module.rule('icons')
      .test(/\.svg$/)
      .include.add(path.resolve('src/assets/icons')).end()
      .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({ symbolId: 'icon-[name]' })
  }
};

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
</svg>

import { createApp } from 'vue';
import App from './App.vue';
// 导入 SVG 图标
const req = require.context('./assets/icons', false, /\.svg$/);
const requireAll = context => context.keys().map(context);
requireAll(req);
createApp(App).mount('#app');

<template>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-example" rel="external nofollow" ></use>
  </svg>
</template>