@vidhill/fortawesome-free-regular-11ty-shortcode

    1.0.3 • Public • Published

    @vidhill/fortawesome-regular-11ty-shortcode

    CircleCI

    codecov

    NPM Version

    Eleventy shortcode.

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

    See available icons here: font-awesome-5-regular

    $ npm install @vidhill/fortawesome-free-regular-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

    const {
        fortawesomeFreeRegularPlugin,
    } = require('@vidhill/fortawesome-free-regular-11ty-shortcode');
    
    module.exports = function (eleventyConfig) {
        eleventyConfig.addPlugin(fortawesomeFreeRegularPlugin);
    
        return {
            // normal eleventy config
        };
    };

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

    const {
        fortawesomeFreeRegularShortcode,
    } = require('@vidhill/fortawesome-brands-11ty-shortcode');
    
    module.exports = function (eleventyConfig) {
        eleventyConfig.addShortcode(
            'fortawesomeRegular',
            fortawesomeFreeRegularShortcode
        );
    
        return {
            // normal eleventy config
        };
    };

    Usage

    Input

    {% fortawesomeRegular 'bell' %}

    Output

    <svg
        aria-hidden="true"
        focusable="false"
        data-prefix="far"
        data-icon="bell"
        class="svg-inline--fa fa-bell fa-w-16"
        role="img"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 496 512"
    >
        <path fill="currentColor" d="M165.9 397.4c0....4-2.3-4-3.3-5.6-2z"></path>
    </svg>

    Input

    Specifying a css class to be added to the svg element

    {% fortawesomeBrand 'bell', "social-icon" %}

    Output

    <svg
        aria-hidden="true"
        focusable="false"
        data-prefix="fab"
        data-icon="bell"
        class="svg-inline--fa fa-bell fa-w-16 social-icon"
        role="img"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 496 512"
    >
        <path fill="currentColor" d="M165.9 397.4c0....4-2.3-4-3.3-5.6-2z"></path>
    </svg>

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

    {% fortawesomeBrand 'bell', "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

    Install

    npm i @vidhill/fortawesome-free-regular-11ty-shortcode

    DownloadsWeekly Downloads

    7

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    62.3 kB

    Total Files

    20

    Last publish

    Collaborators

    • avatar