mirror of
https://github.com/godotengine/godot-docs.git
synced 2026-01-07 02:12:07 +03:00
Update Editor icons information to follow changes in the master branch
See https://github.com/godotengine/godot/pull/36513.
This commit is contained in:
@@ -11,47 +11,33 @@ to improve the user experience.
|
||||
Creating icons
|
||||
~~~~~~~~~~~~~~
|
||||
|
||||
In order to create new icons, you first need a vector graphics editor installed.
|
||||
For instance, you can use the open-source `Inkscape <https://inkscape.org/>`_ editor.
|
||||
To create new icons, you first need a vector graphics editor installed.
|
||||
For instance, you can use the open source `Inkscape <https://inkscape.org/>`_ editor.
|
||||
|
||||
Clone the ``godot-design`` repository containing all the original editor icons:
|
||||
Clone the ``godot`` repository containing all the editor icons:
|
||||
|
||||
.. code-block:: bash
|
||||
|
||||
git clone https://github.com/godotengine/godot-design
|
||||
git clone https://github.com/godotengine/godot
|
||||
|
||||
The icons must be created in a vector graphics editor in ``svg`` format. You
|
||||
can use ``engine/icons/inkscape_template.svg`` with default icon properties
|
||||
already set up.
|
||||
The icons must be created in a vector graphics editor in SVG format. There are
|
||||
two main requirements to follow:
|
||||
|
||||
Once you're satisfied with the icon's design, save the icon in
|
||||
``engine/icons/svg/`` folder. But in order for the engine to automatically
|
||||
pick up the icons, each icon's filename:
|
||||
- Icons must be 16×16. In Inkscape, you can configure the document size in
|
||||
**File > Document Properties**.
|
||||
- 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.
|
||||
|
||||
1. Must be prefixed with ``icon_``.
|
||||
|
||||
2. ``PascalCase`` name should be converted to ``snake_case``, so words
|
||||
are separated by ``_`` whenever case changes, and uppercase acronyms must
|
||||
also have all letters, numbers, and special characters separated as distinct
|
||||
words. Some examples:
|
||||
|
||||
+--------------------+----------------------------------+
|
||||
| Name | Filename |
|
||||
+====================+==================================+
|
||||
| ``Polygon2D`` | ``icon_polygon_2_d.svg`` |
|
||||
+--------------------+----------------------------------+
|
||||
| ``CSGPolygon`` | ``icon_c_s_g_polygon.svg`` |
|
||||
+--------------------+----------------------------------+
|
||||
| ``CPUParticles2D`` | ``icon_c_p_u_particles_2_d.svg`` |
|
||||
+--------------------+----------------------------------+
|
||||
| ``C#`` | ``icon_c_#.svg`` |
|
||||
+--------------------+----------------------------------+
|
||||
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``.
|
||||
|
||||
Icon optimization
|
||||
~~~~~~~~~~~~~~~~~
|
||||
|
||||
Because the editor renders the ``svg``'s at runtime, they need to be small
|
||||
in size, so they can be efficiently parsed. Editor icons must be first
|
||||
Because the editor renders SVGs once at load time, they need to be small
|
||||
in size so they can be efficiently parsed. Editor icons must be first
|
||||
optimized before being added to the engine, to do so:
|
||||
|
||||
1. Add them to the ``engine/icons/svg`` folder.
|
||||
@@ -69,10 +55,8 @@ Integrating and sharing the icons
|
||||
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
|
||||
If you're contributing to the engine itself, you should make a pull request to
|
||||
add optimized icons to ``godot/editor/icons`` in the main repository. Recompile
|
||||
the engine to make sure it does pick up new icons for classes. Once merged,
|
||||
don't forget to add the original version of the icons to the ``godot-design``
|
||||
repository so that the icon can be improved upon by other contributors.
|
||||
add optimized icons to ``editor/icons`` in the main repository. Recompile the
|
||||
engine to make it pick up new icons for classes.
|
||||
|
||||
It's also possible to create custom icons within a module. If you're creating
|
||||
your own module and don't plan to integrate it with Godot, you don't need to
|
||||
@@ -89,10 +73,10 @@ If icons don't appear in the editor make sure that:
|
||||
|
||||
1. Each icon's filename matches the naming requirement as described previously.
|
||||
|
||||
2. ``modules/svg`` is enabled (should be enabled by default). Without it, icons
|
||||
won't appear in the editor at all.
|
||||
2. ``modules/svg`` is enabled (it should be enabled by default). Without it,
|
||||
icons won't appear in the editor at all.
|
||||
|
||||
References:
|
||||
~~~~~~~~~~~
|
||||
References
|
||||
~~~~~~~~~~
|
||||
|
||||
- `editor/icons <https://github.com/godotengine/godot/tree/master/editor/icons>`__
|
||||
|
||||
Reference in New Issue
Block a user