ClassName CSS hook

[timv88]

Thanks for this icon set, the icons have proven to be well structured and easy to use.

One of the advantages of SVG's is that one can customize them with CSS for things like interactions (hover/click) and even animations. By being able to specify a className directly on the SVG, one does not have to wrap icons with an additional element.

Something like this would work great in my opinion:

<i data-vi="doc" data-class="vjs-icon"></i>

So that I can use CSS to customize all icons at once:

.vjs-icon .vi-primary {
  fill: blue;
}

Additionally this should also be configurable in config.js:

export let iconConfig = { 
   className: "vjs-icon"
} 

Curious to hear your thoughts for my proposal. I'd be happy to contribute to this feature.