feat: include code snippet in preview comment

[jguddas]

What is the purpose of this pull request?

• New Icon
• Bug fix
• New Feature
• Documentation update
• Other:

Description

It's hard to use the icons before they are release, this change makes early testing and adoption easier.

Before Submitting

• I've read the Contribution Guidelines.
• I've checked if there was an existing PR that solves the same issue.

[jguddas]

Example

Added or changed icons

Preview cohesion

Preview stroke widths

DPI Preview (24px)

Icon X-rays

Icons as code

const AppleIcon = createLucideIcon('Apple', [
  ["path",{"d":"M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z"}],
  ["path",{"d":"M10 2c1 .5 2 2 2 5"}]
])

const BookIcon = createLucideIcon('Book', [
  ["path",{"d":"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"}]
])

[ericfennis]

Cool, can we also wrap this in a details+summary.
Because if we add, change or optimize a whole list for icons we will get a very large list of code examples.

[ericfennis]

Hmm this code example only will only work for packages that uses the createLucideIcon function.
For the packages lucide-angular, lucide-solid, lucide-svelte this will not work.
We should put a text message below it to make that clear.

[jguddas]

Hmm this code example only will only work for packages that uses the createLucideIcon function. For the packages lucide-angular, lucide-solid, lucide-svelte this will not work. We should put a text message below it to make that clear.

Sure, any plans to add createLucideIcon for those packages?

[ericfennis]

@jguddas Unfortunately It's not possible for lucide-svelte, lucide-solid, and lucide-angular maybe. Svelte can only work with .svelte component files.
But I'm working on a general Icon component with support for icon nodes. Which will have support for all packages.