@ftdata/icons/README.md

Fulltime Styleguide Icons

# 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

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

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

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 />`).

<br>

### 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.

<br>

```typescript
// Í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" />
```