How do you render dynamic HTML or SVG in Qwik?

Question

I get SVG or dynamic HTML from a headless CMS. But I can't render it in Qwik.

In Next.js we would use the dangerouslySetInnerHTML for this purpose.

What is our option in Qwik? I can't find anything in their documentation.

Answer 1

import { component$ } from "@builder.io/qwik";

export default component$(() => (
  <div
    dangerouslySetInnerHTML={`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
</svg>
`}
  ></div>
));

Answer 2

import type { QwikIntrinsicElements } from '@builder.io/qwik'

export function ArrowForwardIcon(props: QwikIntrinsicElements['svg'], key: string) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props} key={key}><path fill="currentColor" d="m12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8l-8-8z"></path></svg>
  )
}
export default ArrowForwardIcon