Usage (VCL)

Usage of the VCL component

Define component at design-time

The SVGIconImageCollection components is very easy to use: drop it into a "main" Datamodule and double-click on it to open the The Advanced Component Editor to load your icons from files and fill the collection with the images that you want to use in your application.

Then, on every form, drop a VirtualImageList (from Delphi 10.3) linked to the SVGIconImageCollection and add only the icons that you use in this form, defining the size in pixel.

If you don't have VirtualImageList component because you are using an older Delphi version from 10.3 you can use the SVGIconVirtualImageList that works in a similar way of the VirtualImageList.

  object SVGIconImageCollection: TSVGIconImageCollection
    SVGIconItems = <
      item
        IconName = 'about'
        SVGText =
          '<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0' +
          ' 48 48" enable-background="new 0 0 48 48">'#13#10'    <path fill="#219' +
          '6F3" d="M37,40H11l-6,6V12c0-3.3,2.7-6,6-6h26c3.3,0,6,2.7,6,6v22C' +
          '43,37.3,40.3,40,37,40z"/>'#13#10'    <g fill="#fff">'#13#10'        <rect x=' +
          '"22" y="20" width="4" height="11"/>'#13#10'        <circle cx="24" cy=' +
          '"15" r="2"/>'#13#10'    </g>'#13#10'</svg>'#13#10
      end
      item
        IconName = 'accept_database'
        SVGText =
          '<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0' +
          ' 48 48" enable-background="new 0 0 48 48">'#13#10'    <g fill="#D1C4E9' +
          '">'#13#10'        <path d="M38,7H10C8.9,7,8,7.9,8,9v6c0,1.1,0.9,2,2,2h' +
          '28c1.1,0,2-0.9,2-2V9C40,7.9,39.1,7,38,7z"/>'#13#10'        <path d="M3' +
          '8,19H10c-1.1,0-2,0.9-2,2v6c0,1.1,0.9,2,2,2h28c1.1,0,2-0.9,2-2v-6' +
          'C40,19.9,39.1,19,38,19z"/>'#13#10'        <path d="M38,31H10c-1.1,0-2,' +
          '0.9-2,2v6c0,1.1,0.9,2,2,2h28c1.1,0,2-0.9,2-2v-6C40,31.9,39.1,31,' +
          '38,31z"/>'#13#10'    </g>'#13#10'    <circle fill="#43A047" cx="38" cy="38" ' +
          'r="10"/>'#13#10'    <polygon fill="#DCEDC8" points="42.5,33.3 36.8,39 ' +
          '34.1,36.3 32,38.5 36.8,43.3 44.6,35.5"/>'#13#10'</svg>'#13#10
      end>
    Left = 192
    Top = 152
  end

In the Demo supplied you can see the components in action...

Discover the component properties and methods here