Íconos

Sprite SVG compartido en assets/symbols.svg. Todos heredan currentColor para que cambien de color según el contexto. Tamaño flexible (de 16px a 64px+).

Catálogo

10 íconos disponibles en v0.1. Agregar nuevos: editar symbols.svg y agregar un <symbol>.

logo

#cis-logo

logo-badge

#cis-logo-badge

dot

#cis-dot

check

#cis-check

warn

#cis-warn

arrow-right

#cis-arrow-right

doc

#cis-doc

user

#cis-user

lock

#cis-lock

network

#cis-network

Tamaños estándar

Los íconos escalan infinitamente (son SVG), pero estos son los tamaños que usamos en la UI:

16px · inline text

20px · buttons

24px · nav items

32px · cards

48px · hero

Uso en React

function Icon({ name, size = 20, className }: {
  name: string;
  size?: number;
  className?: string;
}) {
  return (
    <svg
      width={size}
      height={size}
      className={className}
      aria-hidden="true"
    >
      <use href={`/assets/symbols.svg#cis-${name}`} />
    </svg>
  );
}

// Uso:
<Icon name="check" size={20} className="text-green-600" />
<Icon name="lock" size={16} />
<Icon name="doc" size={32} className="text-gray-500" />

Uso en HTML plano

<svg class="w-5 h-5 text-green-600" aria-hidden="true">
  <use href="/assets/symbols.svg#cis-check"></use>
</svg>