Possibility to generate SVG/access body instead of component

[David Siller]

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.

[Joaquín Sánchez]

@taffit adding ?raw is what you need? check #151

[David Siller]

@userquin Exactly something like this! Would be great: still flexible to add every icon, but also to chose in which format. This would fit my needs perfectly!
(I just looked at the code of the merge request, with a lot of code around Vue: I'm on SvelteKit, but I suppose that it would work there as well?)

[Joaquín Sánchez]

@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.

[Joaquín Sánchez]

@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

[David Siller]

@userquin Thanks a lot for the quick response! Fabulous! Exactly and easily and quickly solving the issue! Perfect! Thank you once more!