Skip to content

Commit 0997dcb

Browse files
committed
Cover latest changes in README
1 parent adc9883 commit 0997dcb

18 files changed

Lines changed: 168 additions & 53 deletions

README.md

Lines changed: 168 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ needs.
4747
- 🔌 [IntelliJ IDEA / Android Studio plugin](#idea-plugin)
4848
- 🖥️ [CLI tool](#cli-tool)
4949
- 🐘 [Gradle plugin](#gradle-plugin)
50-
- Web app (🚧 under development 🚧)
50+
- 🌐 Web app (🚧 under development 🚧)
5151

5252
## Table of Contents
5353

@@ -56,12 +56,17 @@ needs.
5656
- [Plugin features](#plugin-features)
5757
- [Simple mode](#simple-mode)
5858
- [IconPack mode](#iconpack-mode)
59-
- [Create new icon pack](#new-icon-pack)
60-
- [Update existing icon pack](#existing-icon-pack)
59+
- [New pack](#new-pack)
60+
- [Existing pack](#existing-pack)
61+
- [Material pack](#material-pack)
62+
- [Web Import](#web-import)
63+
- [SVG to XML](#svg-to-xml)
64+
- [ImageVector to XML](#imagevector-to-xml)
6165
- [ImageVector previewer](#imagevector-previewer)
6266
- [Embedded previewer](#embedded-previewer)
6367
- [AutoCompletion previewer](#autocompletion-previewer)
6468
- [Gutter previewer](#gutter-previewer)
69+
- [Project view previewer](#project-view-previewer)
6570
- [Requirements](#requirements)
6671
- [Installation](#installation)
6772
- [Build plugin](#build-plugin)
@@ -109,108 +114,193 @@ needs.
109114
- Support for Drag&Drop files/directories and pasting content from clipboard
110115
- Easy option to add more icons into existing project icon pack
111116
- Copy generated ImageVector to clipboard or file (depends on the mode)
112-
- Fully customizable setting for generated icons
117+
- Fully customizable settings for generated icons
113118
- Build-in [ImageVector previewer](#imagevector-previewer) for any icons without compilation ✨
114-
- The plugin is completely built using [Compose Multiplatform](https://github.com/JetBrains/compose-multiplatform)
115-
and [Tiamat](https://github.com/ComposeGears/Tiamat) navigation library
119+
- [Web Import](#web-import): directly download and convert icons from popular online icon libraries
120+
- [SVG to XML](#svg-to-xml) conversion tool
121+
- [ImageVector to XML](#imagevector-to-xml) backward conversion tool
122+
- Built entirely with [Compose Multiplatform](https://github.com/JetBrains/compose-multiplatform); since version 1.0.0
123+
powered by the [Jewel](https://github.com/JetBrains/intellij-community/tree/master/platform/jewel)
124+
UI framework and [Tiamat](https://github.com/ComposeGears/Tiamat) for navigation
116125

117-
More exclusive features under development, stay tuned 🌚
126+
### Simple mode
118127

119-
### **Simple mode**
120-
121-
> [!NOTE]
122-
> One-click solution to convert SVG/XML to ImageVector (requires only specifying the package).
128+
Quick conversion of individual SVG/XML icons to ImageVector format. Perfect for one-off conversions, prototyping, or
129+
testing icons without setting up a full icon pack structure.
123130

124131
#### Available quick actions:
125132

126133
- Rename icon
127-
- Preview current ImageVector
128-
- Copy generated ImageVector to clipboard
134+
- Preview `ImageVector` on different backgrounds (pixel grid, white, black)
135+
- Export generated `ImageVector` to file or copy to clipboard
129136

130137
<div align="center">
131138
<img src="assets/simple_mode_1.png" width="252" />
132-
<img src="assets/simple_mode_2.png" width="251.2" />
133-
<img src="assets/simple_mode_3.png" width="250" />
139+
<img src="assets/simple_mode_2.png" width="251" />
140+
<img src="assets/simple_mode_3.png" width="252" />
134141
</div>
135142

136-
137143
Demo:
138144

139-
https://github.com/user-attachments/assets/f48eb027-ccb2-4194-87bb-868c6be222ae
145+
https://github.com/user-attachments/assets/2a2367ee-3158-4200-b764-cbb1bc0508d8
140146

141-
### **IconPack mode**
147+
### IconPack mode
142148

143-
#### **New icon pack**
149+
Facilitates creating an organized icon pack with extension properties for your pack `object`, previewing the list of
150+
icons, and batch importing them to your specified directory.
144151

145-
> [!NOTE]
146-
> Facilitates creating an organized icon pack with extension properties for your pack `object`, previewing the list of
147-
> icons, and batch importing them to your specified directory.
152+
<div align="center">
153+
<img src="assets/iconpack_mode.png" width="250" />
154+
</div>
155+
156+
#### New pack
157+
158+
Create a brand new icon pack for your project from scratch. This mode guides you through the complete setup process,
159+
allowing you to configure:
160+
161+
- **Destination path** and **package name**
162+
- **License header** (optional)
163+
- **Icon pack object name** (e.g., `AppIcons`, `MyIcons`)
164+
- **Nested packs** for hierarchical organization (e.g., `Outlined`, `Filled`, `Сolored`)
148165

149166
<div align="center">
150-
<img src="assets/iconpack_mode_new_1.png" width="300" />
151-
<img src="assets/iconpack_mode_new_2.png" width="300" />
167+
<img src="assets/iconpack_mode_new_1.png" width="250" />
168+
<img src="assets/iconpack_mode_new_2.png" width="250" />
169+
<img src="assets/iconpack_mode_new_3.png" width="250" />
152170
</div>
153171

154172
Demo:
155173

156-
https://github.com/user-attachments/assets/ccb568a4-bda9-4f2b-bf40-29b1a8e4c854
174+
https://github.com/user-attachments/assets/d5044e24-972b-4185-88bb-0e8cf3084b96
157175

158-
#### **Existing icon pack**
176+
#### Existing pack
159177

160-
> [!NOTE]
161-
> Instead of importing icon pack settings, the plugin provides a direct way to import an already created icon pack from
162-
> a Kotlin file.
178+
Load and extend an existing project icon pack. The plugin automatically detects package, icon pack object, and nested
179+
packs. It is allowed to add additional nested packs and continue importing icons into the existing structure.
163180

164181
<div align="center">
165-
<img src="assets/iconpack_mode_existing_1.png" width="300" />
166-
<img src="assets/iconpack_mode_existing_2.png" width="300" />
182+
<img src="assets/iconpack_mode_existing_1.png" width="250" />
183+
<img src="assets/iconpack_mode_existing_2.png" width="250" />
184+
<img src="assets/iconpack_mode_existing_3.png" width="250" />
167185
</div>
168186

169-
> [!IMPORTANT]
170-
> Editing features are limited for now; you can only load an existing pack and add more nested packs.
187+
Demo:
188+
189+
https://github.com/user-attachments/assets/dad6c9b2-63c4-44f1-a642-395e32277513
190+
191+
#### Material pack
192+
193+
Extend the existing Material Icons pack provided by the `material-icons-core` library with your custom icons. This mode
194+
allows you to seamlessly add your own icons to the Material Icons structure, maintaining consistency with the existing
195+
naming conventions and package organization.
196+
197+
<div align="center">
198+
<img src="assets/iconpack_mode_material_1.png" width="250" />
199+
<img src="assets/iconpack_mode_material_2.png" width="250" />
200+
<img src="assets/iconpack_mode_material_3.png" width="250" />
201+
</div>
171202

172203
Demo:
173204

174-
https://github.com/user-attachments/assets/77f449dd-a6d0-44ea-9059-b7b30ee94426
205+
https://github.com/user-attachments/assets/9751c0f9-1971-4f00-a2b2-9d475e090bf4
206+
207+
### Web Import
208+
209+
Directly search, browse, and download icons from popular online icon libraries and convert them to ImageVector in one
210+
click — no manual SVG/XML download required.
211+
212+
Supported icon providers:
213+
214+
- [Material Symbols](https://fonts.google.com/icons) (Google)
215+
- [Lucide](https://lucide.dev)
216+
- [Font Awesome](https://fontawesome.com)
217+
- [Bootstrap Icons](https://icons.getbootstrap.com)
218+
- [Remix Icons](https://remixicon.com)
219+
- [Box Icons](https://boxicons.com)
220+
- [Feather Icons](https://feathericons.com)
221+
- [Hero Icons](https://heroicons.com)
222+
- [Ionicons](https://ionicons.com)
223+
- [Tabler Icons](https://tabler.io/icons)
224+
- [Eva Icons](https://akveo.github.io/eva-icons)
225+
- [Simple Icons](https://simpleicons.org)
226+
- [Octicons](https://primer.style/foundations/icons)
227+
- [css.gg](https://css.gg)
228+
229+
Features:
230+
231+
- Fuzzy search across icon names
232+
- Adjustable icon grid zoom (25%–200%)
233+
- Persistent cache — icons are not re-fetched on every plugin restart
234+
- Persistent per-provider font customization settings
235+
236+
Demo:
237+
238+
https://github.com/user-attachments/assets/86df2f2b-7a4e-4caf-91e8-c2290b347770
239+
240+
### SVG to XML
241+
242+
Convert SVG files to Android XML vector drawable format directly inside the plugin. This tool is useful when you need
243+
to use icons in Android Views or want to maintain compatibility with the traditional Android resource system.
244+
245+
Demo:
246+
247+
https://github.com/user-attachments/assets/f75c9a64-05d6-48fb-bdb2-4df11a67ff78
248+
249+
### ImageVector to XML
250+
251+
Backward conversion tool that converts existing Kotlin `ImageVector` code back to Android XML vector drawable format.
252+
This is particularly useful when you need to share icons with projects that don't use Compose yet, migrate icons to a
253+
legacy codebase, or generate XML resources from programmatically created ImageVectors.
254+
255+
Demo:
256+
257+
https://github.com/user-attachments/assets/88601612-8a5a-44b6-9e0b-23d075c9d843
175258

176259
### ImageVector Previewer
177260

178261
#### Embedded Previewer
179262

180-
We personally find it very useful to have a previewer for ImageVector (such we have for SVG or XML).
181-
Previewer available for any ImageVector formats (backing or lazy property, legacy google material icons) without
182-
compose @Preview annotation and project compilation.
263+
Plugin-exclusive feature: preview ImageVectors directly in the editor (similar to SVG or XML previews).
264+
Works with any ImageVector format (backing or lazy property, legacy Google Material icons) without requiring `@Preview`
265+
annotations.
183266

184267
<div align="center">
185-
<img src="assets/imagevector_previewer.png" />
268+
<img src="assets/imagevector_previewer.png" width="700" />
186269
</div>
187270

188-
Previewer actions:
271+
Available actions:
189272

190-
- Change icon background (pixel grid, white, black)
191-
- Zoom in, zoom out icon without loosing quality
192-
- Draw as actual size
193-
- Fit icon to window
273+
- Toggle background (pixel grid, white, black)
274+
- Zoom in/out without quality loss
275+
- View at actual size
276+
- Fit to window
194277

195278
Demo:
196279

197-
https://github.com/user-attachments/assets/1047a2b3-81ec-4e10-a118-0ff20bd5227b
280+
https://github.com/user-attachments/assets/3f5f37d1-9add-4bb2-b971-b0d8392a5700
198281

199282
#### AutoCompletion Previewer
200283

201-
When IDEA auto-completion popup is shown for any ImageVector property, the preview image will be displayed in the popup.
284+
Preview icons directly in the IDE autocomplete popup - see what each ImageVector looks like before selecting it.
202285

203286
<div align="center">
204-
<img src="assets/imagevector_previewer_autocomplete.png" />
287+
<img src="assets/imagevector_previewer_autocomplete.png" width="700" />
205288
</div>
206289

207290
#### Gutter Previewer
208291

209-
Preview inside gutter available for any ImageVector property. By clicking on the gutter icon, the original file will be
210-
opened in the editor with embedded previewer.
292+
Icon previews appear in the editor gutter. Click to open the file with embedded previewer.
293+
294+
<div align="center">
295+
<img src="assets/imagevector_previewer_gutter.png" width="650" />
296+
</div>
297+
298+
#### Project View Previewer
299+
300+
Icon previews in the project file tree.
211301

212302
<div align="center">
213-
<img src="assets/imagevector_previewer_gutter.png" />
303+
<img src="assets/imagevector_previewer_project_view.png" width="300"/>
214304
</div>
215305

216306
### Requirements
@@ -335,6 +425,27 @@ Usage:
335425
<img src="assets/cli_valkyrie_svgxml2imagevector.png" width="550" />
336426
</div>
337427

428+
Key options:
429+
430+
| Option | Default | Description |
431+
|------------------------------|--------------------|--------------------------------------------------------------------|
432+
| `--input-path` | *(required)* | Directory with SVG/XML files or path to a single file |
433+
| `--output-path` | *(required)* | Output directory for generated sources |
434+
| `--package-name` | *(required)* | Package name of the generated sources |
435+
| `--iconpack-name` | `""` | Name of the existing IconPack |
436+
| `--nested-pack-name` | `""` | Name of the existing nested IconPack |
437+
| `--output-format` | `backing-property` | `backing-property` or `lazy-property` |
438+
| `--use-compose-colors` | `true` | Use predefined Compose colors instead of hex codes |
439+
| `--generate-preview` | `false` | Generate `@Preview` function |
440+
| `--flatpackage` | `false` | Import all icons into a single package |
441+
| `--explicit-mode` | `false` | Add explicit `public` modifier |
442+
| `--trailing-comma` | `false` | Insert trailing comma in path params |
443+
| `--use-path-data-string` | `false` | Generate `addPath` with pathData strings instead of builder calls |
444+
| `--suppress-unused-receiver` | `false` | Add `@Suppress("UnusedReceiverParameter")` to extension properties |
445+
| `--indent-size` | `4` | Spaces per indentation level |
446+
| `--auto-mirror` | *(not set)* | Force `autoMirror=true` or `autoMirror=false` on all icons |
447+
| `-v`, `--verbose` | `false` | Print additional info logs |
448+
338449
Demo:
339450

340451
https://github.com/user-attachments/assets/1e1d07bd-080f-4d39-8683-c1c30ef905e8
@@ -371,10 +482,10 @@ ideal for projects that need to version control icon sources and generate type-s
371482

372483
### Compatibility
373484

374-
| Valkyrie plugin version | Min AGP | Min Gradle |
375-
|-------------------------|---------|-------------------------|
376-
| 0.4.0 | 9.0.0 | 9.0.0 (should be lower) |
377-
| 0.5.0 | 9.2.0 | 9.4.1 |
485+
| Valkyrie plugin version | Min AGP | Min Gradle |
486+
|-------------------------|---------|------------|
487+
| 0.4.0 | 9.0.0 | 9.0.0 |
488+
| 0.5.0 | 9.2.0 | 9.4.1 |
378489

379490
### Common scenarios
380491

@@ -456,6 +567,10 @@ valkyrie {
456567
// Insert a trailing comma after the last element of ImageVector.Builder block and path params (default: false)
457568
addTrailingComma = false
458569

570+
// Generate addPath with pathData strings instead of path builder calls (default: false)
571+
// Less optimal due to pre-rendering parsing, but may be preferred for readability
572+
usePathDataString = false
573+
459574
// Add `@Suppress("UnusedReceiverParameter")` annotation to generated ImageVector extension properties (default: false)
460575
// Suppresses the Kotlin warning when the receiver parameter (e.g. `ValkyrieIcons`) is not used inside the property getter body
461576
suppressUnusedReceiverWarning = false

assets/iconpack_mode.png

80.2 KB
Loading
-72.1 KB
Loading
-8.76 KB
Loading
48.6 KB
Loading
65.1 KB
Loading
68.9 KB
Loading
154 KB
Loading

assets/iconpack_mode_new_1.png

-41.7 KB
Loading

assets/iconpack_mode_new_2.png

-59.3 KB
Loading

0 commit comments

Comments
 (0)