Dein Paket bauen

Den Icon Pack Starter umbenennen, deine SVGs hinzufügen, sie in manifest.json beschreiben und das Plugin auf jeder Website mit Easy SVG Pro installieren.

Diese Anleitung bringt dich von den Starter-Dateien zu einem fertigen Icon-Paket-Plugin, installiert auf einer Website. Plane für dein erstes Paket etwa 20 Minuten ein.

Bevor du loslegst

Du hast die Dateien des Icon Pack Starter (einen Ordner namens easy-svg-icon-pack-starter).
Deine Icons liegen als SVG-Dateien bereit, eine Datei pro Icon. Einfache, einfarbige Icons funktionieren am besten.
Ein Texteditor, zum Beispiel VS Code oder Notepad++.
Eine Test-Website mit Easy SVG Pro, aktiver Lizenz und eingeschalteten Theme- und Ordner-Quellen.

Was steckt im Starter?

easy-svg-icon-pack-starter/
├── easy-svg-icon-pack-starter.php   die Plugin-Datei
├── icons/
│   ├── manifest.json                die Liste der Icons
│   ├── circle.svg                   Beispiel-Icon
│   ├── square.svg                   Beispiel-Icon
│   └── triangle-up.svg              Beispiel-Icon
└── readme.txt

Bauen

Plugin umbenennen

Gib dem Paket einen eigenen Namen, damit es nicht mit anderen Paketen kollidiert. Benenne drei Dinge gleich um, zum Beispiel in acme-icons:

den Ordner: acme-icons/
die Hauptdatei: acme-icons.php
die Zeile Plugin Name: oben in dieser Datei, zum Beispiel Plugin Name: Acme Icons

Icons hinzufügen

Lösche die drei Beispiel-SVGs in icons/ und leg deine eigenen Dateien hinein. Nimm Dateinamen in Kleinbuchstaben mit Bindestrichen, zum Beispiel front-door.svg. Der Dateiname wird zum Namen des Icons.

In manifest.json beschreiben

Öffne icons/manifest.json und pass sie an dein Paket an (siehe unten). Setze mindestens deinen eigenen slug und dein eigenes label.

Den Block für große Pakete entfernen, wenn nicht nötig

Die Hauptdatei enthält einen Block mit easy_svg_pro_source_max_icons. Hat dein Paket weniger als 1000 Icons, lösche diesen Block.

Zippen und installieren

Zippe den Ordner (das ZIP muss den Ordner acme-icons enthalten). Gehe auf der Website zu Plugins → Plugin hinzufügen → Plugin hochladen, installiere und aktiviere es.

Ergebnis prüfen

Gehe zu Icons → Pakete. Deine Sammlung steht dort mit ihrer Herkunft, zum Beispiel "Plugin Acme Icons". Konnten Dateien nicht genutzt werden, stehen sie mit Grund darunter.

Deine Icons erscheinen jetzt in Icons → Icon-Bibliothek unter ihrer Sammlung und überall sonst, wo Easy SVG Pro Icons anbietet.

Das Manifest

manifest.json nennt Easy SVG Pro den Namen der Sammlung und gibt jedem Icon eine lesbare Bezeichnung. Es ist eine kleine Textdatei im JSON-Format: geschweifte Klammern, Namen in doppelten Anführungszeichen, Kommas zwischen den Einträgen.

{
  "version": 1,
  "slug": "acme-icons",
  "label": "Acme Icons",
  "license": "GPL-3.0-or-later",
  "author": "Acme Agentur",
  "source": "https://example.com/acme-icons",
  "icons": [
    { "file": "front-door.svg", "name": "front-door", "label": "Haustür", "keywords": ["eingang", "tür"] },
    { "file": "window.svg", "name": "window", "label": "Fenster" }
  ]
}

Feld	Was hinein gehört
`version`	Immer `1`. Das ist das Format des Manifests, nicht die Version deines Pakets.
`slug`	Die Adresse der Sammlung, kleingeschrieben mit Bindestrichen. Icons heißen dann `acme-icons/front-door`.
`label`	Der Name der Sammlung, den Menschen sehen.
`name`	Der Adressteil des Icons. Kleinbuchstaben, Zahlen, Bindestriche und Unterstriche, Anfang und Ende ein Buchstabe oder eine Zahl. Ein ungültiger Name wird übersprungen und gemeldet.
`label` (pro Icon)	Der Name des Icons, den Menschen sehen.
`keywords`	Wörter, die bei der Suche helfen, optional.
`license`, `author`, `source`	Wer die Icons gemacht hat und unter welcher Lizenz. Wird auf dem Bildschirm Pakete gezeigt.

Ein Manifest beschreibt den Ordner, es beschränkt ihn nicht. Eine SVG ohne Eintrag erscheint trotzdem, benannt nach ihrer Datei.

Wähle Namen mit Bedacht. Templates zeigen auf ein Icon als acme-icons/front-door. Änderst du einen name später, zeigt jede Seite mit dem alten Namen nichts mehr.

Wie Easy SVG Pro den Ordner findet

Ändern musst du hier nichts, aber es hilft, das zu wissen. Die Hauptdatei übergibt Easy SVG Pro den Ordner mit einem Filter:

add_filter( 'easy_svg_pro_source_dirs', static function ( $dirs ): array {
	$dirs   = is_array( $dirs ) ? $dirs : array();
	$dirs[] = __DIR__ . '/icons';
	return $dirs;
} );

Pakete mit mehr als 1000 Icons

Easy SVG Pro liest höchstens 1000 Icons aus einem Ordner, damit Websites schnell bleiben. Ein größeres Paket wird gekürzt, und der Bildschirm Pakete nennt, was fehlt. Behalte den Block in der Hauptdatei und setze die Zahl auf das, was dein Paket wirklich enthält:

add_filter( 'easy_svg_pro_source_max_icons', static fn( $max ): int => max( (int) $max, 1400 ) );

Zum Vergleich: Allein der Solid-Stil von Font Awesome Free hat etwa 1390 Icons.

Gut zu wissen

Umriss-Icons behalten ihre Konturen, mit einem aktuellen Easy SVG Support auch im WordPress-Icon-Block.
Nimm currentColor als Farbe in deinen SVGs, damit Icons der umgebenden Textfarbe folgen.
Keine symbolischen Links. Leg die echten Dateien in den Ordner. Links, die aus ihm herausführen, werden abgelehnt.
Zwei Pakete mit demselben slug überschreiben sich nicht. Easy SVG Pro gibt dem zweiten einen anderen Namen, und der Bildschirm Pakete zeigt ihn.
Paket aktualisieren. Ändere die Dateien, erhöhe die Zeile Version: in der Hauptdatei und installiere das neue ZIP. Namen, die du behältst, bleiben gültig.

Häufige Fragen

Passende Anleitungen

Icons von Dritten ausliefern

Lizenzen und Namensnennung.

Icon-Pakete

Pakete als ZIP, ohne Plugin.

Für Entwickler: Das Manifest, easy_svg_pro_source_dirs und easy_svg_pro_source_max_icons.

Was this page helpful?