Eleventy: tabler icons plugin

NOTE: this treates the outlined variation as the default. To use and install the filled variants, please see @cdransf/eleventy-tabler-icons-filled.

---

Shortcodes to add tabler icons to your Eleventy projects

Get started

Install the package:

npm i -D @cdransf/eleventy-plugin-tabler-icons

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

// .eleventy.js
module.exports = eleventyConfig => {
    eleventyConfig.addPlugin(require('@cdransf/eleventy-plugin-tabler-icons'));
}

Usage

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.

tablericon

Args: name: string, alt?: string

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

Configuration

@cdransf/eleventy-plugin-tabler-icons 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('@cdransf/eleventy-plugin-tabler-icons'), {
        className: 'icon',
        errorOnMissing: true
    });
}

Styling

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.

License

MIT