Visão Geral do React-SVG

O React-SVG é uma biblioteca especializada em carregar e renderizar arquivos SVG dentro de aplicações React. Ela oferece uma interface simplificada para intergar SVGs diretamente nos componentes, facilitando a manipulação de recursos vetoriais. Esta solução permite o carregamento assíncrono de SVGs e possibilita ajustes personalizados nas propriedades e estilos dos elementos injetados.

Instalação e Configuração Inicial

Para adicionar o pacote ao projeto, utilize um gerenciador de dependências como npm ou yarn. Execute o comando apropriado no terminal:

npm install @tanem/react-svg

Ou, alternativamente:

yarn add @tanem/react-svg

Exemplo Básico de Utilização

Integre o componente ReactSVG para exibir um arquivo SVG específico. Veja um exemplo de implementação em um componente funcional:

import React from 'react';
import { ReactSVG } from 'react-svg';

const MeuApp = () => {
  return (
    <div>
      <ReactSVG src="caminho/para/meu-arquivo.svg" />
    </div>
  );
};

export default MeuApp;

Neste código, o componente carrega e renderiza o SVG definido no atributo src.

Carregamento Dinâmico de SVGs

Para situações que exigem alterar o SVG com base em interações do usuário ou estado da aplicação, utilize o estado do React para gerenciar o caminho do arquivo. Um exemplo prático:

import React, { useState } from 'react';
import { ReactSVG } from 'react-svg';

const SVGDinamico = () => {
  const [urlSVG, setUrlSVG] = useState('caminho/padrao.svg');

  const trocarSVG = () => {
    setUrlSVG('caminho/novo.svg');
  };

  return (
    <div>
      <ReactSVG src={urlSVG} />
      <button onClick={trocarSVG}>Trocar SVG</button>
    </div>
  );
};

export default SVGDinamico;

Ao clicar no botão, o estado urlSVG é atualizado, disparando a re-renderização com o novo SVG.

Personalização de Estilos e Atributos

Utilize as funções de callback beforeInjection ou afterInjection para modificar o elemento SVG após sua inserção no DOM. Aplique classes CSS, estilos inline ou atributos adicionais:

import React from 'react';
import { ReactSVG } from 'react-svg';

const SVGCustomizado = () => {
  const prepararSVG = (elemento) => {
    elemento.classList.add('classe-customizada');
    elemento.setAttribute('width', '250');
    elemento.setAttribute('height', '250');
  };

  return (
    <div>
      <ReactSVG
        src="caminho/para/arquivo.svg"
        beforeInjection={prepararSVG}
      />
    </div>
  );
};

export default SVGCustomizado;

Este método garante controle granular sobre a aparência e comportamento do SVG renderizado.

Integração com Ecossistema React

O React-SVG pode ser combinado com diversas ferramentas do ecossistema para ampliar suas funcionalidades. Exemplos incluem:

• Redux para gerenciar estados complexos relacionados aos SVGs, permitindo atualizações dinâmicas baseadas em ações.
• Styled-Components para aplicar estilos encapsulados diretamente nos componentes SVG.
• React Router para associar diferentes SVGs a rotas específicas da aplicação.

Essas integrações facilitam a criação de interfaces ricas e interativas utilizando SVGs como recursso visuais.