# JPKCom FA inline SVG shortcode — Anleitung & Tipps

> Inline-SVGs aus Font Awesome (Pro) v5.15.4 per Shortcode in WordPress ausgeben — Installation, Font-Awesome-Setup und Praxis-Tipps zum [jsvg]-Shortcode.

Source: https://www.jpkc.com/db/guides/jpkcom-fa-svg-plugin/

JPKCom FA inline SVG shortcode lädt Icons aus **Font Awesome (Pro) v5.15.4** als Inline-SVG und gibt sie über einen Shortcode aus — schnell und ressourcenschonend, ohne Webfont oder JavaScript-Loader. Gedacht für alle, die das SVG-with-JS-Paket von Font Awesome unbürokratisch in ihre WordPress-Seite einbinden wollen.

Das ist kein offizielles Plugin von Font Awesome und steht in keiner direkten Verbindung zum Anbieter. Eine Font-Awesome- bzw. Font-Awesome-Pro-Lizenz bekommst du unter <https://fontawesome.com/>.

## Anleitung

### Voraussetzungen

- WordPress **6.9** oder neuer (getestet bis WordPress 7.1)
- PHP **8.3** oder neuer
- Eine eigene Kopie von **Font Awesome (Pro) v5.15.4** (über deine Font-Awesome-Lizenz)
- Multisite wird unterstützt (das Plugin ist netzwerkfähig)

### Installation

1. Gehe im Admin-Bereich zu **Plugins → Installieren** und klicke auf **Plugin hochladen**.
2. Wähle die ZIP-Datei des Plugins und klicke auf **Jetzt installieren**.
3. Lade deine Version von **Font Awesome (Pro) v5.15.4** unter <https://fontawesome.com/> herunter.
4. Entpacke den Inhalt des Font-Awesome-Archivs direkt in einen Ordner namens `jpkcom_fasvg/` unterhalb von `wp-content/uploads`.
5. Stelle sicher, dass folgende Dateien/Verzeichnisse vorhanden sind: `wp-content/uploads/jpkcom_fasvg/css/svg-with-js.min.css` und `wp-content/uploads/jpkcom_fasvg/svgs/*`.
6. Klicke auf **Aktivieren**.

### Verwendung

Setze den Shortcode in deinen Inhalt oder in einen Menüpunkt-Titel:

```text
[jsvg type="" name="" style="" class="" title=""]
```

Beispiel:

```text
[jsvg type="fal" name="jedi" style="margin:2rem" class="fa-10x" title="Obi-Wan Kenobi"]
```

- `type` — die Font-Awesome-Stil-Familie (z. B. `fas`, `fal`)
- `name` — der Icon-Name (z. B. `jedi`)
- `style` — optionale Inline-CSS-Angaben
- `class` — zusätzliche CSS-Klassen (z. B. `fa-10x`, `fa-rotate-270`)
- `title` — barrierefreier Titel des Icons

Der Shortcode lässt sich auch programmatisch über `do_shortcode()` verwenden:

```php
<?php
echo do_shortcode( '[jsvg type="fas" name="snowboarding" class="fa-4x fa-rotate-270" title="Snowboarding"]' );
```

Mehr zu `do_shortcode()` findest du in der [WordPress-Funktionsreferenz](https://developer.wordpress.org/reference/functions/do_shortcode/).

## Tipps & Tricks

- **Icon-Namen entsprechen den SVG-Dateinamen:** Der `name`-Wert verweist auf die Datei im jeweiligen Stil-Verzeichnis unter `svgs/`. Stimmt der Name nicht mit einer vorhandenen SVG-Datei überein, wird nichts ausgegeben.
- **Sicherheit beim `name`-Attribut:** Seit Version 2.0.9 wird der `name`-Wert mit `sanitize_file_name()`/`basename()` bereinigt, um Path-Traversal zu verhindern — Slashes und Pfadangaben im Namen greifen also nicht. Der Shortcode-Name `[jsvg]` und alle Attribute bleiben unverändert.
- **Callback umbenannt (2.0.16):** Die Shortcode-Funktion hieß bis dahin `jsvg_code()` — als einzige Funktion des Plugins ohne Präfix und ohne `function_exists()`-Schutz. Ein Theme oder Plugin mit demselben Funktionsnamen führte zum Fatal Error. Sie heißt jetzt `jpkcom_fasvg_shortcode()`; `jsvg_code()` bleibt als veralteter Shim erhalten, damit direkter Code weiterläuft. Rufst du die Funktion in eigenem Code auf, zieh den neuen Namen nach.
- **Multisite: Upload-Pfad pro Site (2.0.16):** Pfad und URL des Icon-Ordners wurden bis 2.0.15 einmalig beim Laden der Plugin-Datei aufgelöst. Da das Plugin netzwerkfähig ist und jede Site im Netzwerk ihr eigenes Upload-Verzeichnis hat, zeigte der gemerkte Wert nach einem `switch_to_blog()` auf die falsche Site. Shortcode und Stylesheet lösen den Pfad jetzt pro Aufruf über `jpkcom_fasvg_path()` / `jpkcom_fasvg_url()` auf. Die Konstanten `JPKCOM_FASVG_PATH` und `JPKCOM_FASVG_URL` bleiben aus Kompatibilitätsgründen bestehen.
- **Eindeutige Titel-IDs:** Die `id` des `<title>`-Elements stammt seit 2.0.16 aus `wp_unique_id()` statt aus einer Zufallszahl. Bei mehreren Dutzend Icons mit `title` auf einer Seite war eine Kollision unwahrscheinlich, aber möglich — und eine doppelte `id` bricht `aria-labelledby` still und ist zudem ungültiges HTML.
- **In Menü-Titeln nutzbar:** Da der Shortcode auch in Menüpunkt-Titeln funktioniert, kannst du Navigationspunkte mit Icons anreichern.
- **Transformations-Klassen von Font Awesome:** Größen- und Rotations-Utilities wie `fa-4x` oder `fa-rotate-270` lassen sich über das `class`-Attribut mitgeben.
- **Icons im Block-Editor ab WordPress 7.1:** Der Post-Editor rendert seinen Canvas ab WordPress 7.1 immer in einem iframe. Das Stylesheet hing bis Version 2.0.13 an `enqueue_block_editor_assets` und landete damit nur im umgebenden Admin-Dokument — Icons in der Blockvorschau hätten ihre Font-Awesome-Größenregeln verloren und in Originalgröße gerendert. Seit 2.0.14 hängt es an `enqueue_block_assets` und erreicht beide Kontexte; der nicht-iframete Editor bis WordPress 7.0 verhält sich unverändert. Front-End und Editor teilen sich jetzt das Handle `jpkcom-fasvg-style` — das frühere `jpkcom-fasvg-gutenberg-style` gibt es nicht mehr. Falls du es in eigenem Code dequeued oder als Abhängigkeit angegeben hast, zieh das nach.
- **Reproduzierbare Updates:** Ab Version 2.0.9 nutzt das Plugin sichere, selbst gehostete Updates über GitHub mit SHA256-Prüfsummen und arbeitet mit `declare(strict_types=1)`.

## Weiterführende Informationen

- Quellcode auf GitHub: <https://github.com/JPKCom/jpkcom-fa-svg-plugin>
- API-Dokumentation (PHPDoc): <https://jpkcom.github.io/jpkcom-fa-svg-plugin/docs/>
- Font Awesome (Pro): <https://fontawesome.com/>
- [`do_shortcode()` in der WordPress-Referenz](https://developer.wordpress.org/reference/functions/do_shortcode/)
- [Changelog dieses Projekts](https://www.jpkc.com/db/changelog/jpkcom-fa-svg-plugin/)