{"id":268,"date":"2026-08-14T14:01:42","date_gmt":"2026-08-14T12:01:42","guid":{"rendered":"https:\/\/helloblog.io\/de\/eigene-svg-icons-wordpress-7-1\/"},"modified":"2026-08-14T14:01:42","modified_gmt":"2026-08-14T12:01:42","slug":"eigene-svg-icons-wordpress-7-1","status":"publish","type":"post","link":"https:\/\/helloblog.io\/de\/eigene-svg-icons-wordpress-7-1\/","title":{"rendered":"Eigene SVG-Icons in WordPress 7.1 registrieren"},"content":{"rendered":"\n

Eigene SVG-Icons im Block-Editor einzubinden, erforderte lange JavaScript, einen Build-Schritt oder unzuverl\u00e4ssige Behelfsl\u00f6sungen. WordPress 7.1 f\u00fchrt daf\u00fcr eine \u00f6ffentliche API ein: Du registrierst Icons in einem Plugin und verwendest sie im core\/icon<\/code>-Block, in PHP und \u00fcber die REST-API \u2013 ohne JavaScript-Build-Schritt.<\/p>\n\n\n\n

WordPress 7.1 soll am 19. August 2026 erscheinen. F\u00fcr die Entwicklung funktioniert auch der Release Candidate von WordPress 7.1. In dieser Anleitung baust du ein kleines Plugin mit einer Icon-Collection, drei Beispiel-Icons, einer automatischen Registrierung f\u00fcr einen ganzen Ordner und einem Shortcode.<\/p>\n\n\n\n

Das Plugin und seine Voraussetzungen<\/h2>\n\n\n\n

Am Ende enth\u00e4lt dein Plugin die Collection myplugin<\/code>, ein inline registriertes Herz sowie Stern und Lesezeichen aus SVG-Dateien. Au\u00dferdem kannst du jedes SVG in einem Ordner automatisch registrieren, Icons im Inhalt per Shortcode ausgeben und ein Icon als Symbol eines eigenen Blocks einsetzen.<\/p>\n\n\n\n

Du brauchst daf\u00fcr WordPress 7.1 oder neuer, einige SVG-Dateien, eine lokale Entwicklungsumgebung wie LocalWP, WordPress Studio oder wp-env sowie grundlegende PHP-Kenntnisse. Das vollst\u00e4ndige Beispiel-Plugin mit SVG-Dateien, README und der Registrierung f\u00fcr ganze Ordner steht auf GitHub<\/a>.<\/p>\n\n\n\n

Die API: Collections registrieren, Icons ausgeben<\/h2>\n\n\n\n

Die API besteht aus drei Funktionen und Collections als Ordnungsprinzip. Eine Collection ist eine benannte Gruppe von Icons. Jedes Icon muss zu genau einer Collection geh\u00f6ren; deren Name bildet den Pr\u00e4fix des vollst\u00e4ndigen Icon-Namens. Dadurch kollidieren etwa core\/plus<\/code> und myplugin\/plus<\/code> nicht miteinander.<\/p>\n\n\n\n

Die drei Funktionen<\/h3>\n\n\n\n

wp_register_icon_collection( $name, $args )<\/code> registriert eine Collection. Mit wp_register_icon( $name, $args )<\/code> legst du ein einzelnes Icon an. wp_get_icon( $name, $args )<\/code> rendert ein Icon in PHP und gibt dessen SVG als String zur\u00fcck.<\/p>\n\n\n\n

Beim Registrieren eines Icons \u00fcbergibst du das SVG auf eine von zwei Arten: content<\/code> enth\u00e4lt den SVG-Markup direkt als String in PHP, file_path<\/code> verweist auf den absoluten Pfad einer .svg<\/code>-Datei. Verwende pro Icon nur eine dieser Varianten. content<\/code> eignet sich f\u00fcr ein oder zwei Icons, file_path<\/code> skaliert besser f\u00fcr umfangreiche Icon-Bibliotheken in einem Ordner.<\/p>\n\n\n\n

1. Plugin anlegen und Collection zuerst registrieren<\/h2>\n\n\n\n

Lege im Verzeichnis wp-content\/plugins\/<\/code> folgende Struktur an. Die Collection muss bereits existieren, bevor du ihr Icons hinzuf\u00fcgst. Registrierst du ein Icon vorher, erscheint es nicht im Picker, ohne dass WordPress einen sichtbaren Fehler ausgibt.<\/p>\n\n\n\n <\/i><\/span>\n \n Plugin-Struktur<\/span>\n Verzeichnisstruktur<\/span>.<\/span><\/span>\n <\/span>\n <\/i><\/span>\n <\/a>\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span>