Как включить SVG с Webpack

Question

Я включаю свой svg, используя

<div ng-include="'src/assets/arrowdown.svg'"></div>

Это работает правильно при использовании npm run dev с этим:

webpack-dev-server --https --host 0.0.0.0

Но когда я использую сборку, svg был включениспользование ng-include не обрабатывается.

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

background: url(//assets.mysite.com/build/4341cb2ee439f765105fb3258df4048c.svg) 50% no-repeat

При использовании ng-include окончательная сборка выглядит следующим образом:

GET https://assets.mysite.com/src/assets/img/arrowdown.svg 404 (Not Found)

Таким образом, svg не читается загрузчиком

Что я должен сделать, чтобы webpack обнаружил ng-includeи извлечь svg в ресурсы?

Спасибо

Использование angularjs 1.5.5 с веб-пакетом 1.13.2.

Answer 1

Попробовав другой метод, я наконец-то получил что-то, что работает.

Просто поместите это здесь на тот случай, если у кого-то нет лучшей идеи.

Я создал простой сервис, содержащий встроенный svg.

Загрузка ресурса, подобного этому:

<span ng-include="loadSvgResource('count')"></span>

В контроллере:

this.loadSvgResource = function(d) {
    return svgResourceService[d];
};

Служба содержит встроенный svg:

this.count= "data:image/svg+xml,...";

Это немного, но это честная работа, которая работает с моими текущими ограничениями.