Support g tag inside svgs when creating a custom icon for a custom theme

[FlippieCoetser]

Search Terms

• Theming
• Icons
• SVG

Background

When using and svg for an icon, it is not uncommon for an svg to contain a g tag to group related shapes or paths.
Below is an example of two circles grouped inside a g:

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <g fill="white" stroke="black" stroke-width="1">
    <circle cx="10" cy="8" r="6" />
    <circle cx="15" cy="15" r="6" />
  </g>
</svg>

In the default TypeDoc theme, the icons are svgs with a rect and a path.
Here is an extract of a path currently used for ReflectionKind.Enum:

<path
  d="M9.45 16V7.24H14.49V8.224H10.518V10.936H14.07V11.908H10.518V15.016H14.49V16H9.45Z"
  fill="var(--color-text)"
/>

Problem

It is not currently possible to switch the path segment out for a g with, for example, two circles.

Suggested Solution

TypeDoc IntrinsicElements properties related to svg does not include g , link

I may miss something but an extension to IntrinsicElements should provide the needed capability.

[Gerrit0]

Resolved by #2259