Saturday, 18 April 2015

Create Component Icon in Delphi XE7 Starter Edition

Creating a bitmap icon for one of your own components is not explained in the Help documentation.

In fact Help confuses things in the Creating a New Component topic by mentioning how to specify the application icon.

The only post I could find on the internet that describes the process clearly is by Francois Piette at this link, .

I have created and installed a component by following the instructions for creating a simple component at [link]

The image below shows the project for the component opened in the IDE.

Component project

The component uses a default icon in the component palette and on the form.

Default component icon

In GIMP image editor create a new 24 pixel by 24 pixel image.

Create a 24 x 24 image
Design the icon.

In the screenshot below the grid is visible (View>Show Grid) and has been configured to 1x1 pixels (Image>Configure Grid).

Design the icon
The colour of the pixel at the bottom left will be used as the transparent colour.

I change it to black (which is a colour I haven’t used elsewhere in the image) so the blue in my icon does not become transparent.

Set the transparent colour

Save the image in GIMP’s native .xcf format (File>Save As) and then export the image (File>Export As).

Give the image the same name as the component’s unit file and add the .bmp extension.

Save the image in the project folder.

Save as bmp with unit name in project folder

In the Export Image as Bitmap Dialog
  • expand the Compatibility Options and check “Do not write color space information”
  • expand the Advanced Options and select 24 bits as the colour depth
Select 24 bits colour

Note that the colour depth will be reduced by the conversion to a resource in the next step.

The bitmap now needs to be converted to a Delphi component resource file (.dcr) which is done using a resource script file (.rc) and the resource compiler brcc32.exe which is included with Delphi.

Go to File>New>Other and add a Text File to the project and select the .rc extension.

Craet a rc file

Add the following command to the .rc file and save it with the same name as the component’s unit file.

TMyComponent BITMAP "MyComponent.bmp"

Resource script command

Unfortunately there seems not to be any way to set the Resource Compiler options in the Project Options to produce a .dcr file from the .rc file.

Resource compiler project options

Instead, the .dcr file has to be created using the command line.

In Project>Options>Build Events enter the following command line as a Pre-build Event>Command for all configurations.

brcc32 -foMyComponent.dcr MyComponent.rc

Use a pre build command

Compiling or building the project will generate the .dcr file.

Project folder with dcr

One final step is required to link the .dcr to the component.

Right click on the project in the Project Manager window and select “View Source” to open the project source code in the editor.

Add the following line beneath {$R *.res}.

{$R MyComponent.dcr}

Link dcr in project source

Now compile or build the project.

If the component was already installed in the IDE uninstall it by right clicking on the project in the Project Manager window and selecting Uninstall.

Uninstall component if necessary

Install the component by right clicking on the project in the Project Manager window and selecting Install.

Install component

Now the component uses the custom icon in the component palette and on the form.

Component has custom icon

If the component project was not created in a folder on the IDE’s library path be sure to add the path to the component source or .dcu to the Search Path project option for any project that uses the component.

UPDATE: May2015

When I next started the IDE the icon in the tool palette had reverted to the default one.

To fix this I uninstalled the component and then used the Component>Install Component menu and installed it into a different existing package.

UPDATE: September2015

I found a PDF that details a technique using a resource editor to create a component icon.

1 comment: