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: 4 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 (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-10-07T19:17:59.000Z (4 months ago)
• Last Synced: 2024-10-10T13:21:37.544Z (4 months ago)
• Topics: 11ty, 11ty-icons, 11ty-plugin, eleventy, eleventy-icons, eleventy-plugin, icons
• Language: JavaScript
• Homepage:
• Size: 93.8 KB
• Stars: 11
• 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

[![NPM version](https://img.shields.io/npm/v/@grimlink/eleventy-plugin-lucide-icons)](https://www.npmjs.org/package/@grimlink/eleventy-plugin-lucide-icons)

![license](https://img.shields.io/github/license/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

This eleventy plugin requires;

- Eleventy v1.0.0 or higher

First install this plugin with;

```bash

npm install @grimlink/eleventy-plugin-lucide-icons

```

## How to use

Add to Configuration File (Usually .eleventy.js) the following;

```js

const lucideIcons = require("@grimlink/eleventy-plugin-lucide-icons");

module.exports = function(eleventyConfig) {

  eleventyConfig.addPlugin(lucideIcons);

};

```

Advanced usage:

```js

const lucideIcons = require('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 "shopping-cart" %}

```

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" } %}

```