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-
137143Demo:
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
154172Demo:
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
172203Demo:
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
195278Demo:
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+
338449Demo:
339450
340451https://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
0 commit comments