Dev:2.5/Doc/How to/Add an icon

Log in / create account

From BlenderWiki

Jump to: navigation, search

Understanding the needed files

The blenderbutton image

Blenderbuttons.png


Groups of icons

As you see, icons are disposed in rows, which are grouped in a logical way and marked with the labels on the right.

Icons names

Open source/blender/editors/include/UI_icons.h

Apart from the GPL license and comments, you will find a big list starting with: 

DEF_ICON(BLENDER)
DEF_ICON(QUESTION)
DEF_ICON(ERROR)
DEF_ICON(CANCEL)
DEF_ICON(TRIA_RIGHT)

As you can see in source/blender/editors/include/UI_resources.h, the macro DEF_ICON is: 

#define DEF_ICON(name) ICON_##name,

hence it takes the name in parentheses and defines ICON_<name-in-parentheses>

That is, in source/blender/editors/include/UI_icons.h we define a list of names like

  • ICON_BLENDER
  • ICON_QUESTION
  • ICON_ERROR
  • ICON_CANCEL
  • ICON_TRIA_RIGHT
  • ...

Icons disposal

Using the "Icons" addons

Now to help you understand how this works, enable the Icons addon.

Display All Icons panels

Go in the console space and in the view menu enable the icon viewer: you will get a nice list of icons to scrub in Console or in the Text Editor.

Icons order

blenderbutton file bottom-left detail

By scrolling the slider in the console header, you'll see that these icons appear:

  1. in the same order they are defined in source/blender/editors/include/UI_icons.h.
  2. in the same order they are in the blenderbutton file.

Precisely:

  • the first icon in the icons viewer (ICON_QUESTION) is the second icon at the bottom-left in in blenderbutton,
  • the second icon in the icons viewer (ICON_ERROR) is the second icon at the bottom-left in in blenderbutton,
  • and so on...

Their order is in rows, from left to right, and reading rows from the bottom to the top of the blenderbutton file.

Note
For some reason, the first one is not available in Blender's buttons (will investigate).


Empty slots

You may have noticed that there are empty slots in blenderbutton, for example in the first line the slots 16 and 17, which are preceded by the MENU_PANEL icon and followed by the DOT icon.

These empty slots have a correspondant code in source/blender/editors/include/UI_icons.h as shown below: 

DEF_ICON(MENU_PANEL)
#ifndef DEF_ICON_BLANK_SKIP
	DEF_ICON(BLANK002)
	DEF_ICON(BLANK003)
#endif
DEF_ICON(DOT)

Adding an icon

Add the icon image

Find an empty slot where to put your icon in the blenderbutton file, putting it in the right group.

Add the icon in the image, for example the first free slot, number 16.

This corresponds to DEF_ICON(BLANK002) in the source code.

Add your icon name

Choose a name which won't clash with existing names, for example MYICON.

In source/blender/editors/include/UI_icons.h:

  • move DEF_ICON(BLANK002) correspondant to the blank slot you have chosen out of the #ifndef
  • change it to DEF_ICON(MYICON)

Like this: 

DEF_ICON(MENU_PANEL)
DEF_ICON(MYICON)
#ifndef DEF_ICON_BLANK_SKIP
	DEF_ICON(BLANK003)
#endif
DEF_ICON(DOT)

Generate a new blenderbuttons.c

In release/datafiles/ use this command: 

./datatoc.py blenderbuttons

This will produce a file called blenderbuttons.c: 

./datatoc.py blenderbuttons
Making C file <blenderbuttons.c>
211507

Now copy the content of blenderbuttons.c into editors/datafiles/blenderbuttons.c.

Compile!

Finally, compiling blender you should see your icon MYICON in Blender! Enable the Icon addon again and search for it at number 16.

See also

Retrieved from "http://wiki.blender.org/index.php/Dev:2.5/Doc/How_to/Add_an_icon"