Is there a way to import a svg file directly into angular 14+ component?

509 Views Asked by At

I'm trying to plot a map graph with apache echarts (https://echarts.apache.org/examples/en/editor.html?c=geo-seatmap-flight) in angular component but I can't find the right way to import my .svg file located in the assets/images/light-seats.svg directory directly into the component in order to initialize the "echarts.reisterMap" function.

import { Component, OnInit } from '@angular/core';
import { EChartsOption } from 'echarts';
import * as echarts from 'echarts';

// here is the error
import * as flight from 'src/assets/images/flight-seats.svg';

@Component({
  selector: 'app-clinic-file',
  templateUrl: './clinic-file.component.html',
  styleUrls: ['./clinic-file.component.sass']
})
export class ClinicFileComponent implements OnInit {

  takenSeatNames = ['26E', '26D', '26C', '25D', '23C', '21A', '20F'];

  option: EChartsOption = {...};
  
  makeTakenRegions(takenSeatNames: string[]) {...};

  constructor(
  ) { 
  }

  ngOnInit(): void {
    this.mapFunction();
  }

  mapFunction() {
    echarts.registerMap('flight-seats', { svg: flight });
  }
}

my html looks like this:

<mat-card>
    <mat-card-content>
        <mat-card-title>Graph</mat-card-title>
        <mat-card-subtitle>Example echarts</mat-card-subtitle>
        <div echarts [options]="option">
        </div>
        </mat-card-content>
 </mat-card>

note: additionally i am using ngx-echarts (https://www.npmjs.com/package/ngx-echarts)

I tried to import directly the svg file using "import * as flight from 'src/assets/images/flight-seats.svg';" but the interpreter shows an error like: Cannot find module "src/assets/images/flight-seats.svg" and its corresponding type declarations.ts(2307)

0

There are 0 best solutions below