Sistema de iconos y pictogramas

1) El papel de los iconos en el producto

Los iconos son un medio compacto de significado y estado. Aceleran el escaneo, ayudan a ahorrar espacio y aumentan el reconocimiento de patrones. En las interfaces de productos, el icono complementa el texto y el color, en lugar de reemplazarlos.

1. Significado> estilo: cada icono debe tener un escenario de aplicación claro.

2. Consistencia: malla única, trazo, ángulos, ritmo de llenado.

3. Disponibilidad: el icono no es la única señal; siempre hay una firma/tooltip/aria.

4. Rendimiento: una pipeline SVG, sprites y tokens de color/tamaño.

2) Cuadrícula y líneas clave

Artboards básicos: 16 × 16, 20 × 20, 24 × 24 (principal), 32 × 32.
Línea clave (keyline): círculo/cuadrado inscrito con una sangría de 1-2 px para el equilibrio óptico.
Paso de píxel: dibujamos en coordenadas enteras; stroke múltiplo 0. 5 px (normalmente 1. 5 px en 24 × 24).

• Las diagonales «más gruesas» se ven más delgadas - agregue 0. 25 px a stroke en lugares problemáticos.
• Los vértices de las esquinas afiladas son un poco descongelados dentro de la keyline por 1 px para no ser «truenos».
• Las tazas y los puntos a menudo requieren + 1 px al diámetro para una masa visual igual.

Zonas de clic: zona interactiva ≥ 40 × 40 px (móvil), ≥ 32 × 32 px (escritorio); el icono está centrado.

3) Estilo de marcado

• stroke: 1. 5 px (24×24), 1. 25 px (20×20), 1 px (16×16).
• linecap/linejoin: 'round' por amabilidad o 'miter' por estilo técnico (fijamos en gaidline).
• Ángulos de radio en geometría: 2-3 px (en 24 × 24).

Relleno (filled): para áreas densas e iconos de estado.
Doble tono (duotone): se permite para estados vacíos ilustrativos, pero no para señales UI críticas.

• Outline - estado básico.
• Relleno - activo/asignación.
• Two-tone - decorativo/en la ayuda.

4) Color y contraste (WCAG)

El modo básico es monocromático a través de 'currentColor': el icono hereda el color del texto/contexto.

• `icon. error '↔ fondo ≥ 3:1, con texto firmado (no sólo color).
• `icon. on-surface '↔ fondo ≥ 3:1; para tamaños pequeños apuntar a 4. 5:1.
• En los dados de color, use el color «on-» (una selección automática del contraste del sistema de color).

5) Estados e interacciones

Default/Hover/Active/Disabled/Focus: la diferencia no es sólo de color - cambiar opacidad/relleno/espesor/fondo-píldora, añadir focus ring.
Badges (contadores): contraste de dígitos ≥ 4. 5:1 al dado; tamaño dígito ≥ 10-11 px.
Toggle-iconos (favoritos, me gusta): cambiamos el relleno y/o el punto interno, no sólo el color.

6) Icono + texto

Los iconos no reemplazan a las etiquetas en las acciones clave. Par mínimo: icono + texto corto (o tooltip por 'aria-label'). En las listas y tablas, el icono se alinea con la altura del texto y la línea de base.

7) Accesibilidad (A11y)

Para iconos decorativos:' role =» img» aria-hidden =» true»' o quitar del flujo de accesibilidad.
Para los semánticos:' <svg role =» img» aria-labelledby =» id»>' +' <title id = «id «> Descripción </title>' o 'aria-label '.
El icono no debe ser el único medio de estado: agregue texto/sugerencia/patrón iconográfico (forma, trazo).
El tamaño del texto y el contraste de la firma corresponden a WCAG (normal ≥ 4. 5:1).

8) Paipeline SVG y rendimiento

Por qué SVG: claridad vectorial, estilización a través de CSS, peso ligero con optimización.

• Almacenar los archivos maestros en Figma, exportar a SVG con opciones: sin demasiados 'group', sin 'fill-rule' por defecto, con el atributo 'viewBox' y sin fijos 'width/height' (redefinir en CSS).
• Ejecución a través de SVGO (perfil de proyecto): eliminación de metadatos, reducción de coordenadas, combinación de rutas.
• Rechazar fuentes icónicas (icon fonts): problemas de disponibilidad y renderizado.

1. SVG-sprite:

html
<svg style="display:none">
<symbol id="icon-upload" viewBox="0 0 24 24">…</symbol>
</svg>
…
<svg class="i"><use href="#icon-upload"></use></svg>

repeticiones baratas, − no se puede cambiar fácilmente 'stroke-width' en algunos paipelines.
2. Componente en línea SVG: flexibilidad de estilos y props, tree-shaking.
3. External '<img>' - sólo para decorativos/ilustrativos.

css
.i { width: 1em; height: 1em; color: var(--icon-color, currentColor); }
.i--muted { opacity:.64; }
.i--danger { color: var(--role-danger); }

9) La API del componente (ejemplo Nat)

tsx type IconProps = {
name: 'upload'      'download'      'wallet'      'trophy'      'shield'      string;
size?: number      '1em'      'sm'      'md'      'lg';
stroke?: number;       // 1      1. 25      1. 5 title?: string;        // для a11y decorative?: boolean;     // если true -> aria-hidden className?: string;
};

• De forma predeterminada, 'size =' 1em 'y' stroke = 1. 5`.
• Si 'decorative' - agregue 'aria-hidden =' true '.