mirror of
https://github.com/JetBrains/intellij-sdk-code-samples.git
synced 2025-07-29 01:37:51 +08:00
* Add UI Guidelines to SDK docs * Add UI Guidelines to SDK docs * Fixing build errors * optimize PNGs * add UI guidelines landing page placeholder * IJ SDK Docs <-> UI guidelines crosslinks updated * split_button.md: remove reference to removed setting * use <ui-path> * use MD instead of <note> * use %gh-ic% links * drop_down.md: fix <control> * code samples: fix most obvious issues * remove obsolete `_defaults.md` * ijs.tree: UI cleanup * Delete "under construction" pages * Fix headers * Add link-summary * Remove invalid links * Delete unused files * Remove ''@2x' from image file names * Use Markdown syntax for some images and tables * Rename non-unique files to unique * Remove alpha in images where content is unreadable * align quotation marks * Controls: cleanup/fixes, add code links, edit * tooltip.md: fix HTML * misc fixes * typography.md: fix table contents * typography.md: fix table header * UI guidelines landing page + TOC fixes * remove unused icons_list.md * Normalize image paths * validation_errors.md: Fix broken tab * "correct"/"incorrect" labels styling * Resize images to 50% * button.topic: fixes * grammar, spelling, minor edits * remove ' ' * fix 99px * cleanup * UI_kit.md: minor * Fix "MRK058: Large image in paragraph rendered as a block element by default." * button.topic: Add img[alt] * mnemonics.md: Update "Contact Us" link to the IJSDK YouTrack * split_button.md: Use ui-path * UI landing: add feedback snippet * Improve code snippets formatting and naming * Fix code samples * Fix code samples * Add Kotlin variants for code samples * Add icons_list.md * crosslinks * Change external link to https://intellij-icons.jetbrains.design/ * icons list -> https://intellij-icons.jetbrains.design * Hide info about reducing split button to simple action button (now it is available through the registry only) * reformat * icons_style.md: Images in new line --------- Co-authored-by: marianna.kononenko <marianna.kononenko@jetbrains.com> Co-authored-by: Yann Cébron <yann.cebron@jetbrains.com>
106 lines
6.7 KiB
Markdown
106 lines
6.7 KiB
Markdown
<!-- Copyright 2000-2023 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license. -->
|
|
|
|
# Plugin Logo
|
|
|
|
<link-summary>Plugin logo requirements and best practices.</link-summary>
|
|
|
|
Beginning in version 2019.1, the IntelliJ Platform supports representing a plugin with a logo.
|
|
A _Plugin Logo_ is intended to be a unique representation of a plugin's functionality, technology, or company.
|
|
|
|
**Note:** icons and images used within a plugin have different requirements.
|
|
See [](icons.md) for more information.
|
|
|
|
## Plugin Logo Usages
|
|
Plugin Logos are shown in the [JetBrains Marketplace](https://plugins.jetbrains.com).
|
|
They also appear in the Settings [Plugin Manager](https://www.jetbrains.com/help/idea/managing-plugins.html) UI in IntelliJ Platform-based IDEs.
|
|
Whether online or in the product UI, a Plugin Logo helps users to identify a plugin more quickly in a list, as shown below:
|
|
|
|
{width="800"}
|
|
|
|
> When browsing [custom plugin repositories](custom_plugin_repository.md), there is no support for showing logos for plugins hosted there but not yet installed.
|
|
>
|
|
{style="note"}
|
|
|
|
## Plugin Logo Requirements
|
|
|
|
> Please see also these [important requirements](https://plugins.jetbrains.com/docs/marketplace/plugin-overview-page.html#plugin-logo) for JetBrains Marketplace.
|
|
>
|
|
{style="note"}
|
|
|
|
For a Plugin Logo to be displayed correctly within an IntelliJ Platform-based IDE, it must:
|
|
* Follow the best practices design guidelines,
|
|
* Be in the correct file format,
|
|
* Conform to file name conventions,
|
|
* Have the correct size,
|
|
* Be in the <path>META-INF</path> folder of the plugin distribution file.
|
|
|
|
### Plugin Logo Size
|
|
The Plugin Logo should be provided in one size: 40px by 40px.
|
|
|
|
A Plugin Logo is displayed in two sizes, and scales automatically in each context:
|
|
* 40px by 40px in the plugins list in the Plugin Manager UI.
|
|
* 80px by 80px in the plugin details screen in the Plugin Manager UI and on the plugin's page in JetBrains Marketplace.
|
|
|
|
Verify that Plugin Logo designs are effective in both sizes and all display contexts.
|
|
|
|
### Plugin Logo Shape
|
|
Plugin Logo designs should leave at least 2px transparent padding around the perimeter, as shown below:
|
|
|
|
{width="225"}
|
|
|
|
Make sure Plugin Logos have the same visual weight as the logos in the examples below.
|
|
The more filled a Plugin Logo design is, the less actual space it needs.
|
|
See more examples of [visual weight compensation](icons_style.md#basic-shapes) in the UI Guidelines for Icons.
|
|
|
|
For basic shapes, use the following sizes.
|
|
Note the different areas of transparent padding used for each shape:
|
|
|
|
| {width="225"} | {width="225"} |
|
|
|:---------------------------------------------------------------------------:|:-----------------------------------------------------------------------:|
|
|
| _Square logo 32px by 32px_ | _Circular logo 36px in diameter_ |
|
|
| {width="225"} | {width="225"} |
|
|
| _Horizontal rectangular logo 36px by 26px_ | _Vertical rectangular logo 26px by 36px_ |
|
|
{style="none"}
|
|
|
|
### Plugin Logo Colors
|
|
If the plugin's technology already has a logo, use its colors.
|
|
Check the license terms before using the logo.
|
|
If there is no existing logo, or its use is prohibited, create a custom logo based on the [Action Colors Palette](icons_style.md#action-icons) in the UI Guidelines for Icons.
|
|
|
|
| {height="200" width="200"} | {:height="200" width="200"} |
|
|
|:--------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------:|
|
|
| _The YouTrack Plugin Logo uses<br/>the YouTrack product logo_ | _The Keymap Plugin Logo uses a color<br/>from the Action Colors Palette_ |
|
|
{style="none"}
|
|
|
|
Ensure a Plugin Logo is visible on both light and dark backgrounds.
|
|
If one Plugin Logo design does not work on both light and dark backgrounds, create separate light and dark versions of the Plugin Logo.
|
|
The examples below illustrate how a Plugin Logo design may work well for a light background but not for a dark background.
|
|
Consequently, a separate Plugin Logo for dark backgrounds is needed.
|
|
|
|
| {width="225"} | {width="225"} | {width="225"} |
|
|
|:-------------------------------------------------------------:|:---------------------------------------------------------------------:|:------------------------------------------------------------------:|
|
|
| _The light Plugin Logo design<br/>works well on light theme_ | _The light Plugin Logo design does<br/>not work well on a dark theme_ | _A separate, dark Plugin Logo design<br/>works well on dark theme_ |
|
|
{style="none"}
|
|
|
|
### Plugin Logo File Format
|
|
All Plugin Logo images must be in SVG format.
|
|
This vector image format is required because the Plugin Logo file must be small (ideally less than 2-3kB), and the image must scale without any loss of quality.
|
|
|
|
> Using automatic conversion of bitmap graphics to SVG is highly discouraged, as the resulting files have excessive size (100kB or more).
|
|
>
|
|
{style="warning"}
|
|
|
|
### Plugin Logo File Naming Convention
|
|
Name the Plugin Logo files according to the following conventions:
|
|
* <path>pluginIcon.svg</path> is the default Plugin Logo.
|
|
If a separate Logo file for dark themes exists in the plugin, then this file is used solely for light themes,
|
|
* <path>pluginIcon_dark.svg</path> is an optional, alternative Plugin Logo for use solely with dark IDE themes.
|
|
|
|
## Adding Plugin Logo Files to a Plugin Project
|
|
The Plugin Logo files must be in the <path>META-INF</path> folder of the plugin distribution file, i.e., the <path>plugin.jar</path> or <path>plugin.zip</path> file you upload to the plugin repository and install into an IDE.
|
|
|
|
To include Plugin Logo files in your distribution file, place the Plugin Logo files into a plugin project's <path>resources/META-INF</path> folder.
|
|
For example:
|
|
|
|
{width="450"}
|