SVG como template em Componentes Dinâmicos (Angular)
Nesse artigos vou mostrar uma alternativa de utilizar ícones do tipo SVG em um projeto Angular. Foi uma alternativa que encontrei pra tentar minimizar um problema recorrente quando se utiliza SVG em projetos Angular: “Error retrieving icon…”!
Esse problema pode ter causas variadas, dependendo do caso, porém parece ser algo recorrente em projetos grandes que utilizam Angular. Não encontrei uma explicação convincente de o porque ele acontece nem tão pouco uma solução definitiva pra esse erro. Caso você que esta lendo esse artigo tenha alguma informação ou experiência sobre o assunto, compartilhe com a gente nos comentários =D
Pra não perdermos muito tempo, deixei preparado um projeto pra usarmos como base nesse artigo no link abaixo:
https://github.com/dev-mauricioAB/svg-templates.
Branches:
- main - projeto base, ainda sem a implementação, para você seguir os passos abaixo.
- svg-templates-adicionados - projeto já finalizado, após seguir os passos abaixo.
Passo 1 - Editar o componente SvgComponent
Conforme nos mostra a documentação (https://angular.io/guide/dynamic-component-loader) precisamos fazer algumas implementações para utilizar o conceito de carregamento dinâmico dos componentes.
1.1 Criar service, que será responsável por instanciar os ícones. Note que por enquanto estamos retornando um array vazio, mas nos próximos passos iremos adicionar nossos ícones nesse retorno.
1.2 Criar a classe SvgIcon.
1.3 Criar diretiva que auxiliará na seleção do conteúdo que deve ser carregado pelo nosso componente base. Lembrando que é preciso adicionar a diretiva no módulo do componente SvgComponent, no arquivo svg.module.ts para que essa fique disponível no contexto que estamos trabalhando.
1.4 Adicionar lógica, no arquivo svg.component.ts, para carregar os itens dinamicamente.
Basicamente, temos nesse componente um input chamado svgIconName, que é um string. Através do valor passado para essa variável (‘svg_labs’, por exemplo) nosso service será chamado e irá procurar nos nossos componentes um ícone cujo nome seja igual ao passado ao input.
Caso o ícone seja encontrado, o seu conteúdo será adicionado à tag ‘ng-template’, e será exibido em tela.
Passo 2 - Criar componente com Svg como template
Iremos criar um componente chamado ‘labs’, que terá o conteúdo do nosso ícone em seu template.
ng g c components/svg/labsObserve que há na pasta assets alguns ícones do tipo svg.
2.1 Abra o arquivo labs.svg e copie todo seu conteúdo.
2.2 Agora cole esse conteúdo no arquivo .html que acabamos de criar (labs.component.html)
2.3 Precisamos modificar a extensão do arquivo .html para .svg (labs.component.svg).
2.4 Agora precisamos mudar a extensão da referencia na propriedade templateUrl no arquivo labs.component.ts.
2.5 No arquivo svg.module.ts iremos importar a referencia ao novo componente (LabsComponent), na propriedade declarations.
2.6 Por fim, precisamos adicionar no service a instância desse novo ícone.
Passo 3 - Utilizando o ícone Svg como template
Agora basta adicionar no nosso componente Home, no arquivo .html, o nosso ícone. Para isso utilizaremos o selector ‘app-svg’ e passaremos no input ‘svgIconName’ a string ‘svg_labs’, que foi o nome que damos ao nosso ícone (Passo 2 - 2.6 (linha 14))
O resultado final deve estar como a imagem abaixo.
Ufa! Isso foi de dar um nó na cabeça, não foi!!?? Importante agora é você revisar cada etapa, fazer anotações, conferir na documentação e procurar entender como as coisas estão funcionando no exemplo que ensinei nesse artigo. E modifique caso tenha uma ideia diferente, mude o que acha que pode mudar e busque sempre aperfeiçoar os exemplos que vimos. ;)
Há outros ícones svg na pasta assets. Então crie novos componentes e utilize o pratique o conceito de svg como template. Bons estudos!! =D
