Pular para o conteúdo principal

Uma publicação com a etiqueta "theme-7k"

Ver todas as etiquetas

Changelog - 28/04/2026

Sistema de Ícones — migração lucide-react → unplugin-icons

  • lucide-react removido por completo e substituído por unplugin-icons apoiado em três datasets Iconify (@iconify-json/lucide, @iconify-json/simple-icons, @iconify-json/mdi) mais uma coleção custom lida via FileSystemIconLoader de app/icons/custom/. Cada ícone agora resolve para um componente SVG inline em build-time — zero fetch em runtime, SSR-safe no Cloudflare Workers, e o chunk manual vendor-lucide foi descontinuado.
  • API de uso por dataset: import Trophy from "~icons/lucide/trophy" para ícones genéricos de UI, ~icons/simple-icons/<name> para logos de marca (WhatsApp, Facebook, X, Instagram, TikTok), ~icons/mdi/<name> para esportes e equivalentes a emojis, e ~icons/custom/<name> para SVGs próprios em app/icons/custom/ (auto-discovered). Naming kebab-case obrigatório (AlarmClockalarm-clock, XCirclex-circle).
  • Tipo IconComponent substitui LucideIcon em todo o codebase via app/types/icon.ts (superset de SVGProps<SVGSVGElement> com alias legacy de size). unplugin-icons não suporta a prop size do Lucide — codemod scripts/migrate-icon-size-prop.mjs converteu 471 ocorrências de size={X} para width={X} height={X}.
  • Registry string-driven em app/icons/registry.ts para configs que referenciam ícones por string (ex: icon: "mdi:soccer") consumidos via <Icon name="..." /> ou <SmartIcon icon={...} /> (smart dispatch que renderiza o ícone registrado ou cai no texto literal — preserva configs legados com emoji).
  • Exceções aceitáveis para SVG inline: spinners/loaders animados customizados, checkmarks de success animados, indicadores visuais brand-specific que não existem em nenhum dataset Iconify, e seals de regulação (ANJL, Anatel, Compulsafe) servidos via <img> apontando para public/assets/seals/.
  • Migração automatizada via codemods em scripts/: migrate-lucide-to-unplugin-icons.mjs (converte imports nomeados em default imports kebab-case, ordenado via biome check --write), migrate-icon-size-prop.mjs (size → width/height em JSX) e migrate-emoji-icons.mjs (emoji literais → IconName registrado). Fix posterior em toKebabCase para acrônimos consecutivos (XCirclex-circle, antes virava xcircle quebrado).