3.6 KiB
| title |
|---|
| Working with Icons and Images |
Icons and images are used widely by IntelliJ Platform plugins. Plugins need icons mostly for actions, custom components renderers, tool windows and so on.
Note
Plugin Icons, which represent a plugin itself, have different requirements than icons and images used within a plugin. For more information see the Plugin Icon page.
Tip
Plugins should reuse existing platform icons whenever possible, see AllIcons. A detailed design guideline is available for creating custom icons.
How to organize and how to use icons?
The best way to deal with icons and other image resources is to put them to a dedicated source root, say "icons" or "resources".
The getIcon() method of com.intellij.openapi.util.IconLoader can be used to access the icons. Then define a class or an interface with icon constants in a top-level package called icons:
package icons;
public interface DemoPluginIcons {
Icon STRUCTURE_TOOL_WINDOW = IconLoader.getIcon("/icons/toolWindowStructure.png");
Icon MY_LANG_FILE_TYPE = IconLoader.getIcon("/icons/myLangFileType.png");
Icon DEMO_ACTION = IconLoader.getIcon("/icons/demoAction.png");
}
Use these constants inside plugin.xml as well. Note that the package name icons will be automatically prefixed, and shouldn't be added manually.
<action id="DemoPlugin.DemoAction"
class="com.jetbrains.demoplugin.actions.DemoAction"
text="Demo Action"
description="This is just a demo"
icon="DemoPluginIcons.DEMO_ACTION"/>
Image formats and naming notations
IntelliJ Platform supports Retina displays and has dark look and feel called Darcula. Thus, every icon should have a dedicated variant for Retina devices and Darcula look and feel. In some cases, you can skip dark variants if the original icon looks good under Darcula.
Required icon sizes depend on the usage as listed in the following table:
| Usage | Icon Size (pixels) |
|---|---|
| Node, Action, Filetype | 16x16 |
| Tool window | 13x13 |
| Editor gutter | 12x12 |
All icon files must be placed in the same directory following this naming pattern:
- iconName.png W x H pixels (Will be used on non-Retina devices with default look and feel)
- iconName@2x.png 2*W x 2*H pixels (Will be used on Retina devices with default look and feel)
- iconName_dark.png W x H pixels (Will be used on non-Retina devices with Darcula look and feel)
- iconName@2x_dark.png 2*W x 2*H pixels (Will be used on Retina devices with Darcula look and feel)
The IconLoader class will load the icon that matches the best depending on the current environment.
Here are examples of toolWindowStructure.png icon representations:
| Look and feel | File name | Image |
|---|---|---|
| Default | toolWindowStructure.png |
 |
| Darcula | toolWindowStructure_dark.png |
 |
| Default + Retina | toolWindowStructure@2x.png |
 |
| Darcula + Retina | toolWindowStructure@2x_dark.png |
 |