Hi everyone :smiley: Is there a way to change the tint of a VectorAsset : I've also been looking at ...

# compose

[loloof64]

Hi everyone 😃 Is there a way to change the tint of a VectorAsset : I've also been looking at https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/vector/VectorAsset.html. But it seems like impossible 😢

[John O'Reilly]

I have something similar....not sure if it's exactly recommended way but seems to work anyway

Image(asset = vectorResource(R.drawable.ic_bike),
    colorFilter = ColorFilter.tint(if (station.freeBikes() < 5) lowAvailabilityColor else highAvailabilityColor),
    modifier = Modifier.preferredSize(32.dp))

[John O'Reilly]

(from https://github.com/joreilly/BikeShare)

[loloof64]

Thank you very much : I am trying to use it, also combining it with the Material App 😃

[loloof64]

It worked : thank you again 😃

[Louis Pullen-Freilich [G]]

For simple resources that should just have a tint color, you can use Icon instead of Image

[loloof64]

Thank you Louis, I used an Image because I am loading from a VectorResource, built with a svg. But I will use Icon whenever I use simpler use cases 😃

[Alexjlockwood]

@Louis Pullen-Freilich [G] i’d be curious to hear your thoughts on how you would expect non-material design systems to deal with their own icon libraries. in our case there are two somewhat major differences compared to material:

1. some icons should not be tinted (i.e. the google logo)
2. some icons have dark-mode specific variants (mastercard, visa, etc.)
the material library has it somewhat easy because everything is drawn with a single color (even the two-toned icons, which depend on fillAlpha instead)… which makes it pretty easy to create an icon library API that just returns VectorAsset objects. i think once you start introducing multi-colored icons into the mix, you’d probably end up having to create some type of wrapper class containing both the vector asset and the tint (i.e. TintableVectorAsset or something)… that’s my thinking on the subject so far at least…

[Louis Pullen-Freilich [G]]

Yeah, you would probably need / want to create a wrapper class that holds an asset and some other metadata, and then some composable function that consumes that higher level class, there's probably not a nice way to generify this

[Louis Pullen-Freilich [G]]

FWIW we were thinking about the two toned icons - at some point if we were going to expose the second color separately we would probably need something more than just a VectorAsset , but for now it's not that important / requested so we are just leaving it as is