Как встроить SVG в угловой?

Question

Я пытаюсь загрузить svgs inline с угловым значением 7.

Пока я пытался:

import icon = require('./icon.svg');

приводит к icon.svg из-за загрузчика файлов

import icon = require('raw-loader?!./icon.svg');

приводит к __webpack_public_path__ + "icon.svg";

, что равно:

import * as icon3 from 'raw-loader?!./icon.svg';

и

import icon4 from 'raw-loader?!./icon.svg';

станет неопределенным.

Однако переименование icon.svg во что-то вроде icon.foo, а затем загрузка значка с:

import * as icon from 'raw-loader?!./icon.foo';

и соответствующего типа в typings.d.ts приводит к ожидаемому поведению и переменнойicon содержит вложенный контент.

Для меня это выглядит так, будто загрузчик файлов как-то предшествует загрузчику raw.Изменение node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js для загрузки svgs вроде htmls в правилах также работает.Но это не путь.

Есть идеи?

Answer 1

Поскольку правило уже определено, его необходимо отменить, поставив два !! в начале загрузчика:

import icon = require('!!raw-loader?!./icon.svg');

См .: https://webpack.js.org/loaders/raw-loader/ в самом низу

Осторожно, если вы уже определили загрузчик (и) для расширения (ей) в webpack.config.js, вы должны использовать:

'!! сырым-погрузчик ./ file.css!'; // Добавление !! к запросу отключит все загрузчики, указанные в конфигурации

Answer 2

Я бы предложил вам создать .ts файл

my-svg.ts

export const mySVG = `<svg></svg>`;

Затем вы можете импортировать его как обычно

import {mySVG} from 'path/to/file/my-svg.ts'