CODEWITHSUNDEEP
kotlintypesandroid-jetpack-compose
CodingProfile
CodingProfile

Reputation: 189

Kotlin Jetpack Compose how to pass any icon and its color from outside

How could i pass any icon and icon color from outside? In React Native i would use icon?: React.ReactNode as a prop, but how to do this in Kotlin? Is there a type that allows to pass icon from outside? The code that i have below does not work, but it represents the idea that i want to achieve.

@Composable
fun IconField(
    label: String,
    icon: Boolean? = false, //In React native i would do this like icon?: React.ReactNode
) {
    Row() {
        if(icon)
        Icon(
             contentDescription = "",  
             modifier = Modifier
             .size(16.dp))
        Text(

            text = (label)
        )
    }
}

From outside would want to pass tint and icon from outsie so that i could easily change icons and colors

IconField(label = "Icon Field", icon = Icons.Default.Check, tint = Color.Black, icon = true )

Upvotes: 1

Views: 1702

Answers (1)

Sky
Sky

Reputation: 757

For your particular case you can simply pass icon as nullable argument

@Composable
fun IconField(
    label: String,
    modifier: Modifier = Modifier,
    leadingIcon: ImageVector? = null // You can change ImageVector with Painter or ImageBitmap
    iconTint: Color = MaterialTheme.colors.Black
) {
    Row(modifier = modifier) {
        leadingIcon?.let {
            Icon(
              modifier = Modifier.size(16.dp),
              imageVector = leadingIcon,
              contentDescription = null,
              tint = iconTint
            )
        } ?: Box(Modifier.size(16.dp)) // You can set dummy box for save Text positioning

        Text(text = label)
    }
}

Upvotes: 4

Related Questions