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:

const eleventyPluginFeathericons = require('eleventy-plugin-feathericons');

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

Advanced usage:

const eleventyPluginFeathericons = require('eleventy-plugin-feathericons');

module.exports = 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

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

Contributing

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

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

License

The code is available under the MIT license.

May the 4th be with you