Icons — WebBlocks UI

Verwendung

Das Icon-Sprite ist eine separate Datei: dist/webblocks-icons.svg. Einmal pro Seite mit einem kleinen Inline-Skript laden, danach jedes Icon per ID referenzieren.

1. Sprite laden

<!-- Am Ende von <body> platzieren, nach 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. SVG <use>-Muster

Semantisch, barrierefrei, erbt currentColor für einfaches Theming.

<!-- Standardgröße (20px) -->
<svg class="wb-icon"><use href="#wb-icon-settings"></use></svg>

<!-- Größenvarianten -->
<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 -->

<!-- Mit Farbhelfern -->
<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>

<!-- In einem kreisförmigen Hintergrund eingebettet -->
<span class="wb-icon-wrap">
  <svg class="wb-icon wb-icon-accent"><use href="#wb-icon-bell"></use></svg>
</span>

2b. <i>-Tag-Muster (opt-in)

dist/webblocks-icons.css laden für Bootstrap-ähnliche <i>-Unterstützung via CSS mask-image.

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

<!-- Dann <i>-Tags verwenden (kein Sprite-Fetch nötig) -->
<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>

Zwei Methoden, ein Klassensystem. Die wb-icon-Größen- und Farbhelferklassen funktionieren identisch für SVG <use> und <i>-Tags. Der Sprite-basierte Ansatz wird für semantische Verwendung und bessere Zugänglichkeit empfohlen.

CDN-URLs

<!-- Sprite (erforderlich für <svg><use>-Muster) -->
https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-icons.svg

<!-- Icon-CSS (erforderlich für <i>-Tag-Muster) -->
https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-icons.css

Größen- & Farbklassen

Diese Klassen direkt auf <svg class="wb-icon"> oder <i class="wb-icon"> anwenden.

Größen-Modifikatoren

Klasse	Größe	Verwendung
wb-icon-sm	16px	Inline-Text, Badges, kompakte UI
(Standard)	20px	Schaltflächen, Nav-Elemente, die meisten UI-Kontexte
wb-icon-lg	24px	Überschriften, Karten-Icons, prominente Aktionen
wb-icon-xl	32px	Leere Zustände, Feature-Highlights

Farbhelfer

Klasse	Verwendeter Token	Beschreibung
wb-icon-accent	--wb-accent-text	Akzent-/Markenfarbe
wb-icon-muted	--wb-muted	Gedämpfte, sekundäre Icons
wb-icon-success	--wb-success	Positiv / bestätigt
wb-icon-warning	--wb-warning	Vorsicht / Aufmerksamkeit
wb-icon-danger	--wb-danger	Destruktiv / Fehler
wb-icon-info	--wb-info	Informativ
(keiner)	currentColor	Erbt vom übergeordneten Textelement

Icon-Wrap

<!-- Abgerundeter Container mit accent-soft-Hintergrund -->
<span class="wb-icon-wrap">
  <svg class="wb-icon wb-icon-accent"><use href="#wb-icon-settings"></use></svg>
</span>

<!-- Größenvarianten des Wraps -->
<span class="wb-icon-wrap wb-icon-wrap-sm">…</span>
<span class="wb-icon-wrap wb-icon-wrap-lg">…</span>

Icon-Galerie

Auf ein Icon klicken, um den Schnipsel zu kopieren. Umschalten zwischen <svg><use> und <i>-Format über die Schaltflächen.

133 Icons