Shortcodes to add tabler icons to your Eleventy projects

Install the package:

npm i -D eleventy-plugin-tablericons

Then add the plugin to your .eleventy.js file:

// .eleventy.js
module.exports = eleventyConfig => {
    eleventyConfig.addPlugin(require('eleventy-plugin-tablericons'));
}

This plugin adds the tablericon shortcode.

Note: These examples use Liquid template syntax, which is the default for Eleventy. If you are using another template engine like Nunjucks, the syntax might be slightly different.

Args: name: string, alt?: string

{% tablericon "archive" %}
{% tablericon "x" "Close menu" %}

eleventy-plugin-tablericons offers a few options on a configuration object passed to Eleventy's addPlugin():

• className?: string Adds a class to all tabler icons
• errorOnMissing: boolean (default: false) Throw an error when passed an invalid style/name or invalid attribute

Pass the configuration object when adding the plugin:

// .eleventy.js
module.exports = eleventyConfig => {
    eleventyConfig.addPlugin(require('eleventy-plugin-tablericons'), {
        className: 'icon',
        errorOnMissing: true
    });
}

The svg element receives two data attributes that you can use for styling:

• data-tablericon-name="string"

You could add the following to your stylesheets:

/* Arrow down icon */
[data-tablericon-name="arrow-down"] {
    color: darkgreen;
}

/* All icons */
[data-tablericon-name] {
    padding: 2ch;
}

If you passed a className to the configuration object, then you could use that to select all icons.

MIT