A web app that aligns and minifies SVG icons for the web.
Exporting icons as SVG from tools like Figma can be hit or miss. The code is messy, and colors may not match.
With Iconish, you can quickly tidy and sync your icon sets. Align colors, refine paths, and shrink code size for the best possible finish.
⚡ Iconish is built with performance in mind and has been tested with icon sets containing hundreds of icons without lag.
This is a pretty crazy feat when you consider that each icon runs through custom path transformations and then optimized and minified with SVGO, not to mention each SVG has its own code editor!
I’ve used Million.js to render the UI and Zustand to avoid state issues within React. A virtual list helps keep the UI butter-smooth when scrolling. On top of this, I’ve used a caching strategy to only re-render the list of SVGs when a hash is updated.
There’s still more caching to add but I’m happy with the performance wins so far.
- Next.js - Framework
- Million.js - Faster React
- TailwindCSS - Styling framework
- Radix UI - Component library
- Zustand - State management
- SVGO - SVG optimizer
- Virtuoso - Virtual list
- CodeMirror - Code editor
Note that is beta software so there will be bugs - feel free to post issues as they’re found.