games-icons

Librería de iconos SVG compartida entre el Front (React/Next) y el CMS. Una sola fuente de verdad (350+ iconos monocromo en SVG) que se compila a componentes React, SVGs optimizados y un manifest JSON para consumo sin bundler.

Instalación

npm install games-icons

Uso en React — componente Icon

La vía recomendada para la mayoría de casos: un componente ya resuelto con tamaño y color.

import { Icon } from "games-icons/react";

<Icon name="user" size="lg" title="Perfil de usuario" />

• size: "xs" | "sm" | "md" | "lg" | "xl" → 12/16/20/24/32 px.
• color: acepta cualquier valor CSS, incluida una variable del tema (así se conectan colores semánticos como primary/secondary sin que la librería conozca sus valores):

  <Icon name="user" color="var(--color-primary)" />

• Accesible por defecto: sin title es aria-hidden; con title usa role="img" + aria-label.
• Si name no existe, el componente devuelve null y avisa por console.warn en desarrollo (no rompe el render en producción).

Uso en React — registro crudo ICONS

Para proyectos que ya tienen su propio sistema de diseño (por ejemplo, CSS Modules controlando fill/tamaño por clase) y no quieren la lógica de size/color del componente Icon, el registro de componentes SVG puros (generados vía SVGR) también se exporta:

import { ICONS, type IconName } from "games-icons/react";

function MyIcon({ name, className }: { name: IconName; className?: string }) {
  const Svg = ICONS[name];
  return Svg ? <Svg className={className} /> : null;
}

IconName es la unión literal de todos los nombres de icono disponibles — útil para tipar props propias.

Uso sin React (CMS, selector Razor/.NET, etc.)

El manifest expone metadatos de cada icono, pensado para construir un <select> o un picker propio sin depender de React:

const { icons } = await (await fetch(
  "https://cdn.jsdelivr.net/npm/[email protected]/dist/manifest.json"
)).json();

icons.filter(i => !i.deprecated).forEach(({ name, label, svg }) => {
  // name: valor a guardar (ej. en BD)
  // label: texto legible para mostrar (ej. "Arrow Left", "YouTube")
  // svg: SVG ya optimizado, con currentColor e IDs prefijados por nombre
});

Con bundler, el mismo manifest se puede importar directamente:

import { icons } from "games-icons/manifest";

Cada entrada del manifest tiene: name, label, category, tags, deprecated, preserveColor, viewBox, svg, url.

Versionado

• Añadir iconos nuevos → versión minor.
• Los iconos publicados nunca se renombran ni se borran: se marcan deprecated: true en su lugar. Quitar o renombrar un icono es un cambio major, porque rompe el tipo IconName (unión literal) en builds TypeScript estrictos, aunque no rompa en runtime.
• Fixes de color/optimización sin cambios de API → patch.