Hi guys! Silly question here :man-raising-hand: I...

# compose

[ste]

Hi guys! Silly question here 🙋‍♂️

I want to make my lineal icons line thickness customizable. There are two possibilities:
1. Craft the icons "by code" using Canvas : compose-like approach, very customizable solution but it will be a pain for complex icons (this is what I'm currently doing)
2. Ship N drawables with different line thickness: not very customizable, increases app size, feels like a waste
3. ???

[cb]

Could you use a variable font instead?

[ste]

Hmm, I don't get how that would help. Let me show an example:

[ste]

@Composable
fun InvertIcon(modifier: Modifier = Modifier) {

    Icon(modifier = modifier.fillMaxSize()) {

        val diagonal = chosenSize * sqrt(2f)

        val circleRadius = diagonal / 4f

        val circle1Center = Offset(
            x = circleRadius + lineSize / 2,
            y = circleRadius + lineSize / 2
        )

        val circle2Center = Offset(
            x = chosenSize - circleRadius - lineSize / 2,
            y = chosenSize - circleRadius - lineSize / 2
        )

        val angle1 = (PI / 3f).toFloat()
        val angle2 = angle1 / 2

        val offset1 = Offset(x = circleRadius * sin(angle1), y = circleRadius * cos(angle1))
        val offset2 = Offset(x = circleRadius * sin(angle2), y = circleRadius * cos(angle2))

        drawCircle(radius = circleRadius, center = circle1Center)

        drawCircle(radius = circleRadius, center = circle2Center)

        drawLine(start = circle1Center + offset1, end = circle2Center - offset2)

        drawLine(start = circle2Center - offset1, end = circle1Center + offset2)
    }
}

This is the code for the following icon (Icon is just a wrapper-helper, chosenSize is the canvas width or height and lineSize is the size (thickness) of the line

[ste]

As you can see, programmatically drawing an icon is quite difficult - and it will be even harder for more complex icon - but i guess this is the only chance have nice customization (line thickness, line color, etc) in a compose-like way... am i correct?

[Nader Jawad]

With the experimental animated vector graphics APIs we have a system that allows for overriding of values that are named within the internal vector asset. This would allow for a single asset that at runtime can have some of their properties changed. This is not exposed publicly yet. Someone else asked a similar question and their solution was to have their vector image rely on theme parameters and dynamically change the theme local whenever they wanted to change the values

[ste]

@Nader Jawad Thanks, I'll wait for those APIs then. Theme local parameters won't help unfortunately!