Icons as CSS modules are broken

[Matteo Figus]

As we speak, icons (0.1.0) are available as css module in this format:

@value ic-payment: <path .../>;
...

So in short, we export the path only.
When using CSS modules, we can base64 or not:

background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL...")
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://...'")

My proposal is:

1. We export the whole thing so that we can just do

@value ic-payment from 'otkit-icons/token.cssmodules.css';
background-image: url(ic-payment);

2. We don't base64 encode because the full path could give us more opportunities to compress when this will ultimately be a css or js and be gzipped from the cdn when served via http/2

👍 if you agree?

/cc @lastquestion @karuto @antwhite @nickbalestra

[Lin Xu]

I agree with this, in principle.

The main worry I have is that we need to try to make sure any duplicate definitions of icons are minimized or de-duped when we finally bundle all CSS together. I am hoping that gzipping will take care of this since the string text should be identical and gzip will excel at this.

[Matteo Figus]

@lastquestion perhaps this is a simple test we can manually make once this is done (I'm thinking of just simply creating a css module file with multiple duplicates, manually gzipping, and comparing with a file without duplicates and comparing the size)

[Jamie Rolfs]

This may belong elsewhere, or may warrant its own issue, but has there been any discussion of whether we want to consider SVG xlink or inline SVG? We miss out on a lot of the power of SVG when the vector data is loaded like an image more or less.

[Nick Balestra-Foster]

Agree with your proposal Matteo, and as we discussed with design here in London should be ok for now. If in the future we find that we need to support different scenarios, we can re-open it.
Im closing this due to 6 votes,

related ticket is DX-419

[Matteo Figus]

@jrolfs we briefly discussed but decided to go simpler for now.
Please, can you think of any use-case where this engineering choice would affect you? Perhaps with an example.

Thanks 👍

[Jamie Rolfs]

@matteofigus thanks for circling back to address my comment. That makes sense – I'll put together an example. I think the "simpler" compromise here is to target simple inline SVGs instead of using xlink but I'll do a little more research.

FWIW I think this is fine for now, I think an example will illustrate the true power of styling SVG but this is a great first step.