Как импортировать наименования и иконки svg в html-шаблон из файла ts

Question

В Angular-приложении есть файл ts, в которым находится объект с ключами: название иконки и значением: сама иконка svg в виде строчки. Как отобразить полный список наименований и иконок в html-шаблоне.

Получается отобразить только 1 иконку svg через innerHtml.

/* basic_icons.ts */

export const BASIC_ICONS = {
    "accordion_down": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 8 8\" width=\"8\"><path d=\"M7 2H1l3 3z\"/></svg>\r",
    "accordion_up": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 8 8\" width=\"8\"><path d=\"M7 5H1l3-3z\"/></svg>\r",
    "add-16": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"><path d=\"M16 6.9H9v-7H7v7H0v2h7v7h2v-7h7z\"/></svg>",
    "add-small-16": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"><path d=\"M13 6.9H9v-4H7v4H3v2h4v4h2v-4h4z\"/></svg>",
    "arrow_down": "<svg width=\"16\" height=\"16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13 9.7H3l5-5.1z\"/></svg>",
    "arrow_left": "<svg width=\"16\" height=\"16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.7 3v10L4.6 8z\"/></svg>",
    "arrow_right": "<svg width=\"16\" height=\"16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 13V3l5.1 5z\"/></svg>",
    "arrow_up": "<svg width=\"16\" height=\"16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3 6.3h10l-5 5.1z\"/></svg>",
    "arrow-down-16": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"><path d=\"M14.3 9.7l-1.2-1.2L9 12.7V0H7v12.7L2.9 8.5 1.7 9.7 8 16z\"/></svg>",
    "bell-24": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"><path d=\"M12 3c3.3 0 6 2.7 6 6v5l1.6 3.9H4.5L6 14.1V9c0-3.3 2.7-6 6-6zm0 18c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2z\" class=\"st0\"/></svg>",
    "call_dialpad": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"><path d=\"M12 4c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m6-8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2M6 16c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2\"/></svg>",
    "call_end": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"-1 -7 24 24\"><path d=\"M21.368 4.081A15.152 15.152 0 0 0 11 0 15.115 15.115 0 0 0 .633 4.081L0 4.706 3.338 8 6.94 5.538 6.93 2.38A13.473 13.473 0 0 1 11 1.747c1.42 0 2.787.217 4.07.633l-.008 3.158L18.664 8 22 4.706c0-.01-.476-.47-.632-.625\"/></svg>"
    }

*/

import { Component, OnInit } from '@angular/core';
import { SafeHtml } from '@angular/platform-browser';
import { IconService } from 'src/app/icon.service';
import { BASIC_ICONS } from './basic_icons';



@Component({
  selector: 'app-icon',
  templateUrl: './icon.component.html',
  styleUrls: ['./icon.component.scss']
})
export class IconComponent {

  icons = BASIC_ICONS
   
  textColor: string;
  searchStr = '';

 html: SafeHtml;


  constructor(private iconService: IconService) {
  this.html = this.icons.accordion_down
}  
}

/* icon.component.html */

<b [innerHtml]="html | safeHtml" class="iconItem"></b>

}

БЛОГ НА HUSL

Как импортировать наименования и иконки svg в html-шаблон из файла ts

Ответы (0 шт):