如何将一张 SVG 图像导入 typeScript/Angular？

Question

我是 Angular/TypeScript 的新手。

在我的项目中，我使用了图标，我必须用 SVG 格式的图像替换图标。

我在这里下载了图像。

现在，我需要将这个 SVG 图像导入 typeScript。 但是，我不明白我应该做什么。

仪表板.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' }],
    },
  ];

你知道我必须如何用 SVG 替换'bx bx-lock-alt',吗？

有关信息：SVG 图像保存在以下路径<img src="assets/images/file.svg中。

这是一个复制堆栈闪电战。

非常感谢。

Answer 1

这回答了你的问题了吗？

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

堆栈闪电战

Answer 2

您可以使用原生 CSS 解决方案来解决此问题。

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

堆栈闪电战