Awesome
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.
- Fork this repo
- Clone
git clone git@github.com:reatlat/eleventy-plugin-feathericons.git - Install dependencies
npm install - Build
npm run build - Serve locally
npm run dev
License
The code is available under the MIT license.