Component Editor (VCL) - EtheaDev/SVGIconImageList GitHub Wiki

Advanced Component Editor (VCL)

You can set the properties of an SVGIconImageList or an SVGIconImageCollection component using the classic Delphi Object inspector, in combination with the collection editor and the Structure editor, but it's most simple to use the advanced Image Editor supplied: double-click to the component to open the component editor as you can do with any Delphi component.

Operations

In this figure you can see the advanced component editor for VCL version:

And the same component editor with dark mode IDE:

At the top of the editor you can set the properties of your SVGIconImageList instance, like Size or Width and Height (if you are editing an SVGIconImageCollection this panel is not visible).

At the left of the editor you can see the categories of the icons and select them to filter the view.

At the center of the editor you can see a preview of the icons present in the collection, filtered by selected category. Selecting an icon you can see the SVGIconItem properties like IconName and SVGText at the bottom of the editor.

Using the splitters you can resize all the sections of the editor.

Setting global properties

If you are editing an SVGIconImageList or a SVGIconVirtualImageList, you can also specify the size of the icons, or Width and Height, if they are different.

In the "Global properties" panel, you can also change attributes that are applyed to all Icons: FixedColor, GrayScale and Opacity.

Setting category to Icons

If you want to apply a category to a set of Icons, multi-select them in the image viewer and click to "Set category..." button, then edit the category name and confirm to apply the value: the list of categories shows and auto-select the new category added.

You can change the category of the icon also in the Category Edit, the press "Tab" to apply the value.

Load multiple Icons from files

In this editor you can also Load multiple Icons using the "Add..." Button.

In the OpenDialog, select multiple-files and import them into the ImageList: the icon names is set with the filename.

Move Icons

Using Drag-and-Drop, you can move icons prom a position to another...

Delete or Replace Icons

Use "Delete" button at Image View level to delete all the selected Icons, or use "Replace" button to replace with another file.

You can also delete a single icon with the bottom button.

Export icons to svg file

Using "Export svg files..." button you can save multiple svg icons files into a folder.

Export icons to png file (with transparency)

Using "Export png files..." button you can save multiple png files into a folder, of size defined in the above fields.

Editing Icon proprerties

If you want, you can set FixedColor or GrayScale of a specific icon, that overrides the global value.

Editing SVG Text

You can also edit directly the SVG Text of an Icon into the editor at the bottom: the changes are immediatly showed in the Icon image.

Export Icon to PNG files

You can also export a single SVG icon to multiple PNG files with different resolutions, using "Export PNG" button: