eleventy-plugin-emoji v1.1.0
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:
Shortcode with label: {% emoji "βοΈ", "finger pointing to the sky" %}
Shortcode without label: {% emoji "βοΈ" %}
Filter with label: {{ "π€" | emoji: "spider-man hand" }}
Filter without label: {{ "π" | emoji }}
Note: These filter examples use Liquid, the default markdown rendering engine for Eleventy. If you are using Nunjucks, the syntax is slightly different:
<!-- Nunjucks syntax for filter arguments -->
{{ "βοΈ" | emoji("taking notes") }}
How
The shortcode and filter take an emoji and optional label, and wrap it in a containing element with the appropriate accessibility attributes.
For emoji with a label, the default output is:
<!-- {% emoji "π΅", "monkey face" %} or {{ "π΅" | emoji: "monkey face" }} -->
<span aria-label="monkey face" class="eleventy-emoji" role="img">π΅</span>
For emoji without labels, the default output is:
<!-- {% emoji "π" %} or {{ "π" | emoji }} -->
<span aria-hidden="true" class="eleventy-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
:
Option | Default | Explanation |
---|---|---|
element | span | The element that will wrap the emoji symbol |
className | eleventy-emoji | A class applied to the wrapping element |
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>