编辑器图标

编辑器图标

When a new class is created and exposed to scripting, the editor’s interface will display it with a default icon representing the base class it inherits from. In most cases, it’s still recommended to create icons for new classes to improve the user experience.

创建图标

To create new icons, you first need a vector graphics editor installed. For instance, you can use the open source Inkscape editor.

Clone the godot repository containing all the editor icons:

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

图标必须在矢量图形编辑器中以 SVG 格式创建。要遵循两个主要要求：

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.

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 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.

图标优化

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:

Install svgcleaner by downloading a binary from its Releases tab and placing it into a location in your PATH environment variable.
Run the command below, replacing svg_source.svg with the path to your SVG file (which can be a relative or absolute path):
```
svgcleaner --multipass svg_source.svg svg_optimized.svg
```

The --multipass switch improves compression, so make sure to include it. The optimized icon will be saved to svg_optimized.svg. You can also change the destination parameter to any relative or absolute path you’d like.

注解

While this optimization step won’t impact the icon’s quality noticeably, it will still remove editor-only information such as guides. Therefore, it’s recommended to keep the source SVG around if you need to make further changes.

集成和分享图标

If you’re contributing to the engine itself, you should make a pull request to add optimized icons to editor/icons in the main repository. Recompile the engine to make it pick up new icons for classes.

也可以在模块内创建自定义图标。如果您要创建自己的模块，并且不打算将其与Godot集成，则不需要单独的拉取请求即可在编辑器中使用图标，因为它们可以独立存在。

有关如何创建模块图标的特定说明，请参考创建自定义模块图标。

故障排除

If icons don’t appear in the editor, make sure that:

每个图标的文件名都符合前面所述的命名要求。
modules/svg is enabled (it should be enabled by default). Without it, icons won’t appear in the editor at all.

参考

editor/icons