Icons

Este é um pacote de componentes de ícones SVG, desenvolvido com base no styleguide, para uso em aplicações React do Fulltrack.

Estrutura do projeto

o projeto é formado pela seguinte estrutura:

• /src: contém o código do projeto.
• /src/Icon: contém o componente principal do pacote.
• /dist: pasta onde o pacote o pacote é gerado.

Como Utilizar?

O componente Icon é um componente de ícones SVG feitos com React. Para utilizá-los, você deve chamar o componente <Icon name="ui settings" />. Ou seja, cada ícone é identificado por um nome específico.

Nomes dos Ícones

// Importe o pacote
import { Icon } from '@ftdata/icons';

// Código...
<Icon name="ui settings" />

Os nomes dos ícones são divididos em duas partes:

• Grupo Pai dos Ícones: Representado pela sigla antes do espaço. No exemplo "ui", representa o grupo de ícones "Interfaces".
• Nome do Ícone: A parte após o espaço identifica o ícone específico dentro do grupo. No exemplo, "settings".

Cada grupo tem sua própria sigla e seus próprios ícones, mas todos são representados por um único componente (<Icon />).

Color, Size e Weight

Além do nome, o componente <Icon /> aceita três propriedades adicionais:

• color: Define a cor do ícone.
• size: Define o tamanho do ícone, igualmente para altura e largura.
• weight: Define a espessura das linhas do ícone, alterando a propriedade "stroke-width" do SVG.

// Ícone de configurações, rosa e de tamanho 32px.
<Icon name="ui settings" color="pink" size="32" />

// Ícone de bateria, vermelho e de tamanho 16px.
<Icon name="cs battery-eletrecity-generator" color="red" size="16" />

// Ícone de maleta, roxo e de tamanho 32px e com as linhas de 2.5.
<Icon name="bp suitcase-portfolior" color="purple" size="32" weight="2.5" />