eleventy-plugin-emoji

🎈 An accessible emoji shortcode and filter for your Eleventy projects

Use

Install this package with your favorite manager:

npm i eleventy-plugin-emoji

Then add it to your project's .eleventy.js configuration:

// .eleventy.js
module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(require("eleventy-plugin-emoji"));
};

Finally, use the emoji shortcode or filter:

This is a shortcode with a label: {% emoji "☝️", "finger pointing to the sky" %}

This is a shortcode with no label: {% emoji "✌️" %}

And this is a filter (no label): {{ "🤟" | emoji }}

How

The shortcode and filter take an emoji and optional label (shortcode only) and wrap it in a containing element with the appropriate accessibility attributes.

For emoji shortcuts with a label, the default output is:

<!-- {% emoji "🐵", "monkey face" %} -->
<span aria-label="monkey face" class="11ty-emoji" role="img">🐵</span>

For emoji shortcuts without labels or filters, the default output is:

<!-- {% emoji "🙈" %} or {{ "🙈" | emoji }} -->
<span aria-hidden="true" class="11ty-emoji" role="img">🙈</span>

This follows the pattern recommended by Léonie Watson and used by various accessibility validators.

Options

There are two options to configure eleventy-plugin-emoji:

To configure the plugin, pass an object with the any of the above keys to Eleventy's addPlugin() function:

eleventyConfig.addPlugin(require('eleventy-plugin-emoji'), {
    element: 'i',
    className: 'emoji'
})

The output from the previous configuration would be:

<!-- {% emoji "⚙️", "settings gear" %} -->
<i aria-label="settings gear" class="emoji" role="img">⚙️</i>

License

MIT