Почему svg не может отображаться, когда я использую svg-sprite-loader во Vue?

консоль браузера

Я пытаюсь использовать svg-sprite-loader с Vue, но что-то не так. Похоже, что файл svg был загружен в начале <body>, но под тегом <use> ничего нет

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();
   }

xlink: herf кажется опечаткой

— 05.04.2021 16:16

Благодарность! которые тратят меня на три часа ...

— 05.04.2021 17:51

vue.js svg svg-sprite-loader

05.04.2021 16:14

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...