SchnellstartIcon-Sets im Theme ausliefern und zentral laden

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).

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 list zeigt 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_icons an. Dateien, die Pro nicht nutzen konnte, listet wp easy-svg icons problems auf, und sie stehen unter der Sammlung in Icons → Pakete.
  • Umbenennen leert Inhalte. Beiträge und Templates speichern sammlung/icon. Änderst du später den slug im Manifest oder den Namen im Code, zeigen diese Verweise ins Leere.