Íconos en Jetpack Compose Glimmer

Dispositivos XR aplicables

Esta guía te ayuda a crear experiencias para estos tipos de dispositivos de XR.

Más información sobre los tipos de dispositivos XR →

Más información sobre los tipos de dispositivos XR →

En Jetpack Compose Glimmer, el componente Icon está diseñado específicamente para renderizar íconos de un solo color. Icon puede aceptar ImageVector, ImageBitmap o Painter como fuente. Icon, similar a Text, puede aplicar de forma inteligente un tinte según el tema de la IU circundante. Si bien, de forma predeterminada, se establece un tamaño proporcionado por LocalIconSize, también puedes establecer tamaños de íconos personalizados.

Ejemplo: Crea una caja con un ícono de estrella grande

@Composable
fun GlimmerIconSample() {
    GlimmerTheme {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_star),
                    contentDescription = "A star icon from Google Symbols",
                    modifier = Modifier.size(GlimmerTheme.iconSizes.large),
                    tint = GlimmerTheme.colors.primary
                )
            }
        }
    }
}

Puntos clave sobre el código

• La fuente del ícono carga un elemento de diseño vectorial en XML local (R.drawable.ic_star) con painterResource, lo que demuestra el enfoque recomendado para integrar íconos en una IU de Glimmer de Jetpack Compose sin la sobrecarga de una biblioteca externa.
• El tamaño del ícono se personaliza configurando GlimmerTheme.iconSizes.large con un modificador, lo que demuestra cómo anular el tamaño predefinido de Glimmer de Jetpack Compose.
• El color de tinte del ícono se personaliza configurando GlimmerTheme.colors.primary con el parámetro de tinte, lo que aplica un tinte de ícono de un solo color para lograr coherencia visual.