Использовать SVG из node_modules - PullRequest
Новая
       30

Использовать SVG из node_modules

1 голос
/ 29 мая 2020

Я создал node_module со всеми файлами svg, чтобы модулировать нашу архитектуру.

Он отлично работает, когда я вызываю его, используя: 

<q-icon>
  <svg>
    <use xlink:href="~svgmodule/svgs/icons.svg#addicon"></use>
  </svg>
</q-icon>

Однако, когда я делаю вот так: 

<q-icon>
  <svg>
    <use :xlink:href="'~svgmodule/svgs/icons.svg#' + iconParameter"></use>
  </svg>
</q-icon>

И iconParameter определяется ниже как: 

iconParameter: 'addicon'

Это ошибка, которую я получаю: 

vue.runtime.esm.js?0594:6757 GET http://localhost:8080/~svgmodule/svgs/icons.svg net::ERR_ABORTED 404 (Not Found)

Я тоже пробовал это, и это работает: 

<use xlink:href="../../../../../../../../node_modules/svgmodule/svgs/icons.svg#addicon"></use>

А вот этого нет: 

<use :xlink:href="'../../../../../../../../node_modules/svgmodule/svgs/icons.svg#' + iconParameter"></use>

Ни 

<use :xlink:href="'../../../../../../../../node_modules/svgmodule/svgs/icons.svg#addicon'"></use>

Помогите !!

1 Ответ

2 голосов
/ 29 мая 2020

vue-loader не преобразует выражения в запросы модуля webpack.

Вы должны вручную вызывать require. Это то, что vue-loader делает внутри . 

<q-icon>
  <svg>
    <use :xlink:href="require('~svgmodule/svgs/icons.svg') + '#' + iconParameter"></use>
  </svg>
</q-icon>
...