Overview of the FMX components (Windows+Android+iOS platforms)

TSVGIconImageList component

TSVGIconImageList is an FMX component for Delphi derived from TCustomImageList component, that auto-build icons using a collection of TSVGIconSourceItem (derived from TCustomSourceItem) that uses a special TSVGIconMultiResBitmap (derived from TMultiResBitmap) to build bitmaps using Icon Fonts.

The Component is available at "Ethea" page, after installing the run-time and design-time Packages located in \Packages\DXXX\SVGIconImageListFMX.dpk and \Packages\DXXX\dclSVGIconImageListFMX.dpk

Into component TSVGIconImageListFMX you can define:

• AutoSizeBitmaps (default true) to obtain "dynamic" Bitmaps scaled for the requested components. If AutoSizeBitmaps is false it's possibile to build "static" Bitmaps with different Scale factors, as a normal ImageList that uses bitmap files.
• Size (default 32) to set the same Size for all the icons in the Source Collection, if you don't use the AutoSizeBitmaps option.
• Width and Height, to set a different aspect-ratio for all the icons in the Source Collection.
• Opacity (default Opacity for any source Items)
• GrayScale: (default false) to apply grayscale color effect to any icon of the collection
• FixedColor: (default inherit_color) to apply a single fixed color to any icon of the collection
• Zoom: (default 100) to apply a zoom factor to the size of the icons

At TSVGIconSourceItem level you can define, for each source item of the ImageList:

• SVGText: SVG value in text format
• IconName (required and unique)
• GrayScale: (default false) to apply grayscale color effect to the icon
• FixedColor: (default inherit_color) to apply a single fixed color to the icon

if you want, you can also use specific values, different from default in ImageList:

• Opacity (if different by ImageList Opacity)

TSVGIconImageList Methods

Method available for single Icon:

• InsertIcon
• DeleteIcon

Multiple Icons methods:

• AddIcons
• ClearIcons
• LoadFromFiles

TSVGIconImageList Implicit Methods:

Setting "Opacity" updates all attributes of any source item with no specific value assigned.

Setting "Size" (or Width and Height) resize all Icons at the new size (not used when AutoResizeBitmap is True)

Setting "Zoom" resize all Icons with a zoom factor (from 10 to 100): by default zoom factor is 100.

Advanced Component Editor

At design time is very easy to build the Icons using The Advanced Component Editor supplied with the component.

TSVGIconImage component

TSVGIconImage is an FMX component for Delphi derived from TImage component, that auto-build icon using a collection a TSVGIconFixedMultiResBitmap (derived from TFixedMultiResBitmap) to build bitmaps for different scale using different SVG Icons.

At TSVGIconImageFMX component level you can set:

• SVGText
• Opacity

Proerty Editor

At design time you can change SVGText using The Property Editor supplied with the component.

At TSVGIconFixedBitmapItem level you can define, for each Scale factor:

• SVGText
• Opacity
• Size
• IconName (optional)

If you resize the image the MultiResBitmap rebuild the bitmap to show a perfect icon at any resolution.

You need more than one bitmap only if you want to have different aspect icon for different Device scale-factor: if you need only to resize your icon you must define only one MultiResBitmapItem with 16x16 bitmap size: at run-time the icon is built at the correct resolution needed by the Image at any scale factor.

TSVGIconImage Implicit Methods:

Component Editor

Actually there isn't a specific component editor: to define the SVGIconImage properties: you must use the object inspector and the Structure Editor to define the TSVGIconFixedMultiResBitmap and the TSVGIconFixedBitmapItem items. Don't use MultiResBitmap editor to create your bitmap, because your icons are not loaded from files but generated by font.

See how it works with the Demos Project (FMX)