DevForge

SVG to Jetpack Compose

Compose draws vectors through ImageVector.Builder and a small path DSL. Transcribing an icon into it by hand is tedious and easy to get subtly wrong, because every numeric literal in that DSL has to carry an f suffix or it will not compile. This emits the builder, the path calls and the imports.

svg
jetpack compose
options
target
preview

Paste or drop an SVG to preview it.

how to use it

  1. 01Paste SVG markup or drop an .svg file.
  2. 02Name the vector.
  3. 03Copy the Kotlin, including the import block at the top.

questions

Why does every number end in f?
The path DSL takes Float, and Kotlin does not widen an integer literal to Float automatically. A missing suffix is a compile error.
Can I tint the icon?
If the source uses currentColor, the output takes a tint parameter. Otherwise the colors are baked in as written.
Are the imports included?
Yes, and only the ones actually used by the generated code.

related