Icon

Los iconos de línea del archivo (24×24, trazo 2px redondeado) como componente que hereda currentColor.

Cuándo usarlo

Props. name (ver Jotis.iconNames), size (20 en controles, 16 en xs y menús, 24 en navegación), title (si el icono transmite algo por sí solo), spin.

Colores. El icono toma el color del texto. En controles usa fg-quaternary; en navegación fg-quaternary y fg-tertiary activo; con estado, fg-success-primary, fg-error-primary…

Ejemplos

Props

Prop	Tipo	Por defecto	Descripción
`name`obligatoria	`IconName`	—
`size`	`number`	`20`	Lado en px. 20 en controles, 16 en botones xs y menús, 24 en navegación.
`strokeWidth`	`number`	`2`
`title`	`string`	—	Nombre accesible. Sin él, el icono es decorativo y queda oculto a lectores de pantalla.
`spin`	`boolean`	—	Giro continuo para cargas; se detiene si el sistema pide menos movimiento.

Código

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

export default function Page() {
	return (
		<>
			<Icon name="calendar" size={20} />
			<Icon name="check-circle" title="Pagado" />
		</>
	);
}

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

<Icon name="calendar" size={20} />
<Icon name="check-circle" title="Pagado" />