compose-resource-conventions

Image Formats

No SVG in Android/CMP compose resources. Use:

• ImageVector for simple icons (settings gear, arrows, navigation icons)
• Lossless WebP for complex icons/UI assets with gradients and shadows
• Lossy WebP (80%) for photos and large images

PNG → WebP Conversion

Resize to 4x the display dp size and convert in one step:

# Lossless for sharp UI assets (e.g., 48dp icon → 192px)
cwebp -lossless -resize 192 192 input.png -o output.webp

# Lossy 80% for photos
cwebp -q 80 -resize 640 640 input.png -o output.webp

Skip resize if the original is already smaller than the 4x target.

SVG → ImageVector

Convert SVG path commands to Compose path commands and create ImageVector.

Icon Naming

Match design name, no ic_ prefix. Create ImageVector via by lazy.

Icon Tint

Icon uses LocalContentColor.current as default tint.

Icon vs Image Sizing

Icon renders at 24.dp by default regardless of the vector's intrinsic dimensions — apply Modifier.size() for non-standard sizes. Image with painterResource also needs explicit Modifier.size.

IconButton Edge Padding

IconButton has 48dp touch target with 12dp internal padding. At screen edges, compensate for the internal padding so the icon aligns with the screen margin.

String Resources

• Always use string resources instead of hardcoded strings.
• Use descriptive names with context: home_title (not title).
• Suffix accessibility descriptions with _content_description.
• Don't reuse strings just because the text is the same — only reuse if semantically connected.
• Use stringResource(Res.string.key, args) for formatted values — %1$d localizes digits, %1$s for strings.
• Never hardcode the app name — use a dynamic source and %1$s placeholders in string resources.

Per-Resource Imports Are Required

Compose Multiplatform's Resources plugin generates each accessor as a top-level extension property in the Res object's package (e.g., Res.string.home_title is <res-package>.home_title). Unlike Android's R.string.* — where importing the R class covers every resource — every CMP accessor needs its own import. Adding a <string> / drawable / font without also adding import <res-package>.<name> in every consumer file produces "Unresolved reference ''" at compile time, which is easy to misdiagnose as a stale resource codegen or Gradle cache problem.

// GOOD — accessor imported alongside the call site
import com.example.app.home_title

stringResource(Res.string.home_title)

// BAD — fails with "Unresolved reference 'home_title'"
stringResource(Res.string.home_title)

When adding a resource and a call site in the same change, scan the consumer file for the existing import <res-package>.<other_resource> lines and add the new one alphabetically.

Apostrophes in Compose Multiplatform

Don't escape apostrophes with \' in Compose Multiplatform string resources — the backslash renders literally (unlike Android resources).

Plural Placeholders Must Be Positional

Compose Multiplatform's string formatter only substitutes positional specifiers (%1$d, %2$s). Bare %d / %s are left as literal text — the UI will render %d items instead of 5 items. This applies to both stringResource and pluralStringResource.

<!-- GOOD -->
<plurals name="item_count">
    <item quantity="one">%1$d item</item>
    <item quantity="other">%1$d items</item>
</plurals>

<!-- BAD — %d renders literally -->
<plurals name="item_count">
    <item quantity="one">%d item</item>
    <item quantity="other">%d items</item>
</plurals>