react-native-devtools-frontend/front_end/Images/readme.md at bedbd4f3fe201caedff255ae97fdf875e13063f8

mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-10-07 04:26:32 +08:00

Files

T

Tim van der Lippe 727227900c Dynamically optimize svgs

Currently, we optimize our SVGs out-of-sync and have a Python
script and PRESUBMIT check to make sure that the SVGs are correctly
optimized. This means that the SVGs are duplicated in the Images
folder and requires developers to install `svgo` on their command
line, which could be using differing versions.

Instead, we can optimize the SVG images (which is computationally
cheap) during build time using the rollup-plugin-import-meta-assets
and svgo packages. The rollup plugin traverses the required SVG
image files and puts them and rewrites them to the Images/ folder
(rather than in src/), while also allowing us to optimize them
along the way.

DISABLE_THIRD_PARTY_CHECK=Removing script from package.json
R=jacktfranklin@chromium.org

Bug: 1216402
Change-Id: Ieb6932b9a81753be5ecbccd00a5d84bd0efa23f8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2939994
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>

2021-06-10 10:09:30 +00:00

1.3 KiB

Raw Blame History

Adding new icons:

Out of a spritesheet (if you have a separately saved icon already go to 2.):
- Open a spritesheet with the icon of interest, like largeIcons.svg in Inkscape.
- Make sure it's the src/ version of the spritesheet.
- Copy-paste the icon to a new page. Make sure it preserved its original size and aspect ratio, and isn't otherwise altered.
- To make sure step (3) below doesn't destroy the icon, it might be necessary to resize it. Just select everything and use the elements in the top toolbar to resize the icon (make sure the aspect ratio is preserved).
- Set the size of the page to match the icon. You may use Inkscape's Edit>Resize Page to Selection command to accomplish this.
- If you chose to include padding in the icon, make sure the icon is centered within the page.
- Save the icon with _icon.svg suffix. For instance list_icon.svg.
Add respective entries to .gni files.
- Update the devtols_image_files list in config/gni/devtools_image_files.gni.
- Update the grd_files_release_sources list in config/gni/devtools_grd_files.gni.
Use Icon component in the DevTools front-end:
- Visit https://docs.google.com/document/d/1EA--IokG6YW51y7unS8dIKUx6EtyjETT0uglmvIpfsg/edit#heading=h.xgjl2srtytjt for more information on that.

1.3 KiB Raw Blame History

Adding new icons:

1.3 KiB

Raw Blame History