Using colors with customSelectors

[alexlande]

Problem

I have an icon that I use in multiple colors, and I toggle colors on hover. Due to the :hover requirement, I use customSelectors to select the correct image like so (names changed and selector object shortened considerably for clarity):

"arrow": [".arrow"],
"arrow-hover": [".arrow:hover"]

Instead of using the filename color naming convention to generate my normal and hover color versions of the icon, I need to use two identical .svg files with colors changed. This isn't ideal (and becomes problematic when you have multiple variants of an icon with their own hover states).

Solution?

In a perfect world, I could do something like this:

"arrow": {
  default: [".arrow"],
  colors: [
    "green": [".arrow:hover"]
  ]
}

This is still pretty gnarly from a configuration perspective, but it would be a lot cleaner than having a messy config object and a bunch of .svg images in different colors floating around.

Halp!

If anyone has good ideas for alternate ways to deal with this, let me know. On some projects I've made sprites for each of my icons with the different states, and used background-position to toggle them. That leaves you with cleaner config and fewer files, but isn't perfect.

[jefflembeck]

ya know, i don't hate that change at ALL.

I'd like to sit on this for a bit on a "how?" note, but am very open

[jefflembeck]

Still thinking on this - it'd be a breaking change to customSelectors so we'd need it on a far-out roadmap. It's not going to make it into 2.0

[zachleat]

This repository is now using lodash style issue management for enhancements. This means enhancement issues will now be closed instead of leaving them open.

View the enhancement backlog here. Don’t forget to upvote the top comment with 👍!