How do I use Astro Icon in client components without duplicating them ?

[wooden condor]

I'm using Astro Icon to use icons in my Astro pages. My icons are SVGs stored in src/icons. How can I use them in a client component ? When I try and use the Icon component from Astro Icon it tells me that it cannot be used in a client component.

I'd like to be able to inline SVGs just like Astro Icon does, but in a client component (in Svelte for example).

[plush crag]

Hey Thomas, You will have to use Iconify since Astro Icon is a icon system made for Astro projects

[wooden condor]

can I use Iconify in Astro pages too ?

[plush crag]

I have not used but Unplugin Icons are up for that task
additional resource (it involved react but should be similar with svelte as well) : https://www.launchfa.st/blog/react-astro-unplugin-icons

[wooden condor]

all right thank you for your help

[potent bolt]

yes you can just use the web component version of iconify, which is rendered in shadow dom rather than how Astro Icons does it which is basically SVG in HTML

https://iconify.design/docs/iconify-icon/

[devout sluice]

You could also just render the svg with an img tag

[wooden condor]

I know but with inlined svgs I can easily control the color and the size (with css classes for example)