Loading…
2
Warning: I hardcoded 43 color hex values in my icon set, then switched to CSS variables
Back in March I shipped a 24 icon set for a client in Denver and I typed out every hex value by hand right in the SVG files, which took about 9 hours and felt fine at the time. The catch is that when they asked for a darker theme 3 weeks later, I had to open all 24 files and swap 43 hex codes one at a time, and I missed two of them so the share icon still glowed light blue on dark mode. Now I drop everything into CSS variables at the top of one file, so a theme swap is like 6 lines and takes 4 minutes. The other side of this is that the raw SVG files aren't self contained anymore, so if someone grabs a single icon and drops it in their own project it looks broken on a dark page. So which one wins for you: hardcoded SVGs you can hand off one by one, or variable driven ones that are a pain to export? I honestly flip flop on this every time a new project starts and I want to hear what other people landed on.
1 comments
Log in to join the discussion
Log In1 Comment
the_aaron19d ago
Why not just do both? Keep the variables at the top of the SVG so each file still works on its own, and you get the theme swap too. That export problem only bites you if you're handing off a single icon as a loose file, and how often does that really happen?
4