11ty Plugin: Feather Icons

This plugin adds a shortcode to your Eleventy project to easily include icons from the Feather Icons collection.

Installation

Install the plugin from npm:

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

Configuration

class - The class attribute to be added to the svg element.
Default: feather feather-x
width - The width attribute to be added to the svg element.
Default: 24
height - The height attribute to be added to the svg element.
Default: 24
stroke - The stroke color attribute.
Default: currentColor
stroke-width - The stroke width attribute.
Default: 2
stroke-linecap - The stroke linecap attribute.
Default: round
stroke-linejoin - The stroke linejoin attribute.
Default: round
fill - The fill attribute.
Default: none

Usage

Add it to your Eleventy Config 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",
        width: 24,
        height: 24,
        stroke: "currentColor",
        "stroke-width": 2
    });
};

Demo

Basic Icons

Custom Attributes

Red stroke:

Thick stroke:

Large (48px):

Filled:

All Icons Sample

License

MIT License