How do you apply a new theme to something like an Image? Most of our icons use SVGs, and in the View...

# compose

[zsperske]

How do you apply a new theme to something like an Image? Most of our icons use SVGs, and in the View world we use attrs & themes to change the theme of our icons from greyscale to destructive or disabled. One SVG -> multiple themes to change the different stroke colors

[Chris Sinco [G]]

For Icon Composables, you can set the tint directly as a parameter, or it pulls from the contentColor ambient by default

[Chris Sinco [G]]

Ambient -> MaterialTheme, CompositionLocal

[zsperske]

We don’t quite use tint, we use “colorways”

[zsperske]

where each icon uses a set of 3 colors

[zsperske]

that we change via an attr

[Chris Sinco [G]]

I see. I’m not sure there’s a straightforward way to do it with the built-in Composables like Image and Icon. You can use Android resources for them though, so the theming information I think can be built in there? But then the color theme info is coming from XML land instead of Compose theming

[Chris Sinco [G]]

The other alternative which is more work is redrawing all the SVGs as Kotlin functions via paths. This is how the Material icons library works in Compose. Then you can control everything very granularly and write higher order functions with parameters to theme things. But you’d need to somehow convert all your icons to Composable Kotlin functions first.

[zsperske]

yeah we have an icon set with 100-200 entries

[zsperske]

so I don’t think that would scale for us

[zsperske]

unless it can be automated

[Chris Sinco [G]]

Yeah we have internal scripts that convert all the Material icons from drawables to Kotlin functions (~5000) but we only run that build script when icons change, which is not often. But that is how the Material icons library is updated.

[zsperske]

Interesting, is that code public? for your first option, we’d basically have to use XML land to get a bitmap and then hand that to the Image? Since all you can feed an Image is a R.drawable.whatever reference right?

[Chris Sinco [G]]

Yes, it’s here: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]otlin/androidx/compose/material/icons/generator/IconParser.kt I don’t fully understand myself but @Louis Pullen-Freilich [G] who is the author may be able to help

[Chris Sinco [G]]

That whole generator directory has everything I think, including the raw drawable icons to convert from

[zsperske]

very cool, thank you Chris!