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

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

implementation ""
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 = ""

Now we need to define an image loader

val imageLoader = ImageLoader.Builder(LocalContext.current)
.componentRegistry {

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)
painter = painter,
contentDescription = null,
modifier = Modifier.size(200.dp)
...other composables

Sometimes you just need to secure your localhost in order to test some stuff, like OAuth for example.

Create certificate

Creating a certificate for localhost is easy with openssl . Just put the following command in the terminal. The output will be two files: localhost.key and localhost.crt

openssl req -x509 -out localhost.crt -keyout localhost.key \
-newkey rsa:2048 -nodes -sha256 \
-subj '/CN=localhost' -extensions EXT -config <( \
printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

Click on the crt file, on macOS the keychain app will open, add the key to it.

Now double click on it and under the trust section you will see “When using this certificate” select “Always Trust”.


Now in Next.js we have to create our own server.js file if not already.

Run the server, you now have a secure connection to localhost.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store