4 Formas de usar SVG em projetos React

Uma pergunta bem comum quando vamos trabalhar com imagens em nossas aplicações é "que formato de imagem usar". De maneira geral, quando vamos lidar com imagens detalhadas, como fotos, não há dúvida de que os formatos .png ou .jpg são nossas escolhas.

Porém, usar apenas esses formatos pra tudo pode deixar sua aplicação mais pesada sem necessidade. Então, quando precisamos de imagens mais simples, como logos e ícones, a escolha mais adequada é seguir com gráficos vetoriais. E é aí que entra o formato .svg, sigla em inglês para Gráficos Vetoriais Escaláveis.

E quando utilizamos gráficos SVG com React, temos algumas formas diferentes de utilizar esses arquivos. Que tal conhecer algumas dessas possibilidades?

Sumário
SVG na tag img
SVG como background-image
SVG como JSX
SVG como ReactComponent
SVG: vantagens e desvantagens

---

SVG na tag img

O método mais conhecido e mais utilizado é usar a palavra-chave import para importar o arquivo SVG e usá-lo de forma estática no src da tag <img>.

import Logo from '../assets/logo.svg';

const Button = () => {
  return (
    <button>
      <img src={Logo} alt='Logotipo do App' />
    </button>
  );
};

---

SVG como background-image

Também é possível usar SVG no CSS como background ou background-image, indicando diretamente o caminho de pasta da imagem:

.container {
  background-image: url('./assets/logo.svg') no-repeat;
}

---

SVG como JSX

Essa forma de uso é quase a mesma coisa de colocar a tag <svg> diretamente no HTML, que é uma prática bastante comum e que permite a customização do SVG.

Porém, no React, esse uso se torna melhor, pois você pode utilizar o SVG como um componente JSX, deixando o seu código menos verboso e mais organizado. Isso é possível porque os SVGs são escritos em XML (quase um HTML).

Para isso, existem ferramentas online que podem te ajudar a fazer essa conversão, como o site SVG 2 JSX.

// TAG <svg>
<svg width='14' height='14' viewBox='0 0 14 14'>
  <rect class='cls-1' width='14' height='2' />
</svg>

// COMPONENTE JSX
function Icon() {
  return (
    <svg width='14' height='14' viewBox='0 0 14 14'>
      <path d='M0 0H14V2H0z' className='cls-1' />
    </svg>
  );
};

export default Icon;

---

SVG como ReactComponent

Se você tiver um projeto inicializado com create-react-app, também é possível importar o SVG diretamente, como um ReactComponent:

import { ReactComponent as Logo } from './assets/logo.svg';

const App = () => (
  <div id='App'>
    <Logo />
  </div>    
);

export default App;

---

Mas se você inicializou seu projeto com Vite, é necessário instalar o pacote vite-plugin-svgr e refatorar o seu vite.config.js com essa configuração abaixo para que isso funcione:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [
    react(),
    svgr()
  ],
});

---

SVG: vantagens e desvantagens

Existem vários benefícios em utilizar SVG em seus projetos, porém, também é necessário saber usá-lo bem. Abaixo listo brevemente algumas vantagens e desvantagens dos gráficos SVG:

• São editáveis;
• São facilmente escaláveis sem perder a qualidade, inclusive em impressões;
• Podem ser animados pelo CSS;
• Seu uso é flexível, podendo ser manipulado também via JavaScript;
• São arquivos leves;
• Se usadas corretamente, as imagens SVG podem ser benéficas para o SEO, pois são indexáveis pelas engines de busca;

Porém...

• Não são suportados por browsers mais antigos;
• Normalmente não são muito detalhados, por isso são indicados para logotipos e ícones.

Espero que este artigo te traga boas experiências em seus próximos projetos com React. Um xêro pra vocês!

---

Fontes:

• LogRocket: How to use SVGs in React
• Creatif Fish: Advantages and disadvantages of SVG