Skip to content
Permalink

Comparing changes

This is a direct comparison between two commits made in this repository or its related repositories. View the default comparison for this range or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: JetBrains/resharper-devguide
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 4c866f8f712f186d4a24c6905132774b0c79244a
Choose a base ref
..
head repository: JetBrains/resharper-devguide
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: b91c3131850f6c748059a564a6e02ee1a7bc5135
Choose a head ref
Showing with 21 additions and 16 deletions.
  1. +21 −16 topics/Platform__Icons.md
37 changes: 21 additions & 16 deletions topics/Platform__Icons.md
Original file line number Diff line number Diff line change
@@ -2,13 +2,13 @@

Icons make it easy to find and explore features in ReSharper and Rider. They can appear in buttons that execute actions, in navigation to differentiate between members, in the gutter to highlight source code, or as various indicators to visualize results (unit testing, solution-wide analysis).

Typically, icons come in different colors and tones to match the user-selected theme (light, dark). You can change the theme:

- In ReSharper under <menupath>Options | Environment | General | User Interface | Application icons theme</menupath>
- In Rider under <menupath>Preferences | Appearance &amp; Behavior | Appearance | Theme</menupath>
- In Visual Studio under <menupath>Options | Environment | General | Color Theme</menupath>
Typically, icons come in different colors and tones to match the user-selected theme (light, dark, etc.). You can change the theme:

<table>
<tr>
<td>Product</td>
<td>Menu Path</td>
</tr>
<tr>
<td>ReSharper</td>
<td><menupath>Options | Environment | General | User Interface | Application icons theme</menupath></td>
@@ -41,8 +41,8 @@ You can browse the library in ReSharper's internal mode (`devenv.exe /ReSharper.

On the right-hand side, you can see the name of the icon as well as the icon pack it belongs to (here `AddMissing` and `CommonThemedIcons`). Those names should be enough to reference them in your code through [code-completion](https://www.jetbrains.com/help/rider/Auto-Completing_Code.html). Each icon is contained in its own class under the `*ThemedIcons` icon pack class. Depending on the way the SDK is asking for an icon, you can pass them as:

- `typeof(ThemedIcons.Icon)` or
- `ThemedIcons.Icon.Id`
- `typeof(MyPluginThemedIcons.Icon)` or
- `MyPluginThemedIcons.Icon.Id`

## Custom Compiled Icons

@@ -88,33 +88,38 @@ Once your SVG icons are prepared and located in a common directory:
3. Select all icons you want to export
4. Choose <control>Export | Export C# Code – SVG Body</control>

A file with the compiled icons should open. Feel free to rename any of the icon, the icon pack, or move them to another namespace.
A file with the compiled icons should open. You can rename any of the icon classes, the icon pack class, or move them to another namespace.

> When targeting Rider, you should keep in mind that the pack name is defined through the parent class name of your icon classes with `ThemedIcons` trimmed from the end. If the resulting string is empty, the pack name is `Unnamed`. If you choose to keep your icon classes un-nested, the pack name is `Ungrouped`.
>
{type="warning"}

## Rider Icons

Icons that only surface in Rider (e.g., for run configurations or tool windows) are handled through the IntelliJ SDK. The equivalent of exporting compiled icons is to create a `ThemedIcons.kt` as follows:
Icons that only surface in Rider (e.g., for run configurations or tool windows) are handled through the IntelliJ SDK. The equivalent of exporting compiled icons is to create a `MyPluginThemedIcons.kt` as follows:

```kotlin
package icons

import com.intellij.openapi.util.IconLoader

// Feel free to rename
object ThemedIcons {
@JvmField val Icon = IconLoader.getIcon("/path-to/icon.svg", javaClass)
object MyPluginThemedIcons {
@JvmField val Icon = IconLoader.getIcon("/resharper/MyPlugin/Icon.svg", javaClass)
}
```

The `ThemedIcons.kt` and your SVG icons should be located as follows:
The `MyPluginThemedIcons.kt` and your SVG icons should be located as follows:

```text
src/rider/main
├── kotlin/icons
│ └── ThemedIcons.kt
│ └── MyPluginThemedIcons.kt
└── resources
└── path-to (custom or omit)
├── icon.svg
└── icon_Dark.svg
└── resharper
└── MyPlugin # pack name with 'ThemedIcons' trimmed
├── <Icon>.svg
└── <Icon_Dark.svg
```

> Please refer to the [IntelliJ Platform SDK](https://plugins.jetbrains.com/docs/intellij/work-with-icons-and-images.html) for more information.