eleventy-plugin-phosphoricons

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

Installation

Install the plugin from npm:

npm install eleventy-plugin-phosphoricons --save-dev

Add it to your Eleventy Config file:

const eleventyPluginPhosphoricons = require('eleventy-plugin-phosphoricons');

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

Advanced usage:

const eleventyPluginPhosphoricons = require('eleventy-plugin-phosphoricons');

module.exports = function (eleventyConfig) {
    eleventyConfig.addPlugin(eleventyPluginPhosphoricons, {
        class: "phicon",
        style: "vertical-align: middle;",
        size: 32,
        fill: "currentColor"
    });
};

What does it do?

The plugin turns 11ty shortcodes like this:

{% phosphor "phosphor-logo" %}

or

{% phicon "phosphor-logo" %}

into HTML code like this:

<svg xmlns="http://www.w3.org/2000/svg" 
     viewBox="0 0 256 256" 
     fill="currentColor" 
     class="phicon"
     style="vertical-align: middle;"
     width="32" height="32">
    <path d="M144,24H64a8,8,0,0,0-8,8V160a80.09,80.09,0,0,0,80,80,8,8,0,0,0,8-8V168a72,72,0,0,0,0-144ZM72,62.54,122.32,152H72Zm56,66.92L77.68,40H128ZM72.51,168H128v55.5A64.14,64.14,0,0,1,72.51,168ZM144,152V40a56,56,0,0,1,0,112Z"></path>
</svg>

Custom Usage

{% phicon "phosphor-logo", "duotone", { 
    style: "color:red" 
    size: 64,
    class: "phicon bg-blue"
} %}

Contributing

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

1. Fork this repo
2. Clone git clone [e-mail]:reatlat/eleventy-plugin-phosphoricons.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.