Динамическая SVG Xlink: href не разыскивая иконки в браузере

Question

У меня есть структура вкладок в отдельном файловом компоненте Vue, где значки загружаются с использованием svg sprite и динамической переменной внутри компонента use.

<svg class="w-4 h-4 fill-current text-blue-500 mb-2 mx-auto">
<use class="h-4 w-4" :xlink:href="`@/assets/ui-icons.svg#${tab.name}`"></use>
</svg>

Результат отображается пустым в Chrome и Safari. SVG не обрабатывается, даже если инструменты DEV показывают скомпилированный код в точности так, как он должен быть.

Answer 1

Предполагается, что вы используете Webpack:

@/assets/ui-icons.svg - это относительный URI, который предположительно обрабатывается resolve-url-loader для преобразования в истинный URI файла SVG при переносе вашего веб-сайта. Однако resolve-url-loader выполняется только во время переноса, и здесь у вас есть этот URI внутри привязки Vue (:xlink:href), который изменяется во время выполнения, и поэтому resolve-url-loader не может это исправить. Попробуйте сделать это вместо этого:

<svg class="w-4 h-4 fill-current text-blue-500 mb-2 mx-auto">
  <use class="h-4 w-4" :xlink:href="require('@/assets/ui-icons.svg') + `#${tab.name}`"></use>
</svg>

Вызов require() вызовет resolve-url-loader и разрешит ваш SVG-файл, а остальные будут ссылаться на конкретный элемент в этом SVG-файле, на который вы хотите сослаться. Если для SVG указаны другие загрузчики, вам потребуется их переопределить, например:

require('!resolve-url-loader!@/assets/ui-icons.svg')