Componentes · Ola 1 · Contenido

Icon

Dibuja un ícono de Tabler con el trazo de Arche y una talla del sistema. Arche usa Tabler con trazo de 1,5: los íconos se importan desde @archeblack/ui/icons, que reexporta todo Tabler sin cargarlo entero (el bundler solo incluye los que se usan), y siempre se muestran a través de <Icon>.

import { Icon } from '@archeblack/ui'; import { IconSearch } from '@archeblack/ui/icons';

Ejemplos

Decorativo

El uso más común: acompaña a un texto que ya dice lo mismo. Talla md por defecto.

Svelte

<script lang="ts">
	import { Icon } from '@archeblack/ui';
	import { IconBell, IconFolder, IconSearch, IconSettings } from '@archeblack/ui/icons';
</script>

<Icon icon={IconSearch} />
<Icon icon={IconFolder} />
<Icon icon={IconBell} />
<Icon icon={IconSettings} />

Tallas

sm (16 px), md (20 px) y lg (24 px). Un número da un tamaño exacto, para ilustraciones.

Svelte

<script lang="ts">
	import { Icon } from '@archeblack/ui';
	import { IconBolt } from '@archeblack/ui/icons';
</script>

<Icon icon={IconBolt} size="sm" />
<Icon icon={IconBolt} />
<Icon icon={IconBolt} size="lg" />
<Icon icon={IconBolt} size={40} />

Con nombre

Cuando el ícono es lo único que comunica, label le da un nombre accesible.

Svelte

<script lang="ts">
	import { Icon } from '@archeblack/ui';
	import { IconCircleCheck, IconClockHour4 } from '@archeblack/ui/icons';
</script>

<!-- El ícono es lo único que comunica el estado: lleva nombre. -->
<Icon icon={IconCircleCheck} label="Publicado" />
<Icon icon={IconClockHour4} label="Programado" />

Color heredado

Toma el color del texto. Un estado se pinta con su rol y siempre lleva texto.

Cambios guardados

Quedan tres días de prueba

Svelte

<script lang="ts">
	import { Icon } from '@archeblack/ui';
	import { IconAlertTriangle, IconCircleCheck } from '@archeblack/ui/icons';
</script>

<!-- El ícono toma el color del texto que lo rodea. Un estado siempre lleva texto. -->
<p style:color="var(--arche-color-success)">
	<Icon icon={IconCircleCheck} size="sm" /> Cambios guardados
</p>
<p style:color="var(--arche-color-warning)">
	<Icon icon={IconAlertTriangle} size="sm" /> Quedan tres días de prueba
</p>

Props

Props de Icon
Prop	Descripción
`icon` `IconGlyph`	El ícono: un componente de `@archeblack/ui/icons` (los de Tabler), por ejemplo `IconSearch`.
`size?` `'sm' \| 'md' \| 'lg' \| number` Por defecto `'md'`	Talla: `sm` 16 px, `md` 20 px, `lg` 24 px. Las tallas crecen con la fuente del usuario. Un número es un tamaño exacto en píxeles, para ilustraciones fuera de la interfaz.
`label?` `string`	Nombre accesible. Sin `label` el ícono es decorativo; con `label` es una imagen con nombre.
`class?` `string`	Clases del producto; se suman a `arche-icon`.
`...rest` `SVGAttributes`	Cualquier otro atributo va al `<svg>`. El trazo, el color, el rol y el tamaño los fija el componente.

Accesibilidad

Decorativo por defecto: lleva aria-hidden="true" y el texto de al lado es el que nombra la acción o el estado.
Con label tiene role="img" y aria-label. Úsalo cuando el ícono es lo único que comunica, como el estado en una celda de tabla.
En un botón que solo tiene un ícono, el nombre va en el botón (su aria-label), no en el ícono.
Dibuja con currentColor: su contraste es el del texto que lo rodea, y en colores forzados toma el color del sistema.
Las tallas están en rem: crecen si el usuario agranda la fuente del navegador.

Qué evitar

Un SVG suelto o un ícono de Tabler dibujado directamente. Siempre <Icon> con un ícono de @archeblack/ui/icons: así el trazo es 1,5 y la talla es del sistema.
Un ícono solo, o solo color, para comunicar un estado. Ícono y texto juntos. Si el espacio no alcanza, el ícono lleva label.
label en un ícono que ya acompaña a un texto. Déjalo decorativo: el lector de pantalla leería el nombre dos veces.
Tamaños sueltos (size={18}) para acomodar un ícono en un control. Una talla: sm en controles chicos y texto de 13 px, md en la interfaz, lg en títulos.
Pintarlo con stroke, fill o un color fijo. Cambia el color del elemento que lo contiene, con un rol: text-muted, un estado, link.