Olá, estou criando um projeto em Angular2 + Webpack e nesse projeto eu uso como biblioteca de design o @angular/material
. Para que eu possa criar meus próprios ícones, usando SVG, eu estou extendendo o componente MatIcon
como diz na documentação, e estou salvando meus SVG em um diretório acessível da aplicação. A estrutura do projeto está dessa forma:
- src
| - app
| my-icon.component.ts
| - assets
| - svg
| - facebook.svg
| - google.svg
| - twitter.svg
Meu componente está da seguinte forma:
import { Component, Input } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import { MatIconRegistry } from "@angular/material";
export const icons = ["google", "facebook", "twitter"];
@Component({
selector: "my-icon",
template: `<mat-icon [svgIcon]="icon"></mat-icon>`
})
export class MyIcon {
@Input() icon: string;
constructor(i: MatIconRegistry, s: DomSanitizer) {
for (let icon of icons)
i.addSvgIcon(icon, s.bypassSecurityTrustResourceUrl(`assets/svg/${icon}.svg`));
}
}
Meu problema é que toda vez que crio um novo SVG que seria um icon eu sou obrigado a vir no meu componente e atualizar minha constante icons
com o nome do SVG.
Existe alguma forma de eu conseguir ler todos os arquivos da pasta "assets/svg" e já inserir na minha minha constante? Eu até vi que é possível fazer usando o fs do NodeJS como pode ser visto nesse link mas quando tento acessar o fs de dentro do meu componente, não retorno nenhuma informação.
Como resolver?