How to link to a local SVG file in the Angular app?

Question

I'd like to replace a Clarity framwork icon with my own, using a local SVG file. I prepared a service for that:

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);
  }
}

It works when instead of the <use xlink:href="file://help.svg#caret"> part I put the whole SVG content. However, when I want to link to a local file (like shown in the code) I cannot get the file. I'm using Angular 7. How can I use the local SVG file here?

Answer 1

TypeScript can't load a file like SVG file directly. Assuming you are using the Angular CLI, then you can just piggy back on the raw-loader that is part of the Webpack build process like so below to import the raw string and assign it to your variable.

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);
  }
}

If you aren't using the CLI or Webpack, you can follow these instructions that would apply for SVG files the same way (just substitute the svg in for html). https://medium.com/@sampsonjoliver/importing-html-files-from-typescript-bd1c50909992