ไอคอนวัสดุ

คอมโพสิเบิล Icon เป็นวิธีที่สะดวกในการวาดไอคอนสีเดียวบนหน้าจอซึ่งเป็นไปตามหลักเกณฑ์ของ Material Design หากต้องการใช้ Icon ให้ใส่ไลบรารี Compose Material (หรือไลบรารี Compose Material 3)

ตัวอย่างเช่น หากมีองค์ประกอบภาพเวกเตอร์ที่คุณต้องการโหลดด้วยค่าเริ่มต้นของ Material คุณสามารถใช้คอมโพสิเบิล Icon ดังนี้

Icon(
    painter = painterResource(R.drawable.baseline_directions_bus_24),
    contentDescription = stringResource(id = R.string.bus_content_description)
)
MaterialIconsSnippets.kt

โดยค่าเริ่มต้น คอมโพสิเบิล Icon จะมีสี LocalContentColor.current และมีขนาด 24.dp และยังแสดงพารามิเตอร์สี tint ด้วย (ซึ่งใช้ประโยชน์จากกลไกการปรับสีเดียวกันตามที่อธิบายไว้ในส่วนการปรับสีรูปภาพ) คอมโพสิเบิล Icon มีไว้สำหรับใช้กับองค์ประกอบไอคอนขนาดเล็ก คุณควรใช้คอมโพสิเบิล Image เพื่อดูตัวเลือกการปรับแต่งเพิ่มเติม

นอกจากนี้ คลังไอคอน Material ยังมีชุด Icons ที่กําหนดไว้ล่วงหน้าซึ่งใช้ใน Compose ได้โดยไม่ต้องนําเข้า SVG ด้วยตนเอง วิธีวาดไอคอนรถเข็นช็อปปิ้งเวอร์ชันโค้งมน

Icon(
    Icons.Rounded.ShoppingCart,
    contentDescription = stringResource(id = R.string.shopping_cart_content_desc)
)
MaterialIconsSnippets.kt

รูปที่ 1: เวกเตอร์รถเข็นช็อปปิ้งพร้อมไอคอน

โปรดทราบว่าคุณไม่จำเป็นต้องใช้ Icon เพื่อแสดงผล VectorDrawable บนหน้าจอ เบื้องหลัง Icon จะใช้ Modifier.paint(painterResource(R.drawable.ic_bus_stop)) เพื่อวาด Icon บนหน้าจอ ดูข้อมูลเพิ่มเติมเกี่ยวกับไอคอนทั้งหมดที่ใช้ได้ได้ที่เอกสารประกอบเกี่ยวกับไอคอน