Lexicon icon customization

[David Weitzel, modificado 6 Anos atrás.]

I am trying to implement Lexicon icons through our theme styles but cannot see an easy way to control certain aspects of the SVG "generation".
We need to have a set of classes that content managers and ADT developers can use to specify Icon as well as within the theme.

Currently I have a class that specifies the lx-icon() mixin for each icon we plan on using eg:

.calendar {background-image: lx-icon(calendar,#fff);}

and can control its background color and size by a general class:

my-icons{
background-repeat:no-repeat;
background-position:center;
background-size:22px;
display: inline-block;
font-size:16px;
height:2em;
width:2em;
}

so using <i class="my-icons calendar"></i> I get the right icon and it is very easy for content manager to use.

But how do I control things like the stroke or fill properties of the generated svg? The icons as presented dont seem sharp to our UI experts and I need to reduce the thickness of the generated lines. I am sure there will be other things to address as well.

I see these are normally passed as properties to the <svg> tag but in the above lx-icons() mixin there is no way to specify additional properties that I can see.

Any advice would be greatly appreciated.