Note

This project is especially relevant now as Material Icons is no longer maintained and not recommended for use in your apps. Learn more.

Note

One-click solution to convert SVG/XML to ImageVector (requires only specifying the package).

Note

Facilitates creating an organized icon pack with extension properties for your pack object, previewing the list of icons, and batch importing them to your specified directory.

Note

Instead of importing icon pack settings, the plugin provides a direct way to import an already created icon pack from a Kotlin file.

Important

Editing features are limited for now; you can only load an existing pack and add more nested packs.

brew install ComposeGears/repo/valkyrie

#!/bin/bash

VERSION="cli-1.0.0"
TARGET_DIR="valkyrie-cli"
ASSET_NAME="tmp.zip"

LATEST_CLI_RELEASE_URL=$(curl --silent "https://api.github.com/repos/ComposeGears/Valkyrie/releases/tags/$VERSION" \
  | jq -r '.assets[] | select(.name | startswith("valkyrie-cli")) | .browser_download_url')

curl -L -o "$ASSET_NAME" "$LATEST_CLI_RELEASE_URL"
mkdir -p "$TARGET_DIR"
unzip -o "$ASSET_NAME" -d "$TARGET_DIR"

rm "$ASSET_NAME"

cd "$TARGET_DIR/bin" || exit
./valkyrie --version

./valkyrie iconpack [<options>]

./valkyrie svgxml2imagevector [<options>]

[plugins]
valkyrie = "io.github.composegears.valkyrie:latest-version"

plugins {
    alias(libs.plugins.valkyrie)
}

valkyrie {
    // Required: Package name for generated icons
    // Defaults to Android 'namespace' if Android Gradle Plugin is applied
    packageName = "com.example.app.icons"

    // Optional: Custom output directory (default: build/generated/sources/valkyrie)
    outputDirectory = layout.buildDirectory.dir("generated/valkyrie")

    // Optional: Resource directory name containing icon files (default: "valkyrieResources")
    // Icons will be discovered in src/{sourceSet}/{resourceDirectoryName}/
    // Example: src/commonMain/valkyrieResources/, src/androidMain/valkyrieResources/
    resourceDirectoryName = "valkyrieResources"

    // Optional: Generate during IDE sync for better developer experience (default: false)
    generateAtSync = false

    // Optional: Force all generated ImageVectors to have a specific autoMirror value (default: not specified)
    // When set to true, all icons will have autoMirror = true
    // When set to false, all icons will have autoMirror = false
    // When not specified, the autoMirror value from the original icon file will be preserved
    // This can be overridden at the icon pack or nested pack level
    autoMirror = false

    // Optional: Code style configuration for generated code
    codeStyle {
        // Add explicit `public` modifier to generated declarations (default: false)
        useExplicitMode = false

        // Number of spaces used for each level of indentation in generated code (default: 4)
        indentSize = 4
    }

    // Optional: ImageVector generation configuration
    imageVector {
        // Output format for generated ImageVectors (default: BackingProperty)
        outputFormat = OutputFormat.BackingProperty // or OutputFormat.LazyProperty

        // Use predefined Compose colors instead of hex color codes (e.g. Color.Black instead of Color(0xFF000000)) (default: true)
        useComposeColors = true

        // Generate `@Preview` function for ImageVector (default: false)
        generatePreview = false

        // Insert a trailing comma after the last element of ImageVector.Builder block and path params (default: false)
        addTrailingComma = false
    }

    // Optional icon pack object configuration
    iconPack {
        // Required: Name of the root icon pack object
        name = "ValkyrieIcons"

        // Required: Target source set for generated icon pack object
        targetSourceSet = "commonMain"

        // Optional: Generate flat package structure without subfolders (default: false)
        useFlatPackage = false

        // Optional: Force all ImageVectors in this icon pack to have a specific autoMirror value (default: not specified)
        // When set, overrides the root level autoMirror setting
        // This can be overridden at the nested pack level
        autoMirror = true

        // Optional: Nested icon packs configuration
        nested {
            // Required: Name of the nested icon pack object
            name = "Outlined"

            // Required: The source folder path containing icons for this nested pack, relative to the `resourceDirectoryName`.
            sourceFolder = "outlined"

            // Optional: Force all ImageVectors in this nested pack to have a specific autoMirror value (default: not specified)
            // When set, overrides the icon pack level and root level autoMirror settings
            autoMirror = false
        }
        // You can add more nested packs if necessary
    }
}

src/
└── commonMain/
    └── valkyrieResources/
        ├── add.svg
        ├── delete.svg
        └── ic_home.xml

./gradlew generateValkyrieImageVector

plugins {
    kotlin("multiplatform")
    alias(libs.plugins.valkyrie)
}

valkyrie {
    packageName = "com.example.app.icons"
}

// other code

src/
└── commonMain/
    └── valkyrieResources/
        ├── ic_brush.xml
        ├── ic_compose_color.xml
        ├── ic_linear_gradient.svg
        ├── ic_several_path.xml
        └── ic_transparent_fill_color.xml

./gradlew generateValkyrieImageVector

@Composable
fun Demo() {
    Image(
        imageVector = ComposeColor,
        contentDescription = "Color"
    )
}

plugins {
    kotlin("multiplatform")
    alias(libs.plugins.valkyrie)
}

valkyrie {
    packageName = "com.example.app.icons"

    iconPack {
        name = "ValkyrieIcons"
        targetSourceSet = "commonMain" // icon pack object will be generated in commonMain source set
    }
}

src/
└── commonMain/
    └── valkyrieResources/
        ├── ic_brush.xml
        ├── ic_compose_color.xml
        ├── ic_linear_gradient.svg
        ├── ic_several_path.xml
        └── ic_transparent_fill_color.xml

./gradlew generateValkyrieImageVector

@Composable
fun Demo() {
    Image(
        imageVector = ValkyrieIcons.LinearGradient,
        contentDescription = null
    )
}

plugins {
    kotlin("multiplatform")
    alias(libs.plugins.valkyrie)
}

valkyrie {
    packageName = "com.example.app.icons"

    iconPack {
        name = "ValkyrieIcons"
        targetSourceSet = "commonMain"

        nested {
            name = "Outlined"
            sourceFolder = "outlined"
        }

        nested {
            name = "Filled"
            sourceFolder = "filled"
        }
    }
}

src/
└── commonMain/
    └── valkyrieResources/
        ├── outlined/
        │   ├── add.svg
        │   ├── delete.svg
        │   └── settings.svg
        └── filled/
            ├── home.svg
            ├── user.svg
            └── search.svg

./gradlew generateValkyrieImageVector

@Composable
fun Demo() {
    Image(
        imageVector = ValkyrieIcons.Outlined.Add,
        contentDescription = "Add"
    )

    Image(
        imageVector = ValkyrieIcons.Filled.Home,
        contentDescription = "Home"
    )
}

val copyTask = tasks.register<Copy>("copyValkyrieIcons") {
    dependsOn(tasks.named("generateValkyrieImageVector"))

    from(layout.buildDirectory.dir("generated/sources/valkyrie"))
    into(layout.projectDirectory.dir("src"))
}

val cleanTask = tasks.register<Delete>("cleanValkyrieGenerated") {
    delete(layout.buildDirectory.dir("generated/sources/valkyrie"))
}

tasks.register("updateValkyrieIcons") {
    dependsOn(copyTask)
    finalizedBy(cleanTask)
}

valkyrie {
    packageName = "com.example.app.icons"

    iconPack {
        name = "ValkyrieIcons"
        targetSourceSet = "commonMain"

        nested {
            name = "Navigation"
            sourceFolder = "navigation"

            autoMirror = true
        }

        nested {
            name = "Logos"
            sourceFolder = "logos"
        }
    }
}

<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed">
    <path d="M0 0h24v24H0V0z" fill="none"/>
    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</svg>

❌ ./valkyrie --iconpack-name=ValkyrieIcons

✅ ./valkyrie --iconpack=ValkyrieIcons

❌ ./valkyrie --iconpack-name=ValkyrieIcons --nested-packs=Colored,Filled

✅ ./valkyrie --iconpack=ValkyrieIcons.Colored,ValkyrieIcons.Filled

Developed by ComposeGears 2024

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.