mirror of
https://github.com/godotengine/godot-docs.git
synced 2026-09-03 18:14:53 +03:00
Improve Editor icons documentation
- Document Scale with Editor Scale import option. - Clarify the import options are only relevant for icons present in a project, not icons created for core Godot. - Mention Godot editor icons website.
This commit is contained in:
@@ -21,32 +21,56 @@ Clone the ``godot`` repository containing all the editor icons:
|
|||||||
git clone https://github.com/godotengine/godot.git
|
git clone https://github.com/godotengine/godot.git
|
||||||
|
|
||||||
The icons must be created in a vector graphics editor in SVG format. There are
|
The icons must be created in a vector graphics editor in SVG format. There are
|
||||||
two main requirements to follow:
|
three main requirements to follow:
|
||||||
|
|
||||||
- Icons must be 16×16. In Inkscape, you can configure the document size in
|
- Icons must be 16×16. In Inkscape, you can configure the document size in
|
||||||
**File > Document Properties**.
|
**File > Document Properties**.
|
||||||
- Lines should be snapped to pixels whenever possible to remain crisp at lower DPI.
|
- Lines should be snapped to pixels whenever possible to remain crisp at lower DPI.
|
||||||
You can create a 16×16 grid in Inkscape to make this easier.
|
You can create a 16×16 grid in Inkscape to make this easier.
|
||||||
|
- If the user has configured their editor to use a light theme, Godot will
|
||||||
Once you're satisfied with the icon's design, save the icon in the cloned
|
|
||||||
repository's ``editor/icons`` folder. The icon name should match the intended
|
|
||||||
name in a case-sensitive manner. For example, to create an icon for
|
|
||||||
CPUParticles2D, name the file ``CPUParticles2D.svg``.
|
|
||||||
|
|
||||||
Color conversion for light editor themes
|
|
||||||
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
||||||
|
|
||||||
If the user has configured their editor to use a light theme, Godot will
|
|
||||||
convert the icon's colors based on a
|
convert the icon's colors based on a
|
||||||
`set of predefined color mappings <https://github.com/godotengine/godot/blob/master/editor/themes/editor_color_map.cpp>`__.
|
`set of predefined color mappings <https://github.com/godotengine/godot/blob/master/editor/themes/editor_color_map.cpp>`__.
|
||||||
This is to ensure the icon always displays with a sufficient contrast rate.
|
This is to ensure the icon always displays with a sufficient contrast rate.
|
||||||
Try to restrict your icon's color palette to colors found in the list above.
|
Try to restrict your icon's color palette to colors found in the list above.
|
||||||
Otherwise, your icon may become difficult to read on a light background.
|
Otherwise, your icon may become difficult to read on a light background.
|
||||||
|
|
||||||
.. note::
|
Once you're satisfied with the icon's design, save the icon in the cloned
|
||||||
To enable color conversion for light editor themes:
|
repository's ``editor/icons`` folder. The icon name should match the intended
|
||||||
1. :ui:`Import > Import As > Texture2D`
|
name in a case-sensitive manner. For example, to create an icon for
|
||||||
2. Set ``editor/convert_colors_with_editor_theme`` to ``true``
|
CPUParticles2D, name the file ``CPUParticles2D.svg``.
|
||||||
|
|
||||||
|
.. tip::
|
||||||
|
|
||||||
|
You can also browse all existing icons on the
|
||||||
|
`Godot editor icons <https://godotengine.github.io/editor-icons/>`__
|
||||||
|
website.
|
||||||
|
|
||||||
|
Import options for custom icons
|
||||||
|
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||||
|
|
||||||
|
For custom icons that are present in projects (as opposed to the engine source code),
|
||||||
|
there are two import options you should enable:
|
||||||
|
|
||||||
|
Scaling for hiDPI displays
|
||||||
|
^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||||
|
|
||||||
|
Icons need to be scaled properly on hiDPI displays to ensure they remain
|
||||||
|
crisp and large enough to be readable.
|
||||||
|
|
||||||
|
To ensure the icon is rendered at a correct scale on hiDPI displays, select the
|
||||||
|
SVG file in the FileSystem dock, enable the **Editor > Scale with Editor Scale**
|
||||||
|
option in the Import dock and click :button:`Reimport`. Note that this option is
|
||||||
|
only available for icons in SVG format, as it requires the use of a vector
|
||||||
|
format to work.
|
||||||
|
|
||||||
|
Color conversion for light editor themes
|
||||||
|
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||||
|
|
||||||
|
To ensure the icon has its colors converted when the user is using a light
|
||||||
|
theme, select the SVG file in the FileSystem dock, enable the **Editor > Convert
|
||||||
|
Colors with Editor Theme** option in the Import dock and click
|
||||||
|
:button:`Reimport`. Note that this option is only available for icons in SVG
|
||||||
|
format, as it requires the use of a vector format to work.
|
||||||
|
|
||||||
Icon optimization
|
Icon optimization
|
||||||
~~~~~~~~~~~~~~~~~
|
~~~~~~~~~~~~~~~~~
|
||||||
@@ -84,9 +108,8 @@ Troubleshooting
|
|||||||
If icons don't appear in the editor, make sure that:
|
If icons don't appear in the editor, make sure that:
|
||||||
|
|
||||||
1. Each icon's filename matches the naming requirement as described previously.
|
1. Each icon's filename matches the naming requirement as described previously.
|
||||||
|
2. The ``svg`` module is enabled at compile-time (it is enabled by default).
|
||||||
2. ``modules/svg`` is enabled (it should be enabled by default). Without it,
|
Without this module, icons won't appear in the editor at all.
|
||||||
icons won't appear in the editor at all.
|
|
||||||
|
|
||||||
References
|
References
|
||||||
~~~~~~~~~~
|
~~~~~~~~~~
|
||||||
|
|||||||
Reference in New Issue
Block a user