eleventy-plugin-feathericons

An Eleventy shortcode, allows Feather icons to be embedded as inline svg into templates.

Installation

Install the plugin from npm:

npm install eleventy-plugin-feathericons --save-dev

Add it to your Eleventy Config file:

// ESM (Eleventy 3.0+)
import eleventyPluginFeathericons from 'eleventy-plugin-feathericons';

export default function (eleventyConfig) {
    eleventyConfig.addPlugin(eleventyPluginFeathericons);
};

// CommonJS (Eleventy 2.x)
const eleventyPluginFeathericons = require('eleventy-plugin-feathericons');

module.exports = function (eleventyConfig) {
    eleventyConfig.addPlugin(eleventyPluginFeathericons);
};

Advanced usage:

import eleventyPluginFeathericons from 'eleventy-plugin-feathericons';

export default function (eleventyConfig) {
    eleventyConfig.addPlugin(eleventyPluginFeathericons, {
        "class": "feather feather-x",
        "xmlns": "http://www.w3.org/2000/svg",
        "width": 24,
        "height": 24,
        "viewBox": "0 0 24 24",
        "fill": "none",
        "stroke": "currentColor",
        "stroke-width": 2,
        "stroke-linecap": "round",
        "stroke-linejoin": "round",
    });
};

What does it do?

The plugin turns 11ty shortcodes like this:

{% feather "feather" %}

into HTML code like this:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
     class="feather feather-feather feather-x">
    <path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path>
    <line x1="16" y1="8" x2="2" y2="22"></line>
    <line x1="17.5" y1="15" x2="9" y2="15"></line>
</svg>

Custom Usage

With attributes object (Nunjucks)

{% feather "activity", {
    "stroke": "#ff0000",
    "stroke-width": 3
} %}

With extra classes (Liquid/Nunjucks)

{% feather "activity" "my-custom-class" %}

Contributing

If you notice an issue, feel free to open an issue.

1. Fork this repo
2. Clone git clone git@github.com:reatlat/eleventy-plugin-feathericons.git
3. Install dependencies npm install
4. Build npm run build
5. Serve locally npm run dev

Demo

Check out the live demo.

License

The code is available under the MIT license.

Crafted by Alex Zappa at FreshJuice.