maximvanhove/fontawesomesvg-php

Add inline SVG Font Awesome icons in PHP

Font Awesome SVG - PHP

A PHP class that can be used to add Font Awesome 5+'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('fas fa-file');

Add custom classes:

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

Remove default class .svg-inline--fa:

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

Change <path> fill (default is currentColor):

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

Add <title></title>:

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

Multiple options at once:

echo $FA->get_svg('fas 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('fad fa-laugh-wink', [
    'primary' => [
        'fill'    => '#e64980',
    ],
    'secondary' => [
        'fill'    => '#fcc417',
        'opacity' => '1',
    ],
]);

Option	What it means
class	Adds classes to the SVG tag
default_class	If set to false, the default CSS class won't be added to the SVG tag. Deafult: true.
inline_style	Whether to add duotone styles as inline style to the <svg> tag. Deafult: true.
title	Adds a <title> inside the SVG tag for semantic icons
title_id	Adds an id attribute to <title> and adds aria-labelledby on the SVG tag with the same value
role	The value of the role attribute in the SVG tag. Default: img
fill	The value of the fill attribute in the <path> inside the SVG. Default: currentColor
primary	Duotone primary options (see table below)
secondary	Duotone secondary options (see table below)

Duotone

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

options

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

Option	What it means
fill	The value of the fill attribute in the <path> inside the SVG. Default: currentColor
opacity	The value of the opacity attribute in the <path> inside the SVG.

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',
    ],
]);

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('fas 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('fas 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('fas fa-file');

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