hxuanyu/intellij-sdk-code-samples
1
0
Fork 0
mirror of https://github.com/JetBrains/intellij-sdk-code-samples.git synced 2025-07-30 10:17:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

work_with_icons_and_images.md: note @Presentation, small updates

Browse Source
This commit is contained in:
Yann Cébron 2021-05-05 17:26:37 +02:00
parent bb35b7d3d8
commit 7cc51b35ea
1 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
topics/reference_guide/work_with_icons_and_images.md
View File

@ -1,27 +1,27 @@
[//]: # (title: Working with Icons and Images)
<!-- Copyright 2000-2020 JetBrains s.r.o. and other contributors. Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE file. -->
<!-- Copyright 2000-2021 JetBrains s.r.o. and other contributors. Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE file. -->
Icons and images are used widely by IntelliJ Platform plugins.
Plugins need icons mostly for actions, custom components renderers, tool windows, and so on.
> 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](plugin_icon_file.md) page.
> For more information see the [Plugin Icon](plugin_icon_file.md) page.
>
{type="note"}
> Plugins should reuse existing platform icons whenever possible, see [Icons list](https://jetbrains.design/intellij/resources/icons_list/) and [`AllIcons`](upsource:///platform/util/src/com/intellij/icons/AllIcons.java).
> A detailed [design guideline](https://jetbrains.design/intellij/principles/icons/) is available for creating custom icons.
> Plugins should reuse existing platform icons whenever possible, see [Icons list](https://jetbrains.design/intellij/resources/icons_list/) and [`AllIcons`](upsource:///platform/util/src/com/intellij/icons/AllIcons.java).
> A detailed [design guideline](https://jetbrains.design/intellij/principles/icons/) is available for creating custom icons.
>
{type="tip"}
## 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 marked as *Resources Root*, say `icons` or `resources`.
The best way to deal with icons and other image resources is to put them to a dedicated source root marked as *Resources Root*, say <path>icons</path> or <path>resources</path>.
The `getIcon()` method of [`IconLoader`](upsource:///platform/util/ui/src/com/intellij/openapi/util/IconLoader.java) can be used to access the icons.
> The path to the icon passed in as argument to `IconLoader.getIcon()` must start with leading `/`
> The path to the icon passed in as argument to `IconLoader.getIcon()` must start with leading `/`
>
{type="note"}
@ -51,8 +51,8 @@ object DemoPluginIcons {
}
```
Use these constants inside `plugin.xml` as well when specifying `icon` attribute for `<action>` or extension points.
Note that the package name `icons` will be automatically prefixed and must not be added manually.
Use these constants inside <path>plugin.xml</path> when specifying `icon` attribute for `<action>` or extension points, as well in [`@Presentation`](upsource:///platform/analysis-api/src/com/intellij/ide/presentation/Presentation.java) `icon` attribute.
Note that the package name `icons` will be automatically prefixed and must not be specified.
```xml
<actions>
@ -82,7 +82,7 @@ Required icon sizes depend on the usage as listed in the following table:
| Editor gutter | 12x12 |
### SVG Format
> SVG icons are supported since 2018.2.
> SVG ([Scalable Vector Graphics](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics)) icons are supported since 2018.2.
>
{type="note"}
@ -116,18 +116,18 @@ If the icon graphics are simple enough so that it renders perfectly in every sca
All icon files must be placed in the same directory following this naming pattern (replace `.png` with `.svg` for SVG icons):
* **iconName.png** W x H pixels (Will be used on non-Retina devices with default theme)
* **iconName@2x.png** 2\*W x 2\*H pixels (Will be used on Retina devices with default theme)
* **iconName_dark.png** W x H pixels (Will be used on non-Retina devices with Darcula theme)
* **iconName@2x_dark.png** 2\*W x 2\*H pixels (Will be used on Retina devices with Darcula theme)
* <path>iconName.png</path> W x H pixels (Will be used on non-Retina devices with default theme)
* <path>iconName@2x.png</path> 2\*W x 2\*H pixels (Will be used on Retina devices with default theme)
* <path>iconName_dark.png</path> W x H pixels (Will be used on non-Retina devices with Darcula theme)
* <path>iconName@2x_dark.png</path> 2\*W x 2\*H pixels (Will be used on Retina devices with Darcula theme)
The `IconLoader` class will load the icon that matches the best depending on the current environment.
Here are examples of *toolWindowStructure.png* icon representations:
Here are examples of <path>toolWindowStructure.png</path> icon representations:
| Theme/Resolution | File name | Image |
| ---------------- | --------------------------------- | --------------------------------------------------------------------------- |
| Default | `toolWindowStructure.png` | ![Tool Window Structure](toolWindowStructure.png) |
| Darcula | `toolWindowStructure_dark.png` | ![Tool Window Structure, dark](toolWindowStructure_dark.png) |
| Default + Retina | `toolWindowStructure@2x.png` | ![Tool Window Structure, retina](toolWindowStructure@2x.png) |
| Darcula + Retina | `toolWindowStructure@2x_dark.png` | ![Tool Window Structure, retina, dark](toolWindowStructure@2x_dark.png) |
| Theme/Resolution | File name | Image |
| ---------------- | -------------------------------------------- | --------------------------------------------------------------------------- |
| Default | <path>toolWindowStructure.png</path> | ![Tool Window Structure](toolWindowStructure.png) |
| Darcula | <path>toolWindowStructure_dark.png</path> | ![Tool Window Structure, dark](toolWindowStructure_dark.png) |
| Default + Retina | <path>toolWindowStructure@2x.png</path> | ![Tool Window Structure, retina](toolWindowStructure@2x.png) |
| Darcula + Retina | <path>toolWindowStructure@2x_dark.png</path> | ![Tool Window Structure, retina, dark](toolWindowStructure@2x_dark.png) |