"Icon set lab" for aegis-icons

Helps for finding design inconsistencies and other issues in all the icons.

Features

• Filter the icons by name.
• Jump between categories.
• Calculates how many icons are in the lab.
• Display the icon grid for seeing logo size irregularities.
• Change the background color (a.k.a. theme color) for seeing icon BG contrast irregularities.
  • Features theme colors used in Aegis.
• Change the size of the listed icons.
• Uses CSS scroll snapping
  • Has option to disable it, see the notes / caveats section.
• Works 100% only with keyboard too, if needed.
  • Every function has keyboard command (see the blue squares).

Demonstration

Warning – Rapidly flashing colors from 00:01 to 00:06.

2023-01-10.22-02-15.mp4

Setting up the lab

Getting the icons from aegis-icons to the lab

1. Clone / fork this project or download repo as ZIP.
2. Clone / fork aegis-icons project or download it as ZIP.

Note – Unzip the ZIP files, if you downloaded the repos as ZIP.

Windows only

Note – Both icon-set-lab & aegis-icons (or aegis-icons-master) directories needs to be side by side in the same root directory.

• Run the .___get_icons Windows BAT file.

Other OSes / alternative way

• Copy-paste icons folder from aegis-icons dir to icon-set-lab root.
• Copy-paste z_icon_grid.svg from aegis-icons\_templates dir to icon-set-lab root.

Launching the lab locally

1. Install Ruby and Jekyll with guides here.
2. Run bundle in the terminal at site's root directory.
3. Start the server.
   1. In Windows, run .___start_jekyll_server Windows BAT script.
   2. For other OSes / alternative way, run this in the terminal at lab's root directory:

   jekyll serve --host localhost --open_url

The site with http://localhost:4000/ URL should open to your default browser.

Notes / caveats

• 👍 The CSS scroll snapping works best with Firefox.
  • If you want the rapid scroll like in the demonstration video, disable Use smooth scrolling from settings.
• ⚠️ Chromium-based browsers has issues with CSS scroll snap! (As of January 2023.)
  • Holding (page) up / (page) down / space key makes scroll sluggish and barely move.
  • 💡 Solutions:
    • Disable scroll snap from lab's sidebar on the right.
    • Only scroll with mouse scroll wheel or scroll bar's up / down buttons.
    • Disable smooth scroll (works in any desktop Chromium-based browser, enables the rapid scroll like in the video)
      • ⚠️ Makes mouse scroll act weird.
• Site is responsive, but designed only desktop in mind (preferly 1920px+ width window).

Todos

• Give option to disable CSS scroll snap.
• Low priority: Migrate from Jekyll to something faster and modern (Zola possibly).
  • Issue: I don't know how to do it, Zola and others seems so much more complicated then Jekyll.

Credits

• HotKeys.js by Kenny Wong (MIT).
• Inter by Rasmus Andersson (SIL OFL 1.1).
• List.js by Jonny Strömberg (MIT).
• sanitize.css by CSS Tools (CC0 1.0 Universal).

License

The MIT License.