How to use SVG type ?

[good-dev-student]

Error: Property 'svg' does not exist on type 'JSX.IntrinsicElements'.ts

code:

import * as elements from "typed-html";

export const AddIcon = () => {
  return (
    <svg
      class="inline-block w-7 h-7 fill-[#7F8689] transition-colors group-hover:fill-primary-1 dark:fill-n-4"
      width="24"
      height="24"
      viewBox="0 0 24 24"
    >
      <path d="M12 3a9 9 0 1 1 0 18 9 9 0 1 1 0-18zm0 4.25a.75.75 0 0 0-.75.75h0v3.25H8l-.102.007A.75.75 0 0 0 8 12.75h0 3.25V16l.007.102A.75.75 0 0 0 12.75 16h0v-3.25H16l.102-.007A.75.75 0 0 0 16 11.25h0-3.25V8l-.007-.102A.75.75 0 0 0 12 7.25z"></path>
    </svg>
  );
};

[good-dev-student]

bypass:

export const AddIcon = (): string => {
  return `<svg
  class="inline-block w-7 h-7 fill-[#7F8689] transition-colors group-hover:fill-primary-1 dark:fill-n-4"
  width="24"
  height="24"
  viewBox="0 0 24 24"
>
  <path d="M12 3a9 9 0 1 1 0 18 9 9 0 1 1 0-18zm0 4.25a.75.75 0 0 0-.75.75h0v3.25H8l-.102.007A.75.75 0 0 0 8 12.75h0 3.25V16l.007.102A.75.75 0 0 0 12.75 16h0v-3.25H16l.102-.007A.75.75 0 0 0 16 11.25h0-3.25V8l-.007-.102A.75.75 0 0 0 12 7.25z"></path>
</svg>`;
};


:/

[SamJBarney]

The src/jsx/intrinsic-elements.d.ts file doesn't contain the definitions for any of svg elements unfortunately. Someone would have to create a PR to do that.

[nicojs]

Yes, svg is notably missing. I remember back in the day not having time for it. Feel free to create a PR for it.