How to import one SVG image into a typeScript/Angular?

user_18237732 0
Viewed 123

I'm new to Angular/TypeScript.

In my project, I used icons and I have to replace the icons with images in SVG format.

I downloaded the image here.

Now, I need to import this SVG image into the typeScript. But, I don't understand what I should do.

dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { Menu } from './types/menu';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
})
export class DashboardComponent implements OnInit {
  showSideBar: boolean = false;

  menus: Menu[] = [
    {
      name: 'Administration',
      iconClass: 'bx bx-lock-alt',
      active: false,
      submenu: [{ name: 'Portfolio', url: '/administration/portfolio' }],
    },
  ];

Do you know how I have to replace 'bx bx-lock-alt', with the SVG?

For information: the SVG image was saved in the following path <img src="assets/images/file.svg.

Here is a reproduction stackblitz.

Thank you very much.

angular typescript svg
2 Answers

Does this answer your question?

import { Component, OnInit } from '@angular/core';
import { Menu } from './types/menu';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
})
export class DashboardComponent implements OnInit {
  showSideBar: boolean = false;

  menus: Menu[] = [
    {
      name: 'Administration',
      iconClass: 'file.svg',
      active: false,
      submenu: [{ name: 'Portfolio', url: '/administration/portfolio' }],
    },
  ];

  ngOnInit() {}

  toggle(index: number) {
    this.menus[index].active = !this.menus[index].active;
  }

  toggleSideBar() {
    this.showSideBar = !this.showSideBar;
  }

  selectMenu(parentMenu: { name: string }): void {
    this.menus.forEach((menu) => {
      if (menu.name !== parentMenu.name) {
        menu.active = false;
      } else {
        menu.active = !menu.active;
      }
    });
  }

  getSvg(menu: Menu) {
    return `assets/images/${menu.iconClass}`;
  }
}

stackblitz

user_59245620

You can use a native CSS solution to solve this problem.

.bx.bx-lock-alt::before {
    content: url(assets/images/file.svg);
}

Stackblitz

user_24354730
Related