Display SVG with accompanist-coil with Jetpack Compose

There comes a time when you just need to display an SVG file.

Photo by Ehimetalor Akhere Unuabona on Unsplash

In your gradle add the following. The version may be different as of writing this.

//Coil
implementation "com.google.accompanist:accompanist-coil:0.11.1"
implementation "io.coil-kt:coil-svg:1.1.1"

With this we now have the ability to use an SVGDecoder, that we can use in our composables.

Let say we have a link to an SVG.

val weatherIcon = "https://vreme.arso.gov.si/app/common/images/svg/weather/clear_day.svg"

Now we need to define an image loader

val imageLoader = ImageLoader.Builder(LocalContext.current)
    .componentRegistry {
        add(SvgDecoder(LocalContext.current))
    }
    .build()

Then whenever we want to use it we have to pass it to the CompositionLocalProvider. Inside it you define a painter, the rest is classic compose with Image.

CompositionLocalProvider(LocalImageLoader provides imageLoader) {
  val painter = rememberCoilPainter(weatherIcon)
  Image(
      painter = painter,
      contentDescription = null,
      modifier = Modifier.size(200.dp)
  )
  ...  
  ...other composables
}