Icon-Sets im Theme ausliefern und zentral laden
Icons mit Manifest in assets/icons des Themes ablegen, einzelne im Child-Theme ersetzen oder einen zentralen Icon-Ordner per mu-plugin auf jede Website bringen.
Icons in Dateien sind in Git versioniert und gehen mit dem Code auf den Server. Such dir den Ort aus: das Theme oder ein zentraler Ordner für alle Websites.
Schalter
Unter Icons → Funktionen:
- Theme- und Ordner-Quellen: Pflicht für alles auf dieser Seite.
- Mehrere Sammlungen: nötig, damit du diese Icons im WordPress-Icon-Block siehst (ab WordPress 7.1).
easy_svg_icon() in PHP funktioniert schon mit Theme- und Ordner-Quellen allein.
Variante A: im Theme
wp-content/themes/acme/
└── assets/icons/
├── manifest.json
├── phone.svg
└── mail.svg
{
"version": 1,
"slug": "acme",
"label": "ACME Icons",
"icons": {
"phone": { "label": "Telefon", "keywords": ["anrufen", "kontakt"] },
"mail": { "label": "E-Mail", "keywords": ["kontakt"] }
}
}
<?php echo easy_svg_icon( 'acme/phone', array( 'label' => __( 'Ruf uns an', 'acme' ) ) ); ?>
Ohne Manifest heißt die Sammlung theme ("Theme-Icons"), der Aufruf ist dann easy_svg_icon( 'theme/phone' ).
Überschreiben im Child-Theme
wp-content/themes/acme-child/
└── assets/icons/
└── phone.svg
Eine Datei mit demselben Namen im Child-Theme ersetzt das Icon des Eltern-Themes. Alles andere kommt weiter vom Eltern-Theme. Beide bleiben eine Sammlung; label oder slug aus der manifest.json des Child-Themes gewinnen.
Variante B: ein zentraler Ordner für jede Website
Liefer die Icons in einem Must-Use-Plugin aus (oder in deinem eigenen Plugin, per Composer installiert). Zwei Wege, Pro den Ordner zu geben:
<?php
/**
* Plugin Name: Agency icons
*/
defined( 'ABSPATH' ) || exit;
add_filter(
'easy_svg_pro_source_dirs',
static function ( $dirs ): array {
$dirs = is_array( $dirs ) ? $dirs : array();
$dirs[] = __DIR__ . '/agency-icons/brand';
return $dirs;
}
);
Die Sammlung heißt wie slug in agency-icons/brand/manifest.json, sonst wie der Ordner (brand).
<?php
/**
* Plugin Name: Agency icons
*/
defined( 'ABSPATH' ) || exit;
add_action(
'init',
static function (): void {
if ( function_exists( 'easy_svg_register_icon_collection' ) ) {
easy_svg_register_icon_collection( 'agency', 'Agency Icons', __DIR__ . '/agency-icons/brand' );
}
}
);
Die Sammlung heißt immer agency, egal was im Manifest steht. Das Manifest benennt nur die Icons.
wp-content/mu-plugins/
├── agency-icons.php
└── agency-icons/brand/
├── manifest.json
└── *.svg
Lieber ein normales Plugin mit eigener Version? Fang mit dem Icon Pack Starter an.
Woran du siehst, dass es geklappt hat
- Icons → Pakete, Liste Sammlung exportieren: deine Sammlung steht dort mit ihrer Herkunft, zum Beispiel "Theme ACME" (der Name deines Themes) oder "Must-Use-Plugin agency-icons".
wp easy-svg icons listzeigt sie mit der Anzahl der Icons (dafür muss WP-CLI unter Icons → Funktionen an sein).- Die Icon-Auswahl des Icon-Blocks zeigt die Sammlung.
Stolperfallen
- Die Dateien müssen wirklich im Ordner liegen. Ein SVG, das als Symlink aus dem Ordner hinaus zeigt, wird ohne Meldung übersprungen. Kopier die Dateien hinein, statt sie einzeln zu verlinken.
- Grenzen je Ordner: 1000 Icons und 2 MB pro Datei. Die erste hebst du mit dem Filter
easy_svg_pro_source_max_iconsan. Dateien, die Pro nicht nutzen konnte, listetwp easy-svg icons problemsauf, und sie stehen unter der Sammlung in Icons → Pakete. - Umbenennen leert Inhalte. Beiträge und Templates speichern
sammlung/icon. Änderst du später denslugim Manifest oder den Namen im Code, zeigen diese Verweise ins Leere.