Add ability to add custom icons

[kujo205]

Package

• lucide
• lucide-angular
• lucide-flutter
• lucide-preact
• lucide-react
• lucide-react-native
• lucide-solid
• lucide-svelte
• lucide-vue
• lucide-vue-next
• Figma plugin
• all JS packages
• site

Description

The problem:

Lucide is a very cool icon library, I like it a lot. It often happens that your designer has created some custom icon, for which you have to come up with some crutches to make it work, code doesn't look unified.

The solution proposed
It would be great if we can crate some wrapper around lucide, in which we would be able to specify some custom svg code, which would then be merged into lucide icons package, which could then be imported in any module

p.s
Not sure about technical details of how can it be achieved, also I'm not if this is already possible in lucide, correct me if I am wrong or haven't looked through all the issues

Use cases

Adding custom icons in the code, which would make code unified

Checklist

• I have searched the existing issues to make sure this bug has not already been reported.

[jguddas]

There already are wrappers.

There are two options:

createLucideIcon

works for lucide-react, lucide-react-native, lucide-preact, lucide-vue-next

1. Go to https://lucide-studio.vercel.app
2. Create your icon
3. Click Share > Copy react code to clipboard

<Icon /> component

works for all libraries

1. Go to https://lucide-studio.vercel.app
2. Create your icon
3. Click Share > Copy data code to clipboard
4. Instead of burger from lab the burger code will be now in the clipboard https://lucide.dev/guide/packages/lucide-react#using-the-icon-component

[kujo205]

Thanks a lot