Export SVGs directly.

[lgarron]

This issue comes from thewca/worldcubeassociation.org#10526

Icon fonts work fine, but conceptually (and for performance, depending on how things are set up) it would be nicer to allow loading SVGs directly. If we introduce this, I'd like it to:

• Be easy to use on the client (for dynamic apps) using standardized technologies.
• Be easy to use on the server using common runtimes.
• Avoid any proprietary conventions like React.

We'd have to review/resize/lint our SVGs more carefully to support this as well.

I don't have a strong opinion on whether it should be easy to inline the SVG source vs. loading it as an image (or which should even be the default).

One option would be to give each icon its own export, e.g.

• @cubing/icons/svg/official/333
• @cubing/icons/svg/unofficial/222

But I suspect this will not be ergonomic enough for some use cases. Hopefully there's a good convention for this. (Perhaps React is now sufficiently compatible with custom elements?)

[jfly]

Related: #28

I agree with above: I don't want to ship react components here. Let's find a portable, standards compliant way of doing this.

Doing a svg sprite (as described in linked issue) smells reasonable to me if we can't find a better option.

What are popular icon packs doing these days? Still shipping web fonts?

[gregorbg]

I do not have a vast overview of icon packages outside of React, but within that ecosystem https://github.com/react-icons/react-icons is wildly popular.

Their whole build pipeline is basically just a big index of where to find SVG files, and then one (relatively small) snippet of converting a given SVG into a named component export.

I am perfectly fine if you don't ship ready-made React components like they do. That sort of commitment to an ecosystem would feel out of place for your general-purpose icon package. But within the contraints of what we (ideally) need for the main website, I can testify that exporting or otherwise exposing the SVGs to us would be more than enough to easily pack them into our own components.