docs: Correct casing for icon imports in Vanilla examples

[Cirrous]

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 on the website contains a small typo regarding icon imports in Vanilla JS projects.

Currently, the example shows the icon imported in lowercase, which throws an error because Lucide exports icons using PascalCase:

<script>
import { createIcons, pencil } from 'lucide'; // Throws an error

createIcons({
  icons: {
    pencil
  }
});
</script>

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

To make the import work:

<script>
import { createIcons, Pencil } from 'lucide'; //  pencil --> Pencil

createIcons({
  icons: {
    Pencil // pencil --> Pencil
  }
});
</script>

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

Steps to reproduce

See above

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.)

[lethargistic]

it does? on which page?

[epifaniofrancisco]

I can't reproduce this issue.

[Cirrous]

it does? on which page?

On every page, I'm using a Mac with the Vivaldi and Firefox browsers. Though I don't think it has anything to do with the casing in your code examples, I'm attaching a screenshot for reference.