Fragments supporting dangerouslySetInnerHTML

Is your feature request related to a problem?

Currently seems like this is not possible:

// const icon = '<svg ...>'
<Fragment dangerouslySetInnerHTML={icon}></Fragment>

Type '{ dangerouslySetInnerHTML: string; }' is not assignable to type 'IntrinsicAttributes & { children?: any; }'.
  Property 'dangerouslySetInnerHTML' does not exist on type 'IntrinsicAttributes & { children?: any; }'.ts(2322)

Describe the solution you’d like

<Fragment> should accept dangerouslySetInnerHTML like other elements

Describe alternatives you’ve considered

Using spans everywhere

Additional context

No response

[manucorporat]

I will keep an eye open, but this is specially tricky in qwik because of the serialization requirements, and update after ssr. Thanks for the issue, but i will close since we will not implement this anytime soon

[Nefcanto]

@manucorporat since you mentioned you wouldn’t be implementing this soon, what is our alternative?

We are considering migrating to Qwik + Qwik City from React + Next for our entire company and all projects.

We’re testing one project for migration and now we’re stuck at this.

In Next, we get data from a headless CMS. Inside this data, there is SVG tags. So SVG tags are not available at build time. We receive them from API.

In React, we could use:

                    <div
                        className="[&>*]:text-icon w-[55px] aspect-square group-hover:-scale-x-100 transition-all duration-500 "
                        dangerouslySetInnerHTML={{ __html: item.iconSvg }}
                    />

This way, we could print the SVG using React and style it using Tailwind.

What should we do to migrate this code to Qwik + Qwik City?