Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Checking the stable version of the documentation...

Iconos del editor

Cuando se crea una nueva clase y se expone a los scripts, la interfaz del editor la mostrará con un icono predeterminado que representa la clase base de la cual hereda. En la mayoría de los casos, se recomienda crear íconos para las nuevas clases para mejorar la experiencia del usuario.

Crear iconos

Para crear nuevos íconos, primero necesitas tener instalado un editor de gráficos vectoriales. Por ejemplo, puedes utilizar el editor de código abierto Inkscape.

Clona el repositorio godot que contiene todos los íconos del editor:

git clone https://github.com/godotengine/godot.git

The icons must be created in a vector graphics editor in SVG format. There are three main requirements to follow:

  • Los íconos deben tener un tamaño de 16×16 píxeles. En Inkscape, puedes configurar el tamaño del documento en Archivo > Propiedades del documento.

  • Las líneas deben alinearse con los píxeles siempre que sea posible para mantenerse nítidas en DPI más bajos. Puedes crear una cuadrícula de 16×16 en Inkscape para facilitar esto.

  • If the user has configured their editor to use a light theme, Godot will convert the icon's colors based on a set of predefined color mappings. 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. Otherwise, your icon may become difficult to read on a light background.

Una vez que estés satisfecho con el diseño del icono, guarda el icono en la carpeta editor/icons del repositorio clonado. El nombre del icono debe coincidir con el nombre previsto de manera sensible a mayúsculas y minúsculas. Por ejemplo, para crear un icono para CPUParticles2D, nombra el archivo CPUParticles2D.svg.

Truco

You can also browse all existing icons on the Godot 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 Reimport. Note that this option is only available for icons in SVG format, as it requires the use of a vector format to work.

Conversión de color para temas de editor claros

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 Reimport. Note that this option is only available for icons in SVG format, as it requires the use of a vector format to work.

Optimización de iconos

Because the editor renders SVGs once at load time, they need to be small in size so they can be efficiently parsed. When the pre-commit hook runs, it automatically optimizes the SVG using svgo.

Nota

Si bien este paso de optimización no afectará notablemente la calidad del icono, aún eliminará información específica del editor, como guías. Por lo tanto, se recomienda mantener el archivo SVG original si necesitas realizar cambios adicionales.

Integrar y compartir los iconos

Si estás contribuyendo al motor en sí, debes hacer una solicitud de extracción (pull request) para agregar los íconos optimizados a la carpeta editor/icons en el repositorio principal. Luego, vuelve a compilar el motor para que tome los nuevos íconos para las clases.

También es posible crear íconos personalizados dentro de un módulo. Si estás creando tu propio módulo y no planeas integrarlo con Godot, no es necesario hacer una solicitud de extracción separada para que tus íconos estén disponibles dentro del editor, ya que pueden ser autocontenidos.

For specific instructions on how to create module icons, refer to Creating custom module icons.

Solución De Problemas

Si los íconos no aparecen en el editor, asegúrate de que:

  1. El nombre de archivo de cada icono coincide con el requisito de nomenclatura descrito anteriormente.

  2. The svg module is enabled at compile-time (it is enabled by default). Without this module, icons won't appear in the editor at all.

Referencias