Include id in "Copy SVG" feature

[tallneil]

Package

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

Description

When I use the Copy SVG feature on lucide.dev, I want the SVG code that is copied to my clipboard to include the icon name as the id attribute.

Use cases

If the SVG has an id with the icon name, when I paste into Figma, this will make it so the layer has the correct name.

Currently, when I paste into Figma, the layer name is unset ("Frame"), and we have to track down the icon name during handoff.

Checklist

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

[karsa-mistmere]

Hi @tallneil,

I'm afraid this would lead to pretty severe unforeseen side effects, as people pasting these into HTML would inevitably encounter DOM validation errors, since a single HTML page may only contain any ID just once.
(And displaying the same icon on a single page multiple times is pretty common, I would say).

Why not use our Figma plugin instead?
https://www.figma.com/community/plugin/939567362549682242/lucide-icons

---

Leaving this open for now, as I'll try to look into whether there's any other feasible way to tell Figma what to name the pasted frames.

[tallneil]

Thanks for the response! I do use the figma plugin, but I prefer browsing the entire library on web. When I find an icon I want to use, I simply copy/paste into Figma rather than launching the plugin.