11ty Plugin: Phosphor Icons

npm npm license

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

Installation

Install the plugin from npm:

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

Configuration

• class - The class attribute to be added to the svg element.
  Default: phicon
• style - The style attribute to be added to the svg element.
  Default: undefined
• size - The width and height attribute to be added to the svg element.
  Default: 256
• fill - The fill attribute to be added to the svg element.
  Default: currentColor
• width - The width attribute to be added to the img element.
  taken from the size attribute
• height - The height attribute to be added to the img element.
  taken from the size attribute
• render - The render method allows you to render icon as inline svg or image.
  Default: svg, other options: image or img
• transformClass - A CSS class that you want to map using a callback function transformFill.
  Default: false
• transformFill - A callback function that allows you to transform the fill attribute based on the transformClass attribute.
  Default: undefined

If render is set to image or img, the following attributes can be used:

• alt - The alt attribute to be added to the img element.
  Default: altPrefix + iconName
• altPrefix - The alt attribute prefix to be added to the img element.
  Default: icon
• loading - The loading attribute to be added to the img element.
  Default: lazy
• decoding - The decoding attribute to be added to the img element.
  Default: async
• eleventyIgnore - The eleventyIgnore attribute to be added to the img element to prevent @11ty/eleventy-img plugin from processing the image.
  Default: true

Usage

Add it to your Eleventy Config 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"
    });
};

Using transformFill callback function

May be useful if you using a CSS framework like Tailwind CSS, Bootstrap, etc. and you want to map the fill attribute to the text color classes.

TailwindCSS usage example:

const eleventyPluginPhosphoricons = require('eleventy-plugin-phosphoricons');
const resolveConfig = require('tailwindcss/resolveConfig.js')
const tailwindConfig = require('tailwind.config.js')

const fullConfig = resolveConfig(tailwindConfig)
module.exports = function (eleventyConfig) {
    eleventyConfig.addPlugin(eleventyPluginPhosphoricons, {
        class: "phicon",
        style: "vertical-align: middle;",
        size: 32,
        fill: "currentColor",
        transformFill: (color) => {
            const [baseColor, shade] = color.replace('text-', '').split('-');
            return shade ? fullConfig.theme.colors[baseColor][shade] : fullConfig.theme.colors[baseColor]['DEFAULT'];
        }
    });
};

Demo

SVG Example

SVG example contains 16 child elements.

Image Example

Image example contains 7 child elements.

Why render icons as an image?

Rendering icons as images can help to avoid an excessive DOM size. This can be useful when you have a lot of icons on a page, or when you want to avoid the overhead of rendering SVGs in the DOM.

>Note: rendered icons as image, can't get the same color as the text color.

License

MIT License

---