Iconos — WebBlocks UI

Uso

El sprite de iconos es un archivo separado: dist/webblocks-icons.svg. Cárgalo una vez por página con un pequeño script en línea, luego referencia cada icono por su ID.

1. Cargar el sprite

<!-- Colocar al final de <body>, después de webblocks-ui.js -->
<script>
  fetch('dist/webblocks-icons.svg')
    .then(function(r) { return r.text(); })
    .then(function(svg) {
      var parser = new DOMParser();
      var svgEl = parser.parseFromString(svg, 'image/svg+xml').documentElement;
      svgEl.style.cssText = 'position:absolute;width:0;height:0;overflow:hidden';
      document.body.insertBefore(svgEl, document.body.firstChild);
      if (window.WBTheme) window.WBTheme.sync();
    });
</script>

2a. Patrón SVG <use>

Semántico, accesible, hereda currentColor para theming sencillo.

<!-- Tamaño estándar (20px) -->
<svg class="wb-icon"><use href="#wb-icon-settings"></use></svg>

<!-- Variantes de tamaño -->
<svg class="wb-icon wb-icon-sm"><use href="#wb-icon-settings"></use></svg>  <!-- 16px -->
<svg class="wb-icon wb-icon-lg"><use href="#wb-icon-settings"></use></svg>  <!-- 24px -->
<svg class="wb-icon wb-icon-xl"><use href="#wb-icon-settings"></use></svg>  <!-- 32px -->

<!-- Con helpers de color -->
<svg class="wb-icon wb-icon-accent"><use href="#wb-icon-star"></use></svg>
<svg class="wb-icon wb-icon-muted"><use href="#wb-icon-info"></use></svg>
<svg class="wb-icon wb-icon-success"><use href="#wb-icon-check"></use></svg>
<svg class="wb-icon wb-icon-danger"><use href="#wb-icon-x"></use></svg>

<!-- Envuelto en un fondo circular -->
<span class="wb-icon-wrap">
  <svg class="wb-icon wb-icon-accent"><use href="#wb-icon-bell"></use></svg>
</span>

2b. Patrón de etiqueta <i> (opt-in)

Carga dist/webblocks-icons.css para soporte de etiqueta <i> al estilo Bootstrap via CSS mask-image.

<link rel="stylesheet" href="dist/webblocks-icons.css">

<!-- Luego usar etiquetas <i> (no se necesita fetch del sprite) -->
<i class="wb-icon wb-icon-settings"></i>
<i class="wb-icon wb-icon-sm wb-icon-bell"></i>
<i class="wb-icon wb-icon-lg wb-icon-check wb-icon-success"></i>

Dos métodos, un sistema de clases. Las clases de tamaño y color de wb-icon funcionan de forma idéntica para SVG <use> y etiquetas <i>. El enfoque basado en sprite se recomienda para uso semántico y mejor accesibilidad.

URLs de CDN

<!-- Sprite (requerido para patrón <svg><use>) -->
https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-icons.svg

<!-- CSS de iconos (requerido para patrón de etiqueta <i>) -->
https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-icons.css

Clases de tamaño & color

Aplica estas clases directamente en <svg class="wb-icon"> o <i class="wb-icon">.

Modificadores de tamaño

Clase	Tamaño	Uso
wb-icon-sm	16px	Texto inline, badges, UI compacta
(predeterminado)	20px	Botones, elementos de nav, la mayoría de contextos UI
wb-icon-lg	24px	Encabezados, iconos de tarjetas, acciones prominentes
wb-icon-xl	32px	Estados vacíos, destacados de características

Helpers de color

Clase	Token usado	Descripción
wb-icon-accent	--wb-accent-text	Color de acento/marca
wb-icon-muted	--wb-muted	Iconos secundarios atenuados
wb-icon-success	--wb-success	Positivo / confirmado
wb-icon-warning	--wb-warning	Precaución / atención
wb-icon-danger	--wb-danger	Destructivo / error
wb-icon-info	--wb-info	Informativo
(ninguno)	currentColor	Hereda del texto del elemento padre

Icon Wrap

<!-- Contenedor redondeado con fondo accent-soft -->
<span class="wb-icon-wrap">
  <svg class="wb-icon wb-icon-accent"><use href="#wb-icon-settings"></use></svg>
</span>

<!-- Variantes de tamaño del wrap -->
<span class="wb-icon-wrap wb-icon-wrap-sm">…</span>
<span class="wb-icon-wrap wb-icon-wrap-lg">…</span>

Galería de iconos

Haz clic en un icono para copiar el fragmento. Alterna entre formato <svg><use> y <i> con los botones.

133 iconos