@vidhill/fortawesome-solid-11ty-shortcode

Eleventy/11ty shortcode.

Allows @fortawesome/free-solid-svg-icons to be embedded as inline svg into 11ty templates.

See solid icon names here: font-awesome-5-solid

1$ npm install @vidhill/fortawesome-solid-11ty-shortcode --save

Setup

Option A: Import as a plugin, shortcodes names are fixed, if you want to name the shortcodes yourself see Option B

1const {
2    fortawesomeSolidPlugin,
3} = require('@vidhill/fortawesome-solid-11ty-shortcode');
4
5module.exports = function (eleventyConfig) {
6    eleventyConfig.addPlugin(fortawesomeSolidPlugin);
7
8    return {
9        // normal eleventy config
10    };
11};

Option B: import the render function so that a custom shortcode name can be defined

1const {
2    fortawesomeSolidShortcode,
3} = require('@vidhill/fortawesome-solid-11ty-shortcode');
4
5module.exports = function (eleventyConfig) {
6    eleventyConfig.addShortcode('fortawesomeSolid', fortawesomeSolidShortcode);
7
8    return {
9        // normal eleventy config
10    };
11};

Usage

Input

1{% fortawesomeSolid 'bell' %}

Output

1<svg
2    aria-hidden="true"
3    focusable="false"
4    data-prefix="fas"
5    data-icon="bell"
6    class="svg-inline--fa fa-bell fa-w-14 "
7    role="img"
8    xmlns="http://www.w3.org/2000/svg"
9    viewBox="0 0 448 512"
10>
11    <path fill="currentColor" d="M165.9 397.4c0....4-2.3-4-3.3-5.6-2z"></path>
12</svg>

Input

Specifying a css class to be added to the svg element

1{% fortawesomeSolid 'bell', "social-icon" %}

Output

1<svg
2    aria-hidden="true"
3    focusable="false"
4    data-prefix="fas"
5    data-icon="bell"
6    class="svg-inline--fa fa-bell fa-w-14 social-icon"
7    role="img"
8    xmlns="http://www.w3.org/2000/svg"
9    viewBox="0 0 448 512"
10>
11    <path fill="currentColor" d="M165.9 397.4c0....4-2.3-4-3.3-5.6-2z"></path>
12</svg>

Multiple css class to be added to they svg by passing a comma separated string:

1{% fortawesomeBrand 'github', "social-icon,unicorn-icon" %}

Development

• Build: npm run build
• Watch build: npm run dev
• Run tests: npm run test
• Watch tests: npm run test:watch