# JPKCom FA inline SVG shortcode — Guide & Tips

> Output inline SVGs from Font Awesome (Pro) v5.15.4 via a WordPress shortcode — installation, Font Awesome setup and practical tips for the [jsvg] shortcode.

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

JPKCom FA inline SVG shortcode loads icons from **Font Awesome (Pro) v5.15.4** as inline SVG and outputs them via a shortcode — fast and resource-efficient, with no webfont or JavaScript loader. Intended for anyone who wants to integrate the Font Awesome SVG-with-JS package into their WordPress site without fuss.

This is not an official Font Awesome plugin and is not directly affiliated with the vendor. Get a Font Awesome or Font Awesome Pro license at <https://fontawesome.com/>.

## Guide

### Requirements

- WordPress **6.9** or newer (tested up to 7.0)
- PHP **8.3** or newer
- Your own copy of **Font Awesome (Pro) v5.15.4** (via your Font Awesome license)
- Multisite is supported (the plugin is network-enabled)

### Installation

1. In your admin panel, go to **Plugins → Add New** and click **Upload Plugin**.
2. Choose the plugin's ZIP file and click **Install Now**.
3. Download your version of **Font Awesome (Pro) v5.15.4** from <https://fontawesome.com/>.
4. Unpack the contents of the Font Awesome archive directly into a folder named `jpkcom_fasvg/` under `wp-content/uploads`.
5. Make sure the following files/folders are present: `wp-content/uploads/jpkcom_fasvg/css/svg-with-js.min.css` and `wp-content/uploads/jpkcom_fasvg/svgs/*`.
6. Click **Activate**.

### Usage

Place the shortcode in your content or in a menu item title:

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

Example:

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

- `type` — the Font Awesome style family (e.g. `fas`, `fal`)
- `name` — the icon name (e.g. `jedi`)
- `style` — optional inline CSS
- `class` — additional CSS classes (e.g. `fa-10x`, `fa-rotate-270`)
- `title` — accessible title of the icon

The shortcode can also be used programmatically via `do_shortcode()`:

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

For more on `do_shortcode()`, see the [WordPress function reference](https://developer.wordpress.org/reference/functions/do_shortcode/).

## Tips & Tricks

- **Icon names map to SVG file names:** The `name` value references the file in the respective style directory under `svgs/`. If the name doesn't match an existing SVG file, nothing is rendered.
- **Security of the `name` attribute:** Since version 2.0.9 the `name` value is sanitized with `sanitize_file_name()`/`basename()` to prevent path traversal — slashes and path segments in the name won't work.
- **Usable in menu titles:** Since the shortcode also works in menu item titles, you can enrich navigation entries with icons.
- **Font Awesome transform classes:** Sizing and rotation utilities like `fa-4x` or `fa-rotate-270` can be passed via the `class` attribute.
- **Reproducible updates:** Since version 2.0.9 the plugin uses secure self-hosted updates via GitHub with SHA256 checksums and runs with `declare(strict_types=1)`.

## Further reading

- Source code on GitHub: <https://github.com/JPKCom/jpkcom-fa-svg-plugin>
- API documentation (PHPDoc): <https://jpkcom.github.io/jpkcom-fa-svg-plugin/docs/>
- Font Awesome (Pro): <https://fontawesome.com/>
- [`do_shortcode()` in the WordPress reference](https://developer.wordpress.org/reference/functions/do_shortcode/)
- [This project's changelog](https://www.jpkc.com/db/en/changelog/jpkcom-fa-svg-plugin/)