svg-icon-compose
0.1.1indexedRender SVG icons in Compose with compile-time code generation, type-safe DSL for SVG creation, animated presets and path-morphing, symbol/use support, and runtime SVG parsing.
2
Stars
—
Used by
dependents
—
Health
/ 100
SVG Icon Compose
A Kotlin Multiplatform library for rendering SVG icons in Compose Multiplatform applications with compile-time code generation.
Supported Platforms
| Platform | Support |
|---|---|
| Android | ✅ |
Installation
Release Version
In your settings.gradle.kts:
pluginManagement {
repositories {
google()
mavenCentral()
gradlePluginPortal()
}
}
In your build.gradle.kts:
plugins {
id("io.github.fuyuz.svgicon") version "0.1.0"
}
kotlin {
sourceSets {
commonMain.dependencies {
implementation("io.github.fuyuz.svgicon:runtime:0.1.0")
}
}
}
Snapshot Version
For the latest development version, add the snapshot repository:
In your settings.gradle.kts:
pluginManagement {
repositories {
google()
mavenCentral()
gradlePluginPortal()
maven("https://central.sonatype.com/repository/maven-snapshots/")
}
}
dependencyResolutionManagement {
repositories {
google()
mavenCentral()
maven("https://central.sonatype.com/repository/maven-snapshots/")
}
}
In your build.gradle.kts:
plugins {
id("io.github.fuyuz.svgicon") version "0.1.1-SNAPSHOT"
}
kotlin {
sourceSets {
commonMain.dependencies {
implementation("io.github.fuyuz.svgicon:runtime:0.1.1-SNAPSHOT")
}
}
}
Quick Start
1. Add SVG files
Place your SVG files in src/commonMain/svgicons/:
src/commonMain/svgicons/
├── check.svg
├── arrow-right.svg
└── menu.svg
2. Configure code generation (optional)
The plugin works with sensible defaults and automatically configures source sets. For custom configuration:
import io.github.fuyuz.svgicon.gradle.IconVisibility
svgIcon {
svgDir = file("src/commonMain/svgicons") // default
packageName = "com.example.icons" // default: "${project.group}.icons"
visibility = IconVisibility.PUBLIC // default: PUBLIC
}
The plugin automatically generates icon classes before Kotlin compilation.
3. Use in Compose
import io.github.fuyuz.svgicon.SvgIcon
import your.package.generated.icons.Icons
@Composable
fun MyScreen() {
SvgIcon(
svg = Icons.Check,
contentDescription = "Check",
tint = Color.Green,
modifier = Modifier.size(24.dp)
)
}
DSL Builder
Create SVG icons directly in Kotlin with the type-safe DSL:
Animated Icons with Presets
Path Morphing (Type-Safe)
Symbol and Use Elements
val iconWithSymbol = svg {
defs {
symbol(id = "checkIcon") {
circle(12, 12, 10)
path("M8 12l3 3 5-6")
}
}
use(href = "#checkIcon", x = 0, y = 0)
use(href = "#checkIcon", x = 30, y = 0)
}
Animated Icons
Use AnimatedSvgIcon for icons with SMIL animations:
@Composable
fun AnimatedIcon() {
AnimatedSvgIcon(
svg = animatedCheck,
contentDescription = "Animated Check",
modifier = Modifier.size(48.dp),
iterations = 1, // or Int.MAX_VALUE for infinite
onAnimationEnd = { /* callback */ }
)
}
Runtime SVG Parsing
For dynamic SVG content, use svg to parse SVG strings at runtime:
import io.github.fuyuz.svgicon.SvgIcon
import io.github.fuyuz.svgicon.core.svg
@Composable
fun DynamicIcon() {
val icon = remember {
svg("""
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
</svg>
""")
}
SvgIcon(
svg = icon,
contentDescription = "Circle",
tint = Color.Blue,
modifier = Modifier.size(48.dp)
)
}
SVG Support
Elements
Attributes
Modules
| Module | Description |
|---|---|
runtime | Core library with SvgIcon composable and SVG rendering |
gradle-plugin | Gradle plugin for SVG to Kotlin code generation |
Building from Source
# Build all modules
./gradlew build
# Run tests
./gradlew check
# Run sample application
./gradlew :sample:run
# Publish to local Maven repository
./gradlew publishToMavenLocal
Requirements
- Kotlin 2.1.21+
- Compose Multiplatform 1.9.3+
- Java 17+
License
MIT License