Valkyrie 使用教程

Valkyrie 使用教程

Valkyrie SVG/XML to Compose ImageVector: IntelliJ IDEA / Android Studio plugin + build-in previewer without compilation, CLI tool 项目地址: https://gitcode.com/gh_mirrors/valky/Valkyrie

1. 项目介绍

Valkyrie 是一个开源项目，旨在帮助开发者将 SVG 和 XML 格式的图标转换为 Jetpack Compose 的 ImageVector 格式。该项目包含了一个 IntelliJ IDEA / Android Studio 插件、一个 CLI 工具，以及一个 Gradle 插件和 Web 应用（即将推出）。Valkyrie 通过自定义的 Kotlin 代码生成器，提供了代码格式化、移除冗余代码和优化导出等功能，支持创建独特的项目图标包，并且性能高效。

2. 项目快速启动

以下是快速启动 Valkyrie 的步骤：

安装 IntelliJ IDEA 插件

1. 打开 IntelliJ IDEA 或 Android Studio。
2. 转到 "文件" > "设置"（Windows）或 "首选项"（macOS）。
3. 选择 "插件"。
4. 点击 "市场" 标签。
5. 搜索 "Valkyrie" 并安装插件。
6. 重启 IDE。

使用 IntelliJ IDEA 插件

1. 打开一个包含 SVG 或 XML 图标的文件夹。
2. 选择文件或文件夹，右键点击并选择 "Convert to ImageVector"。
3. 在弹出的窗口中指定包名和其他选项。
4. 点击 "OK" 开始转换。

使用 CLI 工具

1. 通过以下任一方式安装 CLI 工具：

   • 使用 Homebrew：brew install ComposeGears/repo/valkyrie
   • 手动下载最新版本的 CLI 工具，解压并运行 ./valkyrie。

2. 转换 SVG 或 XML 文件到 ImageVector：

./valkyrie svgxml2imagevector -i input.svg -o output.kt

替换 -i 和 -o 后的路径为实际的输入和输出路径。

3. 应用案例和最佳实践

创建图标包

使用 Valkyrie 插件创建一个图标包，可以方便地管理和使用图标。创建图标包的步骤如下：

1. 在 IDE 中打开 "Convert to ImageVector"。
2. 选择 "IconPack" 模式。
3. 输入图标包的名称和其他信息。
4. 添加图标到图标包，并导出到指定目录。

预览 ImageVector 图标

在插件中使用内置的 ImageVector 预览器，可以实时查看图标效果，无需编译项目。

1. 在 "Convert to ImageVector" 窗口中，点击 "Preview" 按钮。
2. 使用预览器中的工具调整背景色、缩放图标等。

4. 典型生态项目

Valkyrie 可以与多个生态项目结合使用，例如：

• Android 项目中使用 Jetpack Compose 进行 UI 开发。
• 结合 Gradle 插件自动化图标转换流程。
• 在持续集成/持续部署 (CI/CD) 流程中使用 CLI 工具进行图标转换。

通过整合 Valkyrie，可以提升开发效率，优化图标资源的处理流程。

Valkyrie SVG/XML to Compose ImageVector: IntelliJ IDEA / Android Studio plugin + build-in previewer without compilation, CLI tool 项目地址: https://gitcode.com/gh_mirrors/valky/Valkyrie