1

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?

1 Resposta 1

1

Fiz uma pergunta semelhante há um tempo atrás, e baseado no que encontrei, você pode utilizar o Chokidar informando o diretório, o caractere coringa seguido da extensão.

let watcher = chokidar.watch('assets/svg/*.svg');

observe o evento add sempre que um arquivo SVG for criado, colado ou movido para o diretório assets/svg/ você pode executar uma ação:

watcher.on('add', (path, stats) => {
    icons.push(path);
});

Veja funcionando

Código do exemplo acima:

const chokidar = require('chokidar');
let icons = [];
let watcher = chokidar.watch('assets/svg/*.svg');
watcher.on('add', (path, stats) => {
    icons.push(path);
    show();
});
const show = _ => console.log(JSON.stringify(icons, null, 2));
1
  • 1
    excelente! se desse pra dar mais de 1 ponto eu dava! fantástico Commented 22/06/2018 às 18:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .