Possibility to generate SVG/access body instead of component

Hello,

and first of all: thank you for this wonderful software which leverages the usage of the already marvellous iconify even more.

I have a problem currently, where I need to use the icons in the JavaScript-code of a SvelteKit-application in order to generate some html. However I couldn’t find any possibility to easily generate the SVG out of an imported icon. Instead I get a ProxyComponent. I guess that I could switch the compiler-setting to 'none' or 'raw', but as I am using the icons in 100 different places as icon-components, I can’t just turn it off.

I scanned the documentation multiple times and also took a look at the sources and methods of the ProxyComponent, but couldn’t find a way to generate the SVG or access the body/data of the icon. Is there a method I just missed? As said, I use it in a lot of Svelte-components to load icons.

The (simplified) usage I imagine would be as follows (instead I’m currently just saving the whole SVG as string):

import IonSearchIcon from '~icons/ion/search';

let searchIcon = `<div><svg>${IonSearchIcon.body}</svg></div>`;

// Some further processing

Could you help me put me on the right path?

Again, thanks a lot for the library, it simplified my development a lot.

[userquin]

@taffit I’ll add an example on svelte/sveltekit examples (also for each fw)

EDIT: using for example {@html} https://github.com/antfu/unplugin-icons/pull/166/files#diff-bef351e1c884739a05a30bf3534e87f0de0ae52e9745b29651dfde86ef6403e0R17

[userquin]

@taffit I only add the raw compiler, since you can use only one compiler from configuration options, and none will be only usable from internal compilers.

Yes, the example is on vue3 example but you can also apply the same code to your svelte/sveltekit sfc, the iimport will just export the svg icon as default, so you can use it where you want.

EDIT: you can check for example the custom compiler added on vite-svelte example here: https://github.com/antfu/unplugin-icons/blob/main/examples/vite-svelte/vite.config.js#L21. You can manipulate the svg and use it as you want.