Replace mask-image with Compound icons and component (when they became ready)

[luixxiul]

Your use case

What would you like to do?

Replace mask-image on CSS files with Compound icons and component, when they became ready.

Why would you like to do it?

Because Compound stuff is widely believed to save the design, magically or not :-D

How would you like to achieve it?

Have you considered any alternatives?

No response

Additional context

[weeman1337]

I would rather say „Replace mask-imag with Comound Icons“ …

[luixxiul]

Are those "Compound icons" going to be implemented by using Icon component? If so, it should be fine to start replacing existing mask-image declarations, if not all, so that you will able to start using the Compound icons just by changing from values.

Thanks!

[weeman1337]

My guess is that there will be some kind of component. The current Icon component in Element Web / React SDK is based on Webpack SVG loader: https://github.com/matrix-org/matrix-react-sdk/blob/develop/docs/icons.md

Most likely the Compound component is going to be different. Compound doesn't currently expose much about icons: https://compound.element.io/?path=/story/compound-web_icon--icon

I would recommend looking at this again when the compound symbols are ready.

[weeman1337]

→ I will mention that we should make more information about Compound publicly available!

[luixxiul]

I understood. As the uncertainty around that area can be removed only by internal members, please update asap when something becomes clearer. Thanks in advance.

[luixxiul]

For reference, the current set has been added with matrix-org/matrix-react-sdk#10292.

[weeman1337]

For reference, the current set has been added with matrix-org/matrix-react-sdk#10292.

That was me doing some clean-up. I didn't know that the padding should be included in each of the icons instead of adding it by a CSS class. These were all icons that I had newly added.