Crear y usar bibliotecas de iconos SVG

POM Theme tiene dos áreas de iconos relacionadas:

  • Design system → Icons gestiona bibliotecas SVG personalizadas.
  • Design system → Brand → Default icons selecciona iconos compartidos para las acciones del tema.

Crear una biblioteca

  1. Abre Icons.
  2. En SVG Icon Libraries, introduce un Library title.
  3. Selecciona Add library.
  4. En la nueva tarjeta de biblioteca, selecciona Upload SVGs.
  5. Elige uno o más archivos .svg independientes.
  6. Comprueba que cada icono aparezca con el nombre de archivo esperado.

La biblioteca recibe un slug y queda disponible para los selectores de iconos compatibles.

Preparar archivos SVG

Utiliza iconos fiables y creados específicamente para su propósito, con un viewBox adecuado. Mantén nombres de archivo descriptivos y únicos dentro de la biblioteca. Elimina los metadatos incrustados innecesarios y verifica que el icono siga siendo reconocible al tamaño reducido que utilizan los controles.

No subas un SVG procedente de una fuente no fiable sin revisarlo antes.

Seleccionar iconos de interfaz compartidos

En Brand → Default icons, POM ofrece selectores para acciones como teléfono, correo electrónico, dirección, inicio de sesión, compartir, búsqueda, menú, cerrar, reproducir, pausa, descargar, carrito, deslizadores, opciones para compartir en redes sociales y estados de acordeón.

Cambiar uno de estos ajustes afecta a la salida del tema que consume ese icono compartido. Revisa cada contexto relevante después de guardar.

Eliminar con cuidado

El gestor puede eliminar un SVG individual o una biblioteca completa. Antes de eliminar:

  1. sustituye cada selección que utilice el icono o la biblioteca;
  2. guarda los ajustes o componentes afectados;
  3. verifica la salida pública;
  4. elimina únicamente el recurso que no se utiliza.

Eliminar una biblioteca no equivale a ocultarla y puede dejar selecciones existentes sin su icono previsto.

Revisión de accesibilidad

Un icono que comunica una acción necesita un nombre accesible comprensible procedente del enlace o botón que lo rodea. Los iconos decorativos no deben repetir el texto adyacente. No confíes nunca únicamente en la forma o el color de un icono para comunicar un error o una acción destructiva.