https://github.com/grimlink/eleventy-plugin-lucide-icons
An Eleventy shortcode, allows lucide-icons to be embedded as inline svg into templates.
https://github.com/grimlink/eleventy-plugin-lucide-icons
11ty 11ty-icons 11ty-plugin eleventy eleventy-icons eleventy-plugin icons
Last synced: 3 months ago
JSON representation
An Eleventy shortcode, allows lucide-icons to be embedded as inline svg into templates.
- Host: GitHub
- URL: https://github.com/grimlink/eleventy-plugin-lucide-icons
- Owner: GrimLink
- License: mit
- Created: 2022-12-31T17:11:02.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-05T08:24:09.000Z (4 months ago)
- Last Synced: 2025-02-05T09:28:51.287Z (4 months ago)
- Topics: 11ty, 11ty-icons, 11ty-plugin, eleventy, eleventy-icons, eleventy-plugin, icons
- Language: JavaScript
- Homepage:
- Size: 124 KB
- Stars: 12
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Eleventy Plugin - Lucide Icons
[](https://www.npmjs.org/package/@grimlink/eleventy-plugin-lucide-icons)
This Eleventy plugin enables the inclusion of lucide-icons as inline SVG elements.
This enables you to use icons to enhance the visual appeal and usability of your website by adding them to your layouts with just a shortcode.
## Installation
First install this plugin with;
```bash
npm install @grimlink/eleventy-plugin-lucide-icons
```
> [!NOTE]
> This supports all 11ty versions starting from version 1
## How to use
Add to Configuration File (Usually .eleventy.js) the following;
```js
import eleventyLucideicons from "@grimlink/eleventy-plugin-lucide-icons";
export default function (eleventyConfig) {
eleventyConfig.addPlugin(eleventyLucideicons,);
}
```
CommenJS syntax (11ty v1 and v2)
```js
const lucideIcons = require("@grimlink/eleventy-plugin-lucide-icons");
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(lucideIcons);
};
```
Advanced usage:
```js
const lucideIcons = require("@grimlink/eleventy-plugin-lucide-icons");
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(lucideIcons, {
"class": "custom-class",
"width": 24,
"height": 24,
"stroke": "currentColor",
"stroke-width": 2
});
};
```
## What does it do?
The plugin turns [11ty shortcodes](https://www.11ty.dev/docs/shortcodes/) like this:
```nunjucks
{% lucide "squirrel" %}
```
into HTML code like this:
```html
```
## Adding options per icon
```nunjucks
{% lucide "shopping-cart", { "stroke": "#1A202C", "stroke-width": "3" } %}
```
### shorthand for width and height
```nunjucks
{% lucide "shopping-cart", { "size": "32" } %}
```