README

A PHP class that can be used to add Font Awesome 6+'s SVG icons inline without Javascript.

Installation

You can install it using Composer:

composer require husseinalhammad/fontawesome-svg

Or you can download the FontAwesomeSVG.php file and include it manually.

Usage

Files

• Download Font Awesome (Free or Pro)
• Get the folder advanced-options/raw-svg and place it in your project
• Add svg-with-js/css/fa-svg-with-js to your document (or write your own CSS)

Examples

// $dir = directory where SVG files are
$FA = new FontAwesomeSVG($dir);

echo $FA->get_svg('fa-solid fa-file');

Add custom classes:

echo $FA->get_svg('fa-solid fa-file', ['class' => 'my-custom-class another-class']);

Remove default class .svg-inline--fa:

echo $FA->get_svg('fa-solid fa-file', ['default_class' => false]);

Change <path> fill (default is currentColor):

echo $FA->get_svg('fa-solid fa-file', ['fill' => '#f44336']);

Add <title></title>:

echo $FA->get_svg('fa-solid fa-file', ['title' => 'My accessible icon']);

Multiple options at once:

echo $FA->get_svg('fa-solid fa-file', [
    'class' => 'my-custom-class another-class',
    'default_class' => false,
    'title' => 'My title',
    'role' => 'img',
    'fill' => '#ffffff',
]);

Customise duotone icons:

echo $FA->get_svg('fa-duotone fa-laugh-wink', [
    'primary' => [
        'fill'    => '#e64980',
    ],
    'secondary' => [
        'fill'    => '#fcc417',
        'opacity' => '1',
    ],
]);

Duotone

Requires v5.10.0 or greater, and a FontAwesome Pro license

Sharp

Requires v6.4.0 or greater, and a FontAwesome Pro license

echo $FA->get_svg('fa-sharp fa-light fa-file');
echo $FA->get_svg('fa-sharp fa-regular fa-file');
echo $FA->get_svg('fa-sharp fa-solid fa-file');

options

If inline_style is enabled, the value of fill and opacity are also used in the inline style on <svg> tag.

Examples:

Single colour:

echo $FA->get_svg('fad fa-laugh-wink', [
    'fill' => '#e64980',
]);

Swapping Layer Opacity:

echo $FA->get_svg('fad fa-laugh-wink', [
    'fill'  => '#e64980',
    'class' => 'fa-swap-opacity',
]);

Single colour with custom opacity:

echo $FA->get_svg('fad fa-laugh-wink', [
    'fill' => '#e64980',
    'secondary' => [
        'opacity' => '0.2',
    ],
]);

Custom colours and opacity:

echo $FA->get_svg('fad fa-laugh-wink', [
    'primary' => [
        'fill'    => '#e64980',
        'opacity' => '0.5',
    ],
    'secondary' => [
        'fill'    => '#fcc417',
        'opacity' => '1',
    ],
]);

Aliases

The short aliases from version 5 are still supported

echo $FA->get_svg('fab fa-twitter');
echo $FA->get_svg('fad fa-file');
echo $FA->get_svg('fal fa-file');
echo $FA->get_svg('far fa-file');
echo $FA->get_svg('fas fa-file');

// And the new shorthands for thin and sharp
echo $FA->get_svg('fat fa-file'); // thin
echo $FA->get_svg('fasl fa-file'); // sharp-light
echo $FA->get_svg('fasr fa-file'); // sharp-regular
echo $FA->get_svg('fass fa-file'); // sharp-solid

Accessibility

The below is implemented based on:

• Font Awesome's Accessibility docs
• Heather Migliorisi's article on CSS-Tricks Accessible SVGs

role attribute

role="img" is added to the SVG tag by default:

<svg role="img"></svg>

<title>, aria-labelledby

You can set a <title>, an id for the <title> and the aria-labelledby attribute will be added automatically:

echo $FA->get_svg('fa-solid fa-file', [
    'title' => 'File',
    'title_id' => 'file-id',
]);

<svg aria-labelledby="file-id">
  <title id="file-id">File</title>
</svg>

aria-* attributes

You can add any aria-* attribute to the SVG tag:

echo $FA->get_svg('fa-solid fa-file', [
    'aria-label' => 'File',
]);

<svg aria-label="File"></svg>

aria-hidden attribute

aria-hidden="true" is added to the SVG tag by default unless <title id=""> (and aria-labelledby) or aria-label is set.

echo $FA->get_svg('fa-solid fa-file');

<svg aria-hidden="true"></svg>