ds-template-icons

Design System Icons - Biblioteca de ícones SVG para uso em qualquer framework.

Os ícones são fornecidos como SVGs puros em src/ e podem ser consumidos diretamente ou convertidos para o framework desejado. Um script de geração para React já está incluso.

Instalação

npm install

Scripts

| Script | Descrição | |--------|-----------| | npm run generate | Gera componentes React em react/ a partir dos SVGs | | npm run build | Executa generate + compila TypeScript | | npm run clean | Remove arquivos gerados |

Os SVGs em src/ são puros e prontos para uso em qualquer projeto, sem necessidade de geração.

Estrutura de Diretórios

src/
├── base/           # Ícones base
├── country/        # Bandeiras de países
├── feature/        # Ícones de features (badges)
└── payment-method/ # Ícones de métodos de pagamento

Uso

import { House, User, Warning } from 'ds-template-icons/react';

<House />
<Warning size={32} color="red" />

Adicionar Novos Ícones (para geração React)

1. Adicione o arquivo SVG na pasta correta em src/
2. Execute npm run generate
3. Commit as alterações

Nomenclatura de Arquivos

• Arquivos em kebab-case: arrow-up.svg → ArrowUp
• Arquivos iniciados com número: 12-hours.svg → Icon12Hours

Categorias de Features

Ícones em src/feature/ geram componentes com wrapper circular:

| Feature | Ícone Base | |---------|------------| | FeatureBrand | Zap | | FeatureNeutral | Zap | | FeatureSuccess | CheckCircle | | FeatureError | AlertCircle | | FeatureWarning | AlertTriangle | | FeatureInfo | HelpCircle |

Props (Componentes React Gerados)

Ícones Base

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | size | number \| string | 24 | Tamanho do ícone | | color | string | currentColor | Cor do ícone | | fill | string | none | Cor de preenchimento | | stroke | string | - | Cor da linha | | strokeWidth | number | 24 | Espessura da linha | | className | string | - | Classes CSS |

Ícones de Feature

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | size | 12 \| 16 \| 20 \| 24 \| 32 | 24 | Tamanho do ícone | | color | string | - | Cor do ícone | | backgroundColor | string | - | Cor de fundo do círculo | | className | string | - | Classes CSS (Tailwind) |