为什么我在 Vue 中使用 svg-sprite-loader 时无法显示 svg？

问题描述

browser console

我尝试将 svg-sprite-loader 与 Vue 一起使用，但出了点问题。 似乎在

开头加载了 svg 文件，但 标签下没有任何内容

index.js 和 iconSvg.vue 在 /views/icons/
*.svg 文件位于 /views/icons/svg/

和源文件： index.js

const req = require.context('./svg',false,/\.svg$/);
const requireAll = requireContext => {
  return requireContext.keys().map(requireContext);
}
requireAll(req);

iconSvg.vue

<template>
<div>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:herf="iconName"></use>
    </svg>
  </div>
</template>
<script>
import { computed,reactive } from 'vue';

export default{
  name: "iconSvg",//props: ['iconClass','className'],props: {
    iconClass: {
      type: String,default: "",},className: {
      type: String,default: ""
    }
  },setup(props) {
    
    const iconName = computed(() => `#icon-${props.iconClass}`);
    const svgClass = computed(() => {
      if (props.className)
        return `svg-icon ${props.className}`;
      else
        return `svg-icon`;
    });
    return {
      iconName,svgClass
    };
  },}
</script>

main.js

import { createApp,component } 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 "./views/icons/index.js"
import iconSvg from "./views/icons/iconSvg.vue";
//import VueCompositionApi from '@vue/composition-api'

const app = createApp(App);
app.use(store).use(router).use(ElementPlus).mount('#app');
app.component('icon-svg',iconSvg);

vue.config.js

//a part of the full file
//and i use 'runtimeCompiler: true,' when I start build a component
  chainWebpack: (config) => {
    const svgRule = config.module.rule("svg");
    svgRule.uses.clear();
    svgRule
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',}).end();
   }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）