SVG Icon Picker Erweiterung

Q: Wie erstelle ich ein Icon Picker Widget?

'icon' => [ 'inputType' => 'svgIconPicker', 'eval' => [ 'sourceDirectory' => 'files/icons', 'metadataDirectory' => 'files/icons/metadata', 'tl_class' => 'clr' ], 'sql' => 'blob NULL', ], Dabei legst du fest, wo die SVGs liegen und ggf. wo Metadaten liegen.

Q: Was ist die Funktion der Metadaten (icons.json)?

Die Metadaten ermöglichen zusätzliche Informationen wie Labels oder Suchbegriffe („keywords“) für Icons, damit man im Backend einfacher suchen kann. Sie sind optional.

Q: Wohin packe ich meine SVG-Dateien?

In das Verzeichnis, das bei sourceDirectory angegeben ist. Beispiel: files/icons. Die Dateien sollten direkt als einzelne SVG-Dateien vorliegen.

Q: Wie verwende ich das ausgewählte Icon im Frontend?

Es gibt eine Twig-Funktion svg_icon(icon) mit der das Icon in Templates gerendert werden kann.

Q: Welche Vorteile haben SVGs im Vergleich zu Icon Fonts

Flexibilität bei Farben & Effekten: Jedes Icon kann individuell, ggf. sogar nur zum Teil, gefärbt oder animiert werden, z. B. per CSS. Ladezeit: Keine extra Fonts laden, nur einzelne Dateien. Icon-Fonts können unnötige Zeichen enthalten, die nie verwendet werden. Barrierefreiheit: SVGs lassen sich mit title, aria-label oder role="img" besser für Screenreader kennzeichnen. Unabhängigkeit: Änderungen an einem Icon betreffen nur die SVG-Datei; Icon-Fonts erfordern oft das Neu-Generieren der Font. Konsistenz über Plattformen: Unterschiedliche Browser oder Systeme rendern SVGs konsistent; Icon-Fonts können leichte Abweichungen in Form oder Kanten haben.

22.02.2026

111

1.1.0

>= 5.3.0 < 6.0.0

Mit der Contao SVG Icon Picker Erweiterung können Backend-Felder erstellt werden, die eine Auswahl eines SVG-Icons erlauben.

Das gewählte SVG-Icon kann anschließend per Twig Function als Inline SVG im Template ausgegeben werden.

Zur Erweiterung GitHub Repository

Screenshot des SVG Icon Picker Widgets im Contao Backend

Häufige Fragen

Kontakt aufnehmen

Wie erstelle ich ein Icon Picker Widget?

'icon' => [
  'inputType' => 'svgIconPicker',
  'eval' => [
    'sourceDirectory' => 'files/icons',
    'metadataDirectory' => 'files/icons/metadata',
    'tl_class' => 'clr'
  ],
  'sql' => 'blob NULL',
],

Dabei legst du fest, wo die SVGs liegen und ggf. wo Metadaten liegen.

Was ist die Funktion der Metadaten (icons.json)?

Die Metadaten ermöglichen zusätzliche Informationen wie Labels oder Suchbegriffe („keywords“) für Icons, damit man im Backend einfacher suchen kann. Sie sind optional.

Wohin packe ich meine SVG-Dateien?

In das Verzeichnis, das bei sourceDirectory angegeben ist. Beispiel: files/icons. Die Dateien sollten direkt als einzelne SVG-Dateien vorliegen.

Wie verwende ich das ausgewählte Icon im Frontend?

Es gibt eine Twig-Funktion svg_icon(icon) mit der das Icon in Templates gerendert werden kann.

Welche Vorteile haben SVGs im Vergleich zu Icon Fonts

Flexibilität bei Farben & Effekten: Jedes Icon kann individuell, ggf. sogar nur zum Teil, gefärbt oder animiert werden, z. B. per CSS.
Ladezeit: Keine extra Fonts laden, nur einzelne Dateien. Icon-Fonts können unnötige Zeichen enthalten, die nie verwendet werden.
Barrierefreiheit: SVGs lassen sich mit title, aria-label oder role="img" besser für Screenreader kennzeichnen.
Unabhängigkeit: Änderungen an einem Icon betreffen nur die SVG-Datei; Icon-Fonts erfordern oft das Neu-Generieren der Font.
Konsistenz über Plattformen: Unterschiedliche Browser oder Systeme rendern SVGs konsistent; Icon-Fonts können leichte Abweichungen in Form oder Kanten haben.