84 lines
2 KiB
Markdown
84 lines
2 KiB
Markdown
# 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](https://www.npmjs.com/package/@cdransf/eleventy-tabler-icons-filled).
|
|
|
|
---
|
|
|
|
Shortcodes to add [tabler icons](https://tabler-icons.io) to your [Eleventy](https://11ty.dev) projects
|
|
|
|
## Get started
|
|
|
|
Install the package:
|
|
|
|
```sh
|
|
npm i -D @cdransf/eleventy-plugin-tablericons
|
|
```
|
|
|
|
Then add the plugin to your `.eleventy.js` file:
|
|
|
|
```js
|
|
// .eleventy.js
|
|
module.exports = eleventyConfig => {
|
|
eleventyConfig.addPlugin(require('@cdransf/eleventy-plugin-tablericons'));
|
|
}
|
|
```
|
|
|
|
## 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`
|
|
|
|
```md
|
|
{% tablericon "archive" %}
|
|
{% tablericon "x" "Close menu" %}
|
|
```
|
|
|
|
## Configuration
|
|
|
|
`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:
|
|
|
|
```js
|
|
// .eleventy.js
|
|
module.exports = eleventyConfig => {
|
|
eleventyConfig.addPlugin(require('@cdransf/eleventy-plugin-tablericons'), {
|
|
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:
|
|
|
|
```css
|
|
/* 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](./LICENSE)
|