CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-jetpack
Chinmay
Chinmay

Reputation: 494

How to load svg images in compose properly?

I am trying to load SVG file in Jetpack compose, but it turned out to be black when i run it on the phone.

enter image description here

Here is the image from my phone.

enter image description here

I don't want to use tint modifier, because it is going to load the SVG in a single color.

Upvotes: 5

Views: 19666

Answers (2)

thilina Kj
thilina Kj

Reputation: 1413

You can use painterResource with tint option to tint a vector. It will not cover whole svg in one color.

Icon(
    painter = painterResource(id = R.drawable.ic_crop_square),
    contentDescription = "Localized description",
    modifier = Modifier
        .size(AssistChipDefaults.IconSize),
    tint = color,
)

Result:

enter image description here

Upvotes: 4

Jakoss
Jakoss

Reputation: 5235

Use Image composable instead of Icon. Icon is doing tint by default. Source - you can read the docs for Icon.

Icon component that draws [imageVector] using [tint], defaulting to [LocalContentColor].

Also - you can just use painterResource instead of ImageVector.vectorResource.

And just for the future - never attach code as a screenshot on StackOverflow. Just attach code

Upvotes: 21

Related Questions