4 Formas de usar SVG em projetos React
Tags: frontend, react, braziliandevs, webdev
Published: 2023-05-10 20:04:59

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 <mark>Gráficos Vetoriais Escaláveis</mark>.

E quando utilizamos gráficos <abbr title='Scalable Vector Graphics'>SVG</abbr> com React, temos algumas formas diferentes de utilizar esses arquivos. Que tal conhecer algumas dessas possibilidades?

> _**Sumário**_
> _[SVG na tag img](#svg-na-tag-img)_
> _[SVG como background-image](#svg-como-backgroundimage)_
> _[SVG como JSX](#svg-como-jsx)_
> _[SVG como ReactComponent](#svg-como-reactcomponent)_
> _[SVG: vantagens e desvantagens](#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>`.

```jsx
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 <abbr title='Cascading Style Sheets'>CSS</abbr> como `background` ou `background-image`, indicando diretamente o caminho de pasta da imagem:

```css
.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 <abbr title='Hyper Text Markup Language'>HTML</abbr>, que é uma prática bastante comum e que permite a customização do SVG.

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

Para isso, existem ferramentas online que podem te ajudar a fazer essa conversão, como o site [**SVG 2 JSX**](https://svg2jsx.com/).

```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`:

```jsx
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**](https://www.npmjs.com/package/vite-plugin-svgr) e refatorar o seu _vite.config.js_ com essa configuração abaixo para que isso funcione:

```js
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 <abbr title='Search Engine Optimization'>SEO</abbr>, 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](https://blog.logrocket.com/how-to-use-svgs-react/)_
- _[Creatif Fish: Advantages and disadvantages of SVG](https://creatiffish.com/blog/other/svg-advantages-and-disadvantages/)_