tree: f7f43fb08b1fe59cf563ef8bd1692d1b2a92ae84 [path history] [tgz]
  1. src/
  2. accelerometer-bottom.png
  3. accelerometer-left.png
  4. accelerometer-right.png
  5. accelerometer-top.png
  6. BUILD.gn
  7. checker.png
  8. chromeDisabledSelect.png
  9. chromeDisabledSelect_2x.png
  10. chromeLeft.avif
  11. chromeMiddle.avif
  12. chromeRight.avif
  13. cssoverview_icons_2x.avif
  14. generate-css-vars.js
  15. navigationControls.png
  16. navigationControls_2x.png
  17. nodeIcon.avif
  18. OWNERS
  19. popoverArrows.png
  20. profileGroupIcon.png
  21. profileIcon.png
  22. profileSmallIcon.png
  23. readme.md
  24. resourcesTimeGraphIcon.avif
  25. rollup.config.js
  26. searchNext.png
  27. searchPrev.png
  28. speech.png
  29. toolbarResizerVertical.png
  30. touchCursor.png
  31. touchCursor_2x.png
  32. whatsnew.avif
front_end/Images/readme.md

Adding new icons:

  1. 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.
  2. 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.
  3. Use Icon component in the DevTools front-end: