2726 svg text icons

[lriggle-strib]

Resolves: #2726

Description

Update SVG icons to use <text> elements for the letters instead of pathing the letter shapes. This allows size/font/etc to be adjusted in accordance with the styling/theme being developed, so icons are easier to read/identify and are more accessible.

Out of the box, icons now look like this:

The definition for an icon goes from looking like:

    [ReflectionKind.Accessor]: () =>
        kindIcon(
            <path
                d="M8.85 16L11.13 7.24H12.582L14.85 16H13.758L13.182 13.672H10.53L9.954 16H8.85ZM10.746 12.76H12.954L12.282 10.06C12.154 9.548 12.054 9.12 11.982 8.776C11.91 8.432 11.866 8.208 11.85 8.104C11.834 8.208 11.79 8.432 11.718 8.776C11.646 9.12 11.546 9.544 11.418 10.048L10.746 12.76Z"
                fill="var(--color-text)"
            />,
            "#FF4D4D",
            true,
        ),

to

    [ReflectionKind.Accessor]: () =>
        kindIcon(
            <text
                fill="var(--color-icon-text)"
                font-family="var(--icon-font-family)"
                font-size="var(--icon-font-size)"
                font-weight="var(--icon-font-weight)"
                font-style="var(--icon-font-style)"
                x="6.5"
                y="17.5"
            >
                A
            </text>,
            "var(--color-ts-accessor)",
            true,
        ),

Additional Changes

• Font family/size/weight/style are adjustable on each text icon
  • css properties for --icon-font-family, --icon-font-size, --icon-font-weight, --icon-font-style added to control those values
• Outline colors on multiple icons set to the --color-ts-xyz value rather than a hard coded color code
  • --color-ts-xyz properties that did not use the same color code as the hard coded icon updated to use that code
• Fill color on icons changed from --color-text to --color-icon-text to allow the icons to be managed independently of the text on the page.
• The following properties were being used in the stylesheet but not defined. Their definitions have been added
  • --color-comment-tag-text, --color-comment-tag, and --color-ts-project
• Use of --color-ts-type-literal removed, as there are comments earlier in the stylesheet explicitly stating it is not being defined for a reason
• Removed extra white-space property in pre tag style definition.
• Removed extraneous 0 from the end of the margin-top property in .site-menu style definition
• Css property for --color-ts-reference defined and used in icon definition

[Gerrit0]

Thanks! I decided to address the comments I left as I want to push a release before avoiding touching a computer for a few days.

[lriggle-strib]

@Gerrit0 Sure thing, thanks for the help!