Handling link states (hover, active, focus...)

[hiulit]

Just a thought,

I think it would be useful if when the plugin finds a file named icon-hover.svg it turns the hyphen into a colon, so at the end, the CSS would look like this:

icon:hover {

}

This could also be applied to -active and -focus.

Maybe don't make this a default behaviour, but at least have the option, like:

options: {
    linkStates: true // False by default.
}

[phloe]

State support has been requested previously (https://github.com/drdk/grunt-dr-svg-sprites/issues/20#issuecomment-44778183 and https://github.com/drdk/dr-svg-sprites/issues/27) - which lead to options.selector (broader scope - granted).

But I think what you suggested makes really good sense; very simple naming syntax with opt-in. *-hover names with options.linkStates for simple usecases - and for more advanced usecases use options.selector. I like it :)

[hiulit]

Glad you like the idea! :smile:

Because right now I've ended up with this:

prefix: 'icon-',
selector: function (filename, tokens) {
    filename = filename.replace(/_/, ':');
    var parts = [filename];
    if (tokens.prefix) {
        parts.unshift(tokens.prefix);
    }
    return '.' + parts.join("-");
},

It just looks for underscores and replaces them for colons and additionally adds the prefix _(e.g. paper-airplanehover -> icon-paper-airplane:hover).

It works, of course. But I think it would be a more clean solution to use linkStates and maybe let the user decide what character to look for and change it for a colon? Or not, and just tell the user to use whatever character we decide. I don't know.

[phloe]

How about options.stateToken; null at default but can be set to a string ("-", "~", "_", "--" etc) to pick up states?

[phloe]

Just released v0.9.21 of dr-svg-sprites with options.stateToken added :)

[hiulit]

Hey! Wow! I've been out for the weekend relaxing a bit, but I've seen you've done otherwise! ;) I'll take a look at it. Thanks!

[hiulit]

Btw, the README should be updated to show the new changes. right?

[hiulit]

You should update the dr-svg-sprites version on the package.json also ;)

[phloe]

The version isn't locked - so it should update on npm update.