RecursoBase

Estrategia de icones

A biblioteca usa lucide-react internamente para affordances e deixa a escolha de icones de produto para a aplicacao. Use CmIcon somente se o projeto instalar o peer opcional @iconify/react.

CmIcon com Iconify

tsx
import { CmIcon, CmRow } from "cosmemilton-ui/server";

export default function Example() {
  return (
    <CmRow gap="md" align="center" wrap>
      <CmIcon name="lucide:mail" title="E-mail" size={24} />
      <CmIcon name="lucide:calendar-days" title="Calendario" size={24} />
      <CmIcon name="lucide:shield-check" title="Seguranca" size={24} />
    </CmRow>
  );
}

Snippets

CmIcon exige peer opcional

bash
npm install @iconify/react

Icone como ReactNode

tsx
import { CmButton } from "cosmemilton-ui/client";

export function ExportAction() {
  return <CmButton icon="+">Novo</CmButton>;
}

Notas

Aviso: `CmIcon` depende de `@iconify/react`, que e peer opcional. Sem esse pacote instalado, nao copie exemplos que importam `CmIcon`.

Instale apenas a biblioteca de icones que seu produto usa. Para nao usar Iconify, passe um icone como `ReactNode` nas props de icone dos componentes.