Vektr is a tool for converting Material icons
.xml
files (Android Vector Drawable) into the code
in a way Material icons are delivered with Jetpack Compose / Compose Multiplatform.
This tool basically parses icon XML file, parses path data of icon and splits it into
separate path elements and finally generates .kt file containing path drawing instructions.
Example of generated file
package com.github.trueddd.ui.res.icons.map
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.materialPath
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.unit.dp
@Suppress("UnusedReceiverParameter")
val Icons.Rounded.Map: ImageVector
get() {
if (savedMap != null) {
return savedMap!!
}
savedMap = ImageVector.Builder(
name = "Map",
defaultWidth = 24.dp,
defaultHeight = 24.dp,
viewportWidth = 24f,
viewportHeight = 24f,
)
.materialPath {
moveTo(14.65f, 4.98f)
lineToRelative(-5.0f, -1.75f)
curveToRelative(-0.42f, -0.15f, -0.88f, -0.15f, -1.3f, -0.01f)
lineTo(4.36f, 4.56f)
curveTo(3.55f, 4.84f, 3.0f, 5.6f, 3.0f, 6.46f)
verticalLineToRelative(11.85f)
curveToRelative(0.0f, 1.41f, 1.41f, 2.37f, 2.72f, 1.86f)
lineToRelative(2.93f, -1.14f)
curveToRelative(0.22f, -0.09f, 0.47f, -0.09f, 0.69f, -0.01f)
lineToRelative(5.0f, 1.75f)
curveToRelative(0.42f, 0.15f, 0.88f, 0.15f, 1.3f, 0.01f)
lineToRelative(3.99f, -1.34f)
curveToRelative(0.81f, -0.27f, 1.36f, -1.04f, 1.36f, -1.9f)
verticalLineTo(5.69f)
curveToRelative(0.0f, -1.41f, -1.41f, -2.37f, -2.72f, -1.86f)
lineToRelative(-2.93f, 1.14f)
curveToRelative(-0.22f, 0.08f, -0.46f, 0.09f, -0.69f, 0.01f)
close()
moveTo(15.0f, 18.89f)
lineToRelative(-6.0f, -2.11f)
verticalLineTo(5.11f)
lineToRelative(6.0f, 2.11f)
verticalLineToRelative(11.67f)
close()
}
.build()
return savedMap!!
}
private var savedMap: ImageVector? = null
There is a lot of Material icons that are not included into androidx.compose.material.icons
package,
and in order to use them you have to either import them as resource or parse path data in runtime.
Both these approaches are valid, but I wanted new icons easy to modify and compile-time checked.
Run downloaded or locally built jar file on the terminal:
java -jar vektr.jar <arguments>
Here is the list of available arguments:
Name | Value | Required | Example | Description |
---|---|---|---|---|
Input file | in |
true | --in=./search_24px.xml |
Defines the source XML file |
Output directory | out |
true | --out=./dir/ |
Defines the directory where generated file will be placed |
Name of icon | n , name |
false | --name=Search |
The icon name, if not specified name of input file will be used |
Output file name | f , file |
false | --file=RoundedSearch |
Name of file where generated code will be saved. If not specified, name of icon will be used |
Package name | p , package |
false | --package=com.github.trueddd |
Package name for the generated file |
Icon style | s , style |
false | --style=Outlined |
Icon style that will be used as Icon receiver type. Must be one of these: Outlined , Rounded , TwoTone , Sharp , Filled . |
Auto mirror | a |
false | -a (flag) |
Generate this icon as auto mirrored |
Use path data builder | pd |
false | -pd (flag) |
Use path data builder instead of materialPath function (not recommended) |
For example, sample code hidden in spoiler was generated with following command:
java -jar vektr.jar --name=Map --file=Rounded --package=com.github.trueddd.ui.res.icons.map --style=Rounded --in=./rounded_map_24px.xml --out=./
Run following command on terminal to build jar.
gradlew build
Optionally, you can create local.properties
file in root folder and set path
where you want jar to be placed after build:
target_path=<path>
Here is planned tasks for this project, but do not hesitate to offer some changes or features via issues.
- Move code composing into common module
- Add web app for online file conversions
- Reduce jar size
- Use downloaded zip archives as conversion source (currently only XML files are supported)
- Use Material icon URL as conversion source