new svg components

[Kutner JS]

currently we use icomoon as our source of icons. This is bad because:

• 3rd party users will need to embed the icon font for it to work
• it is difficult to update the icon font - need to bust cache by changing the hash, and redeploy our apps.

Why not image url?

• static images increase the number of network requests (which is slower than one batched requests)
• static images CANNOT be colored.

Component driven solution

We can create a react-svg icon component, like so:

function TrashIcon(props: React.SVGProps<SVGSVGElement>) {
    return (
        <svg
            height="1em"
            width="em"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
            {...props}
        >
            <path
                fill="currentColor"
                d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
            />
        </svg>
    );
}

just make sure to:

• set width and height to 1em (so it will be inlined with text)
• set colors to currentColor (so it can be colored at all)

I think we should make one big icon component that will include all our icon set.
Designers will have to tag it / ping the developers to update it.
ESM tree shaking should only include relevant code.

Authoring

We can publish the icons in three levels of granularity:

• Component per icon (inconvenient, needs to install on each icon)
• A couple of icon sets, grouped around a common theme. (<- probably the best option)
• One large component containing all icons (cumbersome, inefficient)