@v1ct0rbr/vicons

Extensão de ícones Lucide React com ícones customizados para projetos de infraestrutura rodoviária.

Instalação

npm install @v1ct0rbr/vicons lucide-react react

Uso

Componente IconByName

import { IconByName } from '@v1ct0rbr/vicons'

// Ícones do Lucide
<IconByName name="AlertCircle" size={20} />
<IconByName name="ChevronRight" size={14} className="text-gray-500" />

// Ícones customizados
<IconByName name="DerIcon" size={20} />
<IconByName name="RoadIcon" size={24} style={{ color: '#3b82f6' }} />

Importação direta de ícones customizados

import { DerIcon, RoadIcon, PotholeIcon } from '@v1ct0rbr/vicons'

<DerIcon size={24} />
<RoadIcon size={20} color="red" />

Tipos

import type { IconName, LucideIconName, CustomIconName } from '@v1ct0rbr/vicons'

Ícones Customizados Disponíveis

| Nome | Descrição | |------|-----------| | DerIcon | Ícone DER | | SigaMaisIcon | Ícone SigaMais | | RoadIcon | Estrada | | PotholeIcon | Buraco na pista | | BuracoPistaIcon | Buraco na pista (variante) | | TrafficLightIcon | Semaforo | | BridgeIcon | Ponte | | BridgeCarIcon | Ponte com carro | | OverpassIcon | Viaduto | | TunnelIcon | Tunel | | TroubleIcon | Alerta de problema | | CarCrash | Acidente | | CreatedIcons | Criado (plus circle) | | UpdatedIcon | Atualizado (refresh) |

Props

O componente IconByName aceita todas as props do Lucide React:

| Prop | Tipo | Obrigatorio | Descricao | |------|------|-------------|-----------| | name | IconName | Sim | Nome do icone | | size | number | Nao | Tamanho em pixels (default: 24) | | color | string | Nao | Cor do icone | | className | string | Nao | Classes CSS | | strokeWidth | number | Nao | Espessura do traco | | style | React.CSSProperties | Nao | Estilos inline |