# 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 7.0)
- 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.
- **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.
- **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/)