Au 10 - Front-end - React - Trabalhando com icones - Mestres BEGIN

Neste artigo, vamos explorar como utilizar ícones SVG em aplicações React, focando na componentização e reutilização desses elementos visuais.

O Poder dos Ícones SVG

SVG (Scalable Vector Graphics) é um formato baseado em XML para gráficos vetoriais bidimensionais. Diferente de imagens rasterizadas (como JPEG ou PNG), os SVGs mantêm sua qualidade em qualquer tamanho.

Principais vantagens:

• Escalabilidade infinita: Redimensionamento sem perda de qualidade
• Tamanho reduzido: Ideal para performance web
• Editabilidade: Manipulação via CSS e JavaScript
• Acessibilidade: Melhor suporte para leitores de tela

Estruturando Ícones como Componentes

No React, podemos transformar SVGs em componentes reutilizáveis, o que oferece:

• Centralização do código SVG
• Parametrização (tamanho, cor, etc.)
• Melhor organização e manutenção

Sugerimos criar uma pasta icons dentro de components para armazenar todos os ícones.

Componentizando um Ícone SVG

Exemplo de transformação de SVG em componente parametrizável:

1interface IconProps { width?: number; height?: number; }
2const PlusIcon = ({ width = 20, height = 20 }: IconProps) => {
3 return ( <svg width={width} height={height} viewBox="0 0 24 24">
4 <path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/> </svg> ); };
5export default PlusIcon;

Este padrão permite:

• Valores padrão para tamanho
• Proporção original via viewBox
• Cor herdada do contexto com currentColor

Integrando Ícones em Componentes Existentes

Exemplo de uso em um botão:

1interface ButtonProps {
2 text: string;
3 icon?: React.ReactNode;
4 }
5const Button = ({ text, icon }: ButtonProps) => {
6 return ( <button> {icon && <span>{icon}</span>} {text} </button> ); };

Vantagens:

• Ícones opcionais
• Flexibilidade no posicionamento
• Manutenção simplificada

Boas Práticas com SVG no React

• Otimize SVGs: Use ferramentas como SVGO
• Prefira componentes: Para maior controle
• Padronize nomes: Mantenha consistência
• Documente props: Especialmente para ícones complexos

Alinhamento e Estilização

Para alinhamento perfeito entre ícones e texto:

1.button {
2 display: flex;
3 align-items: center;
4 gap: 8px;
5 /* espaçamento entre ícone e texto */ }

Padronizando Tipagens

Crie um arquivo centralizado para tipagem:

1// src/@types/svg-props.ts 
2 export interface SvgProps {
3 width?: number;
4 height?: number;
5 color?: string;
6 className?: string;
7 }

Considerações Finais

Benefícios da abordagem:

• Performance: SVGs são leves
• Customização: Controle dinâmico de atributos
• Manutenibilidade: Atualizações centralizadas

Para projetos complexos:

• Considere bibliotecas como react-icons
• Implemente testes de acessibilidade
• Avalie a necessidade de lazy loading