JPKCom DB
View on GitHub (opens in a new tab)

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.

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/ (opens in a new tab).

Guide

Requirements

  • WordPress 6.9 or newer (tested up to WordPress 7.1)
  • 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/ (opens in a new tab).
  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:

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

Example:

[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
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 (opens in a new tab).

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. The shortcode name [jsvg] and all its attributes are unchanged.
  • Callback renamed (2.0.16): The shortcode function used to be jsvg_code() — the only function in the plugin without a vendor prefix and without a function_exists() guard. Any theme or plugin declaring that name caused a fatal redeclare error. It is now jpkcom_fasvg_shortcode(); jsvg_code() remains as a deprecated shim so code calling it directly keeps working. If you call the function from your own code, move to the new name.
  • Multisite: per-site upload path (2.0.16): Up to 2.0.15 the icon folder's path and URL were resolved once while the plugin file was being included. The plugin is network-capable and each site in a network has its own upload directory, so the captured value pointed at the wrong site after a switch_to_blog(). The shortcode and the stylesheet now resolve per call through jpkcom_fasvg_path() / jpkcom_fasvg_url(). The constants JPKCOM_FASVG_PATH and JPKCOM_FASVG_URL stay for backwards compatibility.
  • Unique title IDs: Since 2.0.16 the id of the <title> element comes from wp_unique_id() instead of a random number. With a few dozen titled icons on one page a collision was unlikely but possible — and a duplicate id silently breaks aria-labelledby and is invalid HTML.
  • 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.
  • Icons in the block editor from WordPress 7.1 on: The post editor always renders its canvas in an iframe from WordPress 7.1. Up to version 2.0.13 the stylesheet was hooked to enqueue_block_editor_assets and therefore only reached the surrounding admin document — icons in a block preview would have lost their Font Awesome sizing rules and rendered at intrinsic size. Since 2.0.14 it hooks enqueue_block_assets and reaches both contexts; the non-iframed editor up to WordPress 7.0 behaves exactly as before. Front end and editor now share the handle jpkcom-fasvg-style — the former jpkcom-fasvg-gutenberg-style is gone. If your own code dequeued it or named it as a dependency, update that.
  • 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). Since 2.0.17 it also carries the Update URI header: the wordpress.org update API then no longer returns updates for this plugin, so a plugin published there under the same slug cannot pose as an update. Since 2.0.18 Dashboard → Updates shows the JPKCom logo next to the plugin.
  • Updates even while deactivated: Since 2.0.19 (updater 1.5.0) the plugin is offered updates even when it is deactivated — provided another JPKCom plugin with updater 1.5.0 or newer is active. Its updater answers the update check for all installed JPKCom plugins, with the update row, icon and “View details”, and the SHA256 check applies exactly as for an active plugin. On multisite at least one JPKCom plugin must be network-active or active on the main site. Also since 2.0.19: the stored update list no longer contains JPKCom download URLs, the updater adds them back only while it is loaded; the checksum is also verified for a package supplied by another plugin, and for every GitHub address of the release file. If the plugin sits in a Git or other VCS checkout or in a renamed folder, WordPress shows the new release but offers no update package and refuses the download (for a renamed folder, while the plugin is active) — the update would delete the checkout or the folder. A deactivated plugin in a renamed folder is not recognised by the updater at all, so you are not told about new releases either. Update such installations by hand, for example with git pull. The updater fetches update information only for users who can update plugins, in the update cron and in WP-CLI, never for anonymous visitors.

Further reading