Package

• lucide
• lucide-angular
• lucide-flutter
• lucide-preact
• lucide-react
• lucide-react-native
• lucide-solid
• lucide-svelte
• lucide-vue
• lucide-vue-next
• Figma plugin
• source/main
• other/not relevant

Version

0.402.0

Can you reproduce this in the latest version?

• Yes
• No

Browser

• Chrome/Chromium
• Firefox
• Safari
• Edge
• iOS Safari
• Opera
• Other/not relevant

Operating system

• Windows
• Linux
• macOS
• ChromeOS
• iOS
• Android
• Other/not relevant

Description

The documentation says that the way to use Lucide Lab custom icons in vanilla JS is with the following code:

<i data-lucide="burger"></i>

import { createIcons } from 'lucide';
import { burger } from '@lucide/lab';

createIcons({
  icons: {
    burger,
  },
});

When I do that, I see the following error in the console:

<i data-lucide="burger"></i> icon name was not found in the provided icons object.

I have got it to work, but by using the following code to wrap the iconNode data, so that it matches the format that you'd get when importing an icon from the main Lucide package:

function icon(iconNode) {
  return [
    "svg",
    {
      "xmlns": "http://www.w3.org/2000/svg",
      "width": 24,
      "height": 24,
      "viewBox": "0 0 24 24",
      "fill": "none",
      "stroke": "currentColor",
      "stroke-width": 2,
      "stroke-linecap": "round",
      "stroke-linejoin": "round"
    },
    iconNode,
  ];
}

createIcons({
  icons: {
    Burger: icon(burger)
  }
});

Assuming that I'm not doing something wrong, and that this is how to get Lucide Lab icons working in vanilla JS, I don't know if it's worth updating the documentation to include this?

Or, alternatively, may I suggest a feature to update createIcons to perform the transforms automatically if it detects bare iconNode data with no SVG wrapper.

Steps to reproduce

See the following CodePen: https://codepen.io/jamiemlaw/pen/poXoWjd/3b4db0e038ed7e644a2e58fca8c55906

Checklist

• I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)