Как встроить svgs в angular?

#angular #angular-cli

Вопрос:

Я пытаюсь загрузить svgs встроенным с angular 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 приводит к ожидаемому поведению, а значок переменной содержит встроенное содержимое.

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

Есть идеи?

Ответ №1:

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

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

ДОПОЛНЕНИЕ 2021

это должно работать без require … не забывайте о typings.d.ts

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

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

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

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

1. несмотря на информацию, приведенную на странице github с загрузчиком raw, это не работает с последней версией raw-loader (2.0.0) и Angular CLI. это приводит к ошибке компиляции.

2. @KimGentes но работает ли angular cli с raw-загрузчиком 2.0.0 в целом?

3. Это именно тот вопрос, который я пытаюсь определить. Я не нашел никого, кто использовал новый raw-загрузчик с последней версией Angular CLI. Я хотел бы услышать, работает ли это у кого-нибудь, потому что я хотел бы знать, как они теперь ссылаются на пакет raw-loader для загрузки своих файлов данных.

4. @KimGentes, «выше» ( const logo = require('!!raw-loader?!../assets/logo.svg') as string; ) работает для меня в Angular 7 CLI. В Angular 8 CLI у меня нет ошибок компиляции, но результатом является модуль. Итак, работает следующее: const logo = require('!!raw-loader?!../assets/logo.svg').default as string; .

5. А еще лучше, это работает в Angular 8 CLI: import logo from '!!raw-loader!../assets/logo.svg';

Ответ №2:

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

my-svg.ts

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

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

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