@etus/ui 0.1.0

package/src/components/primitives/Icon/README.md

@@ -0,0 +1,759 @@
+# Icon
+
+## Visão Geral
+
+O **Icon** e o componente atomico para renderizacao de icones SVG no Design System ETUS. Funciona como um wrapper flexivel sobre a biblioteca Lucide React, padronizando tamanhos, cores e comportamentos de acessibilidade para todos os icones da interface.
+
+### Casos de Uso
+
+- Icones de acao em botoes e links
+- Indicadores visuais de status
+- Decoracao em componentes compostos (Card, Alert, Badge)
+- Navegacao e orientacao visual
+- Feedback de estados (loading, success, error)
+
+### Classificacao
+
+**Categoria:** Atom (Primitivo)
+**Dependencias:** `lucide-react`, `class-variance-authority`
+
+---
+
+## Design Specs
+
+### Variantes (`variant`)
+
+| Variante | Uso | Tokens |
+|----------|-----|--------|
+| `default` | Herda cor do contexto | `text-current` |
+| `muted` | Icones secundarios | `text-muted-foreground` |
+| `primary` | Destaque primario | `text-primary` |
+| `destructive` | Acoes perigosas | `text-destructive` |
+| `success` | Feedback positivo | `text-green-600` |
+| `warning` | Alertas | `text-yellow-600` |
+
+### Tamanhos (`size`)
+
+| Tamanho | Dimensao | Classe | Uso |
+|---------|----------|--------|-----|
+| `xs` | 12px | `size-3` | Badges, indicadores |
+| `sm` | 16px | `size-4` | Botoes pequenos, inline |
+| `md` | 20px | `size-5` | Uso geral, default |
+| `lg` | 24px | `size-6` | Headers, destaque |
+| `xl` | 32px | `size-8` | Empty states, hero |
+| `2xl` | 48px | `size-12` | Ilustracoes |
+
+### Estados
+
+| Estado | Classes/Atributos | Comportamento |
+|--------|-------------------|---------------|
+| Default | - | Aparencia base |
+| Hover | `group-hover:*` | Responde ao hover do pai |
+| Disabled | `opacity-50` | 50% opacidade |
+| Spinning | `animate-spin` | Animacao de rotacao |
+| Pulsing | `animate-pulse` | Animacao de pulso |
+
+### Tokens Utilizados
+
+```css
+/* Cores */
+--foreground         /* text-current herda */
+--muted-foreground   /* Variante muted */
+--primary            /* Variante primary */
+--destructive        /* Variante destructive */
+
+/* Tamanhos (Tailwind size-*) */
+size-3               /* 12px - xs */
+size-4               /* 16px - sm */
+size-5               /* 20px - md (default) */
+size-6               /* 24px - lg */
+size-8               /* 32px - xl */
+size-12              /* 48px - 2xl */
+
+/* Animacoes */
+animate-spin         /* Rotacao continua */
+animate-pulse        /* Pulso de opacidade */
+
+/* Transicoes */
+transition-colors    /* Mudanca de cor suave */
+```
+
+### data-slot
+
+```html
+<svg data-slot="icon">...</svg>
+```
+
+---
+
+## API
+
+### Props
+
+| Prop | Tipo | Padrao | Descricao |
+|------|------|--------|-----------|
+| `name` | `LucideIcon` | - | Componente de icone Lucide |
+| `variant` | `"default" \| "muted" \| "primary" \| "destructive" \| "success" \| "warning"` | `"default"` | Estilo de cor |
+| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"` | `"md"` | Tamanho do icone |
+| `spin` | `boolean` | `false` | Ativa animacao de rotacao |
+| `pulse` | `boolean` | `false` | Ativa animacao de pulso |
+| `className` | `string` | - | Classes CSS adicionais |
+| `aria-label` | `string` | - | Label para screen readers |
+| `aria-hidden` | `boolean` | `true` | Oculta de screen readers (decorativo) |
+| `ref` | `Ref<SVGSVGElement>` | - | Referencia ao elemento SVG |
+
+> Herda todas as props de `React.ComponentProps<"svg">`
+
+### Callbacks
+
+| Callback | Tipo | Descricao |
+|----------|------|-----------|
+| `onClick` | `(event: MouseEvent) => void` | Disparado ao clicar (se interativo) |
+| `onMouseEnter` | `(event: MouseEvent) => void` | Disparado ao hover |
+| `onMouseLeave` | `(event: MouseEvent) => void` | Disparado ao sair do hover |
+
+### TypeScript
+
+```typescript
+import { type VariantProps } from "class-variance-authority"
+import type { LucideIcon } from "lucide-react"
+
+// Variants exportadas
+const iconVariants = cva(/* ... */)
+
+// Props do componente
+interface IconProps extends React.ComponentProps<"svg">,
+  VariantProps<typeof iconVariants> {
+  name: LucideIcon
+  spin?: boolean
+  pulse?: boolean
+}
+
+// Tipos derivados uteis
+type IconVariant = NonNullable<VariantProps<typeof iconVariants>["variant"]>
+type IconSize = NonNullable<VariantProps<typeof iconVariants>["size"]>
+
+// Re-export de tipos Lucide
+export type { LucideIcon, LucideProps } from "lucide-react"
+```
+
+### Comparativo com Design Systems de Referencia
+
+#### Matriz de Features (14 Design Systems)
+
+| Feature | ETUS | Shadcn | Radix | React Aria | Chakra | MUI | Mantine | AntD | NextUI | Headless | Ariakit | Fluent | Carbon | Blueprint | PrimeReact |
+|---------|:----:|:------:|:-----:|:----------:|:------:|:---:|:-------:|:----:|:------:|:--------:|:-------:|:------:|:------:|:---------:|:----------:|
+| **Wrapper Component** | Y | - | - | - | Y | Y | Y | Y | Y | - | - | Y | Y | Y | Y |
+| **Size Variants** | 6 | - | - | - | 6 | 3 | 5 | 4 | 4 | - | - | 5 | 4 | 4 | 4 |
+| **Color Variants** | 6 | - | - | - | Y | Y | Y | Y | Y | - | - | Y | Y | - | Y |
+| **CVA/cva** | Y | - | - | - | - | - | - | - | Y | - | - | - | - | - | - |
+| **Spin Animation** | Y | - | - | - | Y | - | Y | Y | Y | - | - | Y | - | Y | Y |
+| **Library Agnostic** | - | - | - | - | - | Y | - | Y | - | - | - | Y | Y | Y | - |
+| **Custom SVG** | Y | - | - | - | Y | Y | Y | Y | Y | - | - | Y | Y | Y | Y |
+| **Icon Sprites** | - | - | - | - | - | - | - | Y | - | - | - | - | Y | - | - |
+| **data-slot** | Y | Y | - | - | - | - | - | - | Y | - | - | - | - | - | - |
+| **aria-hidden auto** | Y | - | - | - | Y | Y | Y | Y | Y | - | - | Y | Y | Y | Y |
+
+#### Comparativo de Props por Design System
+
+| Prop | ETUS | Chakra | MUI | Mantine | AntD | NextUI | Fluent | Carbon |
+|------|:----:|:------:|:---:|:-------:|:----:|:------:|:------:|:------:|
+| `size` | Y | `boxSize` | `fontSize` | `size` | `style` | `size` | `size` | `size` |
+| `color` | `variant` | `color` | `color` | `color` | `style` | `color` | `primaryFill` | - |
+| `spin` | Y | Y | - | - | `spin` | - | - | - |
+| `name` | Y | - | - | - | `component` | - | - | `icon` |
+| `as` | - | Y | `component` | - | `component` | - | - | - |
+| `viewBox` | Y | Y | `viewBox` | - | - | - | - | - |
+| `focusable` | - | Y | - | - | - | - | `focusable` | - |
+| `title` | - | - | `titleAccess` | - | - | - | `title` | `description` |
+
+#### Abordagens de Icones por Design System
+
+| Design System | Abordagem | Biblioteca | Notas |
+|---------------|-----------|------------|-------|
+| **ETUS** | Wrapper + Lucide | lucide-react | Wrapper padronizado |
+| **Shadcn/ui** | Direto | lucide-react | Sem wrapper, usa direto |
+| **Chakra UI** | Wrapper generico | @chakra-ui/icons | createIcon() utility |
+| **MUI** | Wrapper + SVG | @mui/icons-material | SvgIcon base component |
+| **Mantine** | Componente | @tabler/icons-react | Tabler icons integrado |
+| **Ant Design** | Wrapper | @ant-design/icons | createFromIconfontCN |
+| **NextUI** | Direto | lucide-react | Sem wrapper proprio |
+| **Fluent UI** | Bundle | @fluentui/react-icons | Icon library propria |
+| **Carbon** | Wrapper | @carbon/icons-react | Sprites suportados |
+| **Blueprint** | Componente | @blueprintjs/icons | Icon enum type-safe |
+| **PrimeReact** | CSS/Font | primeicons | Font icon fallback |
+
+---
+
+## Acessibilidade (A11y)
+
+### ARIA Attributes
+
+| Atributo | Uso |
+|----------|-----|
+| `aria-hidden="true"` | Padrao para icones decorativos |
+| `aria-label` | Quando icone tem significado (sem texto) |
+| `role="img"` | Quando icone e informativo |
+| `role="presentation"` | Alternativa a aria-hidden |
+| `focusable="false"` | Previne foco em SVG |
+
+### Regras de Uso
+
+```tsx
+// Decorativo (acompanha texto) - padrao
+<Icon name={Mail} aria-hidden="true" />
+<span>Enviar email</span>
+
+// Informativo (sem texto acompanhante)
+<Icon name={AlertTriangle} aria-label="Aviso: acao necessaria" role="img" />
+
+// Em botao (botao tem o label)
+<Button aria-label="Deletar item">
+  <Icon name={Trash} aria-hidden="true" />
+</Button>
+
+// Icone interativo standalone (evitar - preferir IconButton)
+<Icon
+  name={Close}
+  aria-label="Fechar"
+  role="button"
+  tabIndex={0}
+  onClick={handleClose}
+/>
+```
+
+### Suporte a Teclado
+
+| Tecla | Acao |
+|-------|------|
+| `Tab` | Pula icones decorativos (focusable=false) |
+| `Enter/Space` | Ativa se role="button" |
+
+### Focus Management
+
+```tsx
+// Icones NAO devem receber foco por padrao
+<svg focusable="false" aria-hidden="true">
+
+// Se interativo (raro), adicionar focus visible
+focus-visible:ring-2
+focus-visible:ring-ring
+focus-visible:ring-offset-2
+focus-visible:outline-none
+```
+
+### Contraste de Cores
+
+Icones devem manter contraste minimo de 3:1 com o fundo:
+
+| Variante | Token | Uso |
+|----------|-------|-----|
+| default | `currentColor` | Herda do texto pai |
+| muted | `--muted-foreground` | Verificar contraste |
+| primary | `--primary` | OK em fundos claros |
+| destructive | `--destructive` | OK em fundos claros |
+
+### Screen Readers
+
+- Icones decorativos: sempre `aria-hidden="true"`
+- Icones informativos: sempre `aria-label` descritivo
+- Evitar redundancia: se texto acompanha, icone e decorativo
+- Loading spinners: usar `role="status"` + `aria-label="Carregando"`
+
+### Reduced Motion
+
+```tsx
+// Respeitar preferencia do usuario
+@media (prefers-reduced-motion: reduce) {
+  .animate-spin,
+  .animate-pulse {
+    animation: none;
+  }
+}
+
+// Ou via Tailwind
+motion-reduce:animate-none
+```
+
+### Comparativo A11y (14 Design Systems)
+
+| Feature | ETUS | React Aria | Radix | Chakra | MUI | Mantine | AntD | NextUI | Fluent | Carbon | Blueprint |
+|---------|:----:|:----------:|:-----:|:------:|:---:|:-------:|:----:|:------:|:------:|:------:|:---------:|
+| **aria-hidden auto** | Y | - | - | Y | Y | Y | Y | Y | Y | Y | Y |
+| **aria-label prop** | Y | - | - | Y | `titleAccess` | - | - | - | Y | `description` | `title` |
+| **focusable=false** | Y | - | - | Y | Y | - | - | - | Y | Y | - |
+| **role="img"** | opt | - | - | opt | opt | - | - | - | opt | opt | - |
+| **Reduced motion** | Y | - | - | Y | Y | Y | - | Y | Y | Y | - |
+| **SVG title** | - | - | - | - | Y | - | - | - | Y | Y | Y |
+
+**Legenda:** Y = Suporte completo | opt = Opcional/manual | - = Nao suportado
+
+---
+
+## Exemplos
+
+### Uso Basico
+
+```tsx
+import { Icon } from "@etus/ui"
+import { Mail } from "lucide-react"
+
+function Example() {
+  return <Icon name={Mail} />
+}
+```
+
+### Variantes de Cor
+
+```tsx
+import { Icon } from "@etus/ui"
+import {
+  CheckCircle,
+  AlertTriangle,
+  XCircle,
+  Info
+} from "lucide-react"
+
+<Icon name={Info} variant="default" />
+<Icon name={Info} variant="muted" />
+<Icon name={CheckCircle} variant="success" />
+<Icon name={AlertTriangle} variant="warning" />
+<Icon name={XCircle} variant="destructive" />
+<Icon name={Info} variant="primary" />
+```
+
+### Tamanhos
+
+```tsx
+<Icon name={Star} size="xs" />  {/* 12px */}
+<Icon name={Star} size="sm" />  {/* 16px */}
+<Icon name={Star} size="md" />  {/* 20px - default */}
+<Icon name={Star} size="lg" />  {/* 24px */}
+<Icon name={Star} size="xl" />  {/* 32px */}
+<Icon name={Star} size="2xl" /> {/* 48px */}
+```
+
+### Com Animacoes
+
+```tsx
+import { Loader2, Heart } from "lucide-react"
+
+// Spinner de loading
+<Icon name={Loader2} spin />
+
+// Pulso (atencao)
+<Icon name={Heart} pulse variant="destructive" />
+
+// Combinado com tamanho
+<Icon name={Loader2} spin size="lg" variant="primary" />
+```
+
+### Composicao com Texto
+
+```tsx
+// Inline com texto
+<p className="flex items-center gap-2">
+  <Icon name={Mail} size="sm" aria-hidden />
+  contato@exemplo.com
+</p>
+
+// Em lista
+<ul className="space-y-2">
+  <li className="flex items-center gap-2">
+    <Icon name={Check} variant="success" size="sm" />
+    Item concluido
+  </li>
+</ul>
+```
+
+### Com Botao
+
+```tsx
+import { Button } from "@etus/ui"
+import { Send, Loader2 } from "lucide-react"
+
+// Icone no botao
+<Button>
+  <Icon name={Send} size="sm" aria-hidden />
+  Enviar
+</Button>
+
+// Loading state
+<Button disabled>
+  <Icon name={Loader2} spin size="sm" aria-hidden />
+  Enviando...
+</Button>
+```
+
+### Icone Acessivel (Informativo)
+
+```tsx
+// Quando icone tem significado proprio
+<Icon
+  name={AlertTriangle}
+  variant="warning"
+  aria-label="Aviso importante"
+  role="img"
+  aria-hidden={false}
+/>
+
+// Status indicator
+<span className="flex items-center gap-1">
+  <Icon
+    name={Circle}
+    size="xs"
+    className="fill-green-500 text-green-500"
+    aria-label="Status: Online"
+    role="img"
+    aria-hidden={false}
+  />
+  <span className="sr-only">Online</span>
+</span>
+```
+
+### Responsividade
+
+```tsx
+// Tamanho responsivo via className
+<Icon
+  name={Menu}
+  className="size-5 md:size-6 lg:size-8"
+/>
+
+// Visibilidade responsiva
+<Icon
+  name={Menu}
+  className="md:hidden"
+/>
+<Icon
+  name={LayoutGrid}
+  className="hidden md:block"
+/>
+```
+
+### Com Container Queries
+
+```tsx
+<div className="@container">
+  <Icon
+    name={Search}
+    className="@xs:size-4 @sm:size-5 @md:size-6"
+  />
+</div>
+```
+
+### Customizacao Avancada
+
+```tsx
+// Stroke width customizado
+<Icon
+  name={Heart}
+  strokeWidth={1.5}
+  className="size-8"
+/>
+
+// Preenchimento
+<Icon
+  name={Star}
+  className="fill-yellow-400 text-yellow-500"
+/>
+
+// Hover no pai
+<button className="group">
+  <Icon
+    name={Heart}
+    className="group-hover:fill-red-500 group-hover:text-red-500 transition-colors"
+  />
+</button>
+```
+
+---
+
+## Testes
+
+### Testes Unitarios
+
+```tsx
+// Icon.test.tsx
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+import { Icon } from "./Icon"
+import { Mail, AlertTriangle, Loader2 } from "lucide-react"
+
+describe("Icon", () => {
+  it("renders correctly", () => {
+    render(<Icon name={Mail} aria-label="Email" />)
+    expect(screen.getByLabelText("Email")).toBeInTheDocument()
+  })
+
+  it("applies size classes", () => {
+    const { container } = render(<Icon name={Mail} size="lg" />)
+    expect(container.querySelector("svg")).toHaveClass("size-6")
+  })
+
+  it("applies variant classes", () => {
+    const { container } = render(<Icon name={Mail} variant="primary" />)
+    expect(container.querySelector("svg")).toHaveClass("text-primary")
+  })
+
+  it("merges custom className", () => {
+    const { container } = render(<Icon name={Mail} className="custom-class" />)
+    expect(container.querySelector("svg")).toHaveClass("custom-class")
+  })
+
+  it("has data-slot attribute", () => {
+    const { container } = render(<Icon name={Mail} />)
+    expect(container.querySelector("svg")).toHaveAttribute("data-slot", "icon")
+  })
+
+  it("applies spin animation", () => {
+    const { container } = render(<Icon name={Loader2} spin />)
+    expect(container.querySelector("svg")).toHaveClass("animate-spin")
+  })
+
+  it("applies pulse animation", () => {
+    const { container } = render(<Icon name={Mail} pulse />)
+    expect(container.querySelector("svg")).toHaveClass("animate-pulse")
+  })
+})
+```
+
+### Testes de Acessibilidade
+
+```tsx
+import { axe, toHaveNoViolations } from "jest-axe"
+
+expect.extend(toHaveNoViolations)
+
+describe("Icon accessibility", () => {
+  it("has no accessibility violations when decorative", async () => {
+    const { container } = render(
+      <div>
+        <Icon name={Mail} aria-hidden="true" />
+        <span>Email</span>
+      </div>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("has no accessibility violations when informative", async () => {
+    const { container } = render(
+      <Icon name={AlertTriangle} aria-label="Warning" role="img" />
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("is hidden from screen readers by default", () => {
+    const { container } = render(<Icon name={Mail} />)
+    expect(container.querySelector("svg")).toHaveAttribute("aria-hidden", "true")
+  })
+
+  it("is not focusable by default", () => {
+    const { container } = render(<Icon name={Mail} />)
+    expect(container.querySelector("svg")).toHaveAttribute("focusable", "false")
+  })
+
+  it("can be made accessible with aria-label", () => {
+    render(
+      <Icon
+        name={AlertTriangle}
+        aria-label="Aviso"
+        aria-hidden={false}
+        role="img"
+      />
+    )
+    expect(screen.getByRole("img", { name: "Aviso" })).toBeInTheDocument()
+  })
+})
+```
+
+### Testes de Interacao
+
+```tsx
+import userEvent from "@testing-library/user-event"
+
+describe("Icon interactions", () => {
+  it("responds to click when onClick provided", async () => {
+    const user = userEvent.setup()
+    const handleClick = vi.fn()
+
+    const { container } = render(
+      <Icon name={Mail} onClick={handleClick} />
+    )
+
+    await user.click(container.querySelector("svg")!)
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+
+  it("does not receive focus by default", () => {
+    const { container } = render(<Icon name={Mail} />)
+    const svg = container.querySelector("svg")!
+
+    svg.focus()
+    expect(svg).not.toHaveFocus()
+  })
+})
+```
+
+### Testes de Variantes
+
+```tsx
+describe("Icon variants", () => {
+  const sizes = ["xs", "sm", "md", "lg", "xl", "2xl"] as const
+  const variants = ["default", "muted", "primary", "destructive", "success", "warning"] as const
+
+  it.each(sizes)("renders size %s correctly", (size) => {
+    const { container } = render(<Icon name={Mail} size={size} />)
+    expect(container.querySelector("svg")).toBeInTheDocument()
+  })
+
+  it.each(variants)("renders variant %s correctly", (variant) => {
+    const { container } = render(<Icon name={Mail} variant={variant} />)
+    expect(container.querySelector("svg")).toBeInTheDocument()
+  })
+
+  it("combines size and variant", () => {
+    const { container } = render(
+      <Icon name={Mail} size="lg" variant="destructive" />
+    )
+    const svg = container.querySelector("svg")
+    expect(svg).toHaveClass("size-6")
+    expect(svg).toHaveClass("text-destructive")
+  })
+})
+```
+
+### Cenarios Criticos
+
+```tsx
+describe("Icon edge cases", () => {
+  it("forwards ref correctly", () => {
+    const ref = { current: null }
+    render(<Icon name={Mail} ref={ref} />)
+    expect(ref.current).toBeInstanceOf(SVGSVGElement)
+  })
+
+  it("passes through SVG props", () => {
+    const { container } = render(
+      <Icon name={Mail} strokeWidth={1.5} />
+    )
+    expect(container.querySelector("svg")).toHaveAttribute("stroke-width", "1.5")
+  })
+
+  it("handles missing name gracefully", () => {
+    // @ts-expect-error - testing runtime behavior
+    expect(() => render(<Icon name={undefined} />)).not.toThrow()
+  })
+
+  it("respects reduced motion preference", () => {
+    // Mock matchMedia
+    window.matchMedia = vi.fn().mockImplementation(query => ({
+      matches: query === "(prefers-reduced-motion: reduce)",
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+    }))
+
+    const { container } = render(<Icon name={Loader2} spin />)
+    // Component should still have the class, CSS handles the actual behavior
+    expect(container.querySelector("svg")).toHaveClass("animate-spin")
+  })
+})
+```
+
+---
+
+## Roadmap / Features Futuras
+
+Baseado na analise comparativa com 14 design systems:
+
+### Prioridade Alta
+
+#### Icon Sprites Support
+
+```tsx
+// Proposta de API
+<IconSprite href="/icons.svg" />
+<Icon name="mail" sprite /> // Usa sprite ao inves de inline
+```
+
+**Referencias:** Carbon, Ant Design
+
+### Prioridade Media
+
+#### `asChild` Pattern
+
+```tsx
+// Renderizar como outro elemento
+<Icon asChild name={ExternalLink}>
+  <a href="..." />
+</Icon>
+```
+
+#### Custom Icon Factory
+
+```tsx
+// Criar icones customizados
+const CustomIcon = createIcon({
+  path: "M10 0...",
+  viewBox: "0 0 24 24",
+  displayName: "CustomIcon"
+})
+```
+
+**Referencias:** Chakra UI (`createIcon`)
+
+### Prioridade Baixa
+
+#### Icon Font Fallback
+
+```tsx
+// Fallback para icon fonts
+<Icon name="mail" fallback="fa-envelope" />
+```
+
+### Decisoes de Design
+
+| Feature | Recomendacao | Justificativa |
+|---------|--------------|---------------|
+| `name` prop | Y Implementar | Type-safety com Lucide |
+| Size variants | Y Implementar | Consistencia com Button |
+| Color variants | Y Implementar | Padronizacao de estados |
+| `spin`/`pulse` | Y Implementar | Loading states comuns |
+| Sprites | Avaliar | Performance vs complexidade |
+| Icon font | X Evitar | SVG superior em qualidade |
+
+---
+
+## Referências
+
+### Design Systems Analisados
+
+| Design System | Documentacao Icon | GitHub |
+|---------------|-------------------|--------|
+| **Shadcn/ui** | Usa Lucide direto | [shadcn-ui/ui](https://github.com/shadcn-ui/ui) |
+| **Chakra UI** | [Icon](https://chakra-ui.com/docs/components/icon) | [chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) |
+| **MUI** | [SvgIcon](https://mui.com/material-ui/api/svg-icon/) | [mui/material-ui](https://github.com/mui/material-ui) |
+| **Mantine** | [ThemeIcon](https://mantine.dev/core/theme-icon/) | [mantinedev/mantine](https://github.com/mantinedev/mantine) |
+| **Ant Design** | [Icon](https://ant.design/components/icon) | [ant-design/ant-design](https://github.com/ant-design/ant-design) |
+| **NextUI** | Usa Lucide direto | [nextui-org/nextui](https://github.com/nextui-org/nextui) |
+| **Fluent UI** | [Icon](https://react.fluentui.dev/?path=/docs/icons-icons) | [microsoft/fluentui](https://github.com/microsoft/fluentui) |
+| **Carbon** | [Icon](https://carbondesignsystem.com/guidelines/icons/usage/) | [carbon-design-system/carbon](https://github.com/carbon-design-system/carbon) |
+| **Blueprint** | [Icon](https://blueprintjs.com/docs/#core/components/icon) | [palantir/blueprint](https://github.com/palantir/blueprint) |
+| **PrimeReact** | [Icons](https://primereact.org/icons/) | [primefaces/primereact](https://github.com/primefaces/primereact) |
+
+### Especificacoes e Padroes
+
+- [WAI-ARIA - Images](https://www.w3.org/WAI/tutorials/images/)
+- [SVG Accessibility](https://www.w3.org/TR/SVG2/access.html)
+- [Lucide Icons](https://lucide.dev/guide/)
+- [WCAG 2.1 - Non-text Content](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html)
+
+### Ferramentas Utilizadas
+
+- [Lucide React](https://lucide.dev/guide/packages/lucide-react)
+- [CVA - Class Variance Authority](https://cva.style/docs)
+- [Tailwind CSS](https://tailwindcss.com/docs)