Как сделать ссылку на локальный файл SVG в приложении Angular?

Question

Я бы хотел заменить иконку Clarity на свой собственный, используя локальный файл SVG.Я подготовил сервис для этого:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class IconServiceService {

  icons: any = {
    'caret': '<svg viewBox="0 0 100 100"><use xlink:href="file://help.svg#caret"></use></svg>',
  };

  constructor() { }

  public load() {
        window['ClarityIcons'].add(this.icons);
  }
}

Он работает, когда вместо части <use xlink:href="file://help.svg#caret"> я помещаю весь контент SVG.Однако, когда я хочу сделать ссылку на локальный файл (как показано в коде), я не могу получить файл.Я использую Angular 7. Как я могу использовать локальный файл SVG здесь?

Answer 1

TypeScript не может загрузить файл, такой как файл SVG напрямую.Предполагая, что вы используете Angular CLI, вы можете просто добавить обратно raw-loader, который является частью процесса сборки Webpack, как показано ниже, чтобы импортировать необработанную строку и присвоить ее своей переменной.

import * as CaretIcon from 'raw-loader!./path/to/file.svg';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class IconServiceService {

  icons: any = {
    'caret': CaretIcon,
  };

  constructor() { }

  public load() {
        window['ClarityIcons'].add(this.icons);
  }
}

Если вы не используете CLI или Webpack, вы можете следовать этим инструкциям, которые будут применяться к файлам SVG таким же образом (просто замените svg на html).https://medium.com/@sampsonjoliver/importing-html-files-from-typescript-bd1c50909992

Answer 2

Решение сработало для меня

let icons = require('!raw-loader!../../../styles/assets/icons/icons.svg');

https://github.com/angular/angular-cli/issues/3879#issuecomment-358920021

вам может понадобиться declare const require: any;