Accessibility support

[adamayres]

Thanks for the lib. I noticed that there is currently no way to add a title or desc element to the rendered svg which is useful for properly supporting accessibility, similar to this request for react-icons.

One option would be to expose the props title and desc on IconProps, something like:

export type IconProps = QwikIntrinsicElements["svg"] & { title?: string; desc?: string };

<SomeIcon title="Some title" desc="Some title" />

Then ensure they're removed from the {...props} before they're spread onto the svg.

Another option might be to allow for named slots, something like:

<SomeIcon>
  <title q:slot="title">Some title</title>
  <desc q:slot="desc">Some desc</desc>
</SomeIcon>

The problem here is that it's more difficult to enforce that the title and desc elements are used for their corresponding named slots, but maybe thats ok.

Seems like in either case it would require a change to the code that generates each icon here:

icons/generate/generate-icons.ts

Lines 93 to 103 in 599bb6c

	const svgElement = optimized
	.match(/<svg[\w\W]*<\/svg>/gm)
	?.toString()
	.replace(">", ` {...props} >`)
	.replace(/<!--.*?-->/g, "");
	const fileContent = [
	`export const ${names.camelCase} = (props) =>`,
	svgElement,
	`;`,
	].join("\n");

I am open to creating a PR with the change, please let me know if there is a preference on an approach.

Related links:

https://css-tricks.com/accessible-svgs/
https://www.w3.org/TR/SVG11/struct.html#DescriptionAndTitleElements
https://www.a11y-collective.com/blog/icon-usability-and-accessibility/