Skip to main content

Como adicionar ícones

Os ícones do pacote @resultadosdigitais/tangram-react-icons são gerados a partir de arquivos SVG. Você não precisa criar o componente React manualmente, basta adicionar o SVG e rodar o build.

Visão geral​

  1. Adicione ou atualize o SVG em packages/react-icons/svg/;
  2. Rode o build do pacote;
  3. O componente fica disponível em PascalCase. Por exemplo, table-layout.svg vira TableLayout;

O build lê os SVGs em packages/react-icons/svg/, gera os componentes com SVGR (scripts/react-icons-build.js) e publica os arquivos em lib/.

Convenções de nome​

Convenções de nome dos ícones
Arquivo SVGExport React
chart-bar.svgChartBar
bars-simetric.svgBarsSimetric
objects-align-center-horizontal.svgObjectsAlignCenterHorizontal
  • Nomeie o arquivo em kebab-case (palavras separadas por hífen).
  • O build gera o componente em PascalCase.

Passo a passo​

1. Obter o SVG​

Exporte o ícone do Figma (Dev Mode ou export SVG).

2. Preparar o SVG​

Antes de salvar, ajuste o SVG:

  • Remova fundos ou preview vindos do Figma.
  • Remova ids e grupos desnecessários.
  • Em ícones monocromáticos, remova a presença de atributos fill, style, stroke ou qualquer outro elemento de estilização nos elementos (geralmente tags path).
  • Mantenha fill-rule e clip-rule quando existirem.
  • Ícones de marca ou coloridos (por exemplo, google-color.svg) podem manter atributos fill específicos.

3. Teste visualmente o resultado​

Para conferir o ícone na documentação local:

  1. Em packages/react-icons, gere os componentes React:
yarn build
  1. Na raiz do projeto, inicie a documentação. Se ela já estiver em execução, reinicie-a para carregar o novo ícone:
yarn docs start

  1. Acesse a Biblioteca de ícones e busque pelo nome do ícone.

  2. Confirme que o ícone renderizado está correto.

4. Uso​

import { MyIcon } from '@resultadosdigitais/tangram-react-icons';

<MyIcon title="My custom Icon" />;

Substituir um ícone existente​

Para atualizar um ícone, sobrescreva o SVG com o mesmo nome de arquivo (por exemplo, copy.svg) e rode yarn build. Quem já importa Copy passa a usar o desenho novo sem mudar o código.

Ícones para Navegação Shell​

Ícones utilizados no Shell têm versão duotone (duas cores):

  1. Adicione o ícone monocromático em svg/nome.svg, seguindo o passo a passo de ícone monocromático.
  2. Com a versão monocromática pronta, adicione a versão duotone em svg/duotone/nome.svg, com o mesmo nome de arquivo.
  3. Na versão duotone, adicione ao elemento secundário (geralmente uma tag path) com fill="red". No build, essa cor será substituida adequadamente pela cor secundária.
  4. Para conferir que o ícone renderizado está correto, siga o passo a passo em Teste visualmente o resultado.
Atenção!

Todo ícone para Navegação Shell deve possuir estas duas versões, a monocromática (convencional) e a duotone.

Feedback​

To report a problem or suggest changes, use our improvements form or, if you prefer, open an issue on our Github repository.