FeaturedIcon

Icono dentro de una forma, para encabezar modales, alertas, estados vacíos y tarjetas.

Cuándo usarlo

Props. icon, color (brand · gray · success · warning · error), size (sm 32 · md 40 · lg 48 · xl 56), variant: light (círculo tintado; por defecto), modern (cuadrado blanco con sombra esqueumórfica, para estados vacíos), outline (anillos concéntricos, para alertas).

Regla. El color debe coincidir con el significado del contenedor: un modal de borrado lleva error.

Ejemplos

Props

Prop	Tipo	Por defecto	Descripción
`icon`	`IconName`	`check-circle`	Por defecto, `check-circle`.
`color`	`"gray" · "brand" · "error" · "warning" · "success"`	`brand`	Tiene que coincidir con el significado del contenedor: un modal de borrado lleva `error`.
`size`	`"sm" · "md" · "lg" · "xl"`	`md`	Lado: `sm` 32 · `md` 40 · `lg` 48 · `xl` 56.
`variant`	`"light" · "modern" · "outline"`	`light`	`light` círculo tintado · `modern` cuadrado blanco esqueumórfico · `outline` anillos concéntricos.
`className`	`string`	—

Código

import { FeaturedIcon } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<FeaturedIcon icon="alert-circle" color="error" />
		</>
	);
}

---
import { FeaturedIcon } from "@jotis-me/react";
---

<FeaturedIcon icon="alert-circle" color="error" />