Prefer previewing via Icon over Image

[Goooler]

• ImageVectors are typically used for simple icons, which are preferably displayed using Icon.
• And the current image preview in my project is totally a white screen, it seems to be a bug here? Icon works well as it contains a default tint.

[Goooler]

Explain the second part a bit:

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.StrokeJoin
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.path
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

val Gmail: ImageVector
    get() {
        if (_Gmail != null) {
            return _Gmail!!
        }
        _Gmail = ImageVector.Builder(
            name = "Gmail",
            defaultWidth = 192.dp,
            defaultHeight = 192.dp,
            viewportWidth = 192f,
            viewportHeight = 192f
        ).apply {
            path(
                fill = SolidColor(Color(0x00000000)),
                stroke = SolidColor(Color(0xFF000000)),
                strokeLineWidth = 12f,
                strokeLineJoin = StrokeJoin.Round
            ) {
                moveTo(22f, 57.26f)
                verticalLineTo(142f)
                arcToRelative(10f, 10f, 0f, false, false, 10f, 10f)
                horizontalLineToRelative(18f)
                arcToRelative(6f, 6f, 0f, false, false, 6f, -6f)
                verticalLineTo(95.06f)
                lineToRelative(40f, 30.28f)
                lineToRelative(40f, -30.28f)
                verticalLineTo(146f)
                arcToRelative(6f, 6f, 0f, false, false, 6f, 6f)
                horizontalLineToRelative(18f)
                arcToRelative(10f, 10f, 0f, false, false, 10f, -10f)
                verticalLineTo(57.26f)
                curveToRelative(0f, -13.23f, -15.15f, -20.75f, -25.68f, -12.74f)
                lineTo(96f, 81.26f)
                lineTo(47.68f, 44.53f)
                curveTo(37.15f, 36.52f, 22f, 44.03f, 22f, 57.26f)
                close()
            }
        }.build()

        return _Gmail!!
    }

private var _Gmail: ImageVector? = null

@Preview(showBackground = true)
@Composable
private fun GmailPreview() {
    Box(modifier = Modifier.padding(12.dp)) {
        Image(imageVector = Gmail, contentDescription = null)
    }
}

[egorikftp]

Thanks for PR, but I have several concerns about changes 🙂

ImageVectors are typically used for simple icons, which are preferably displayed using Icon.

This statement not always works. For example, on my side project I have tinted icons and icons with predefined color.

https://github.com/grodnoroads/GrodnoRoads/blob/1.3.0/kmp/compose/foundation/icons/src/commonMain/kotlin/com/egoriku/grodnoroads/foundation/icons/GrodnoRoads.kt

In this case I decided to generate preview as Image, to see original color.

Secondly, different Icon imports.
If you use Material: androidx.compose.material.Icon
Material 3: androidx.compose.material3.Icon

It will require additional input from user to choose correct one.
I will think how it can be improved in next versions 🙂

---

And the current image preview in my project is totally a white screen, it seems to be a bug here? Icon works well as it contains a default tint.

I checked your case and it looks like issue. To fix it you need to remove fill = SolidColor(Color(0x00000000)) due to it unnecessary (also preview works with Image)

Fix: #30

[Goooler]

Thanks for the response! Seems the real issue could be fixed in #30, I'm closing this for now.

Image is much more compatible than Icon, it's would be better to stick on it.