Change any svg attribute eg. stroke and fill in css by embedding them as data uris

styles.less

// Inspiration taken from http://zslabs.com/articles/svg-background-fill/
// Note that this will replace all provided attributes in all elements in the svg, currently limited to two parameters
.icon-color(@src, @color, @attr) {    
    @escape-color: escape("@{color}");
    @data-uri: data-uri('image/svg+xml;charset=UTF-8', "@{src}");    
    @attr1: extract(@attr, 1);
    @attr2: extract(@attr, 2);
    @val1: replace("@{data-uri}", "@{attr1}%3D%22(.*?)%22", "@{attr1}%3D%22@{escape-color}%22", "gi");
    @val2: replace("@{val1}", "@{attr2}%3D%22(.*?)%22", "@{attr2}%3D%22@{escape-color}%22", "gi");
    background-image: e(@val2);
}

// Shortcut for making plain data uris without attribute replacements
.icon(@src) {
    @data-uri: data-uri('image/svg+xml;charset=UTF-8', "@{src}");    
    background-image: @data-uri;
}

// Usage examples
.element { 
    .icon-color("img/svg/some-svg.svg", @color2, stroke);
    &:hover { .icon-color("img/svg/some-svg.svg", @color1, stroke); }
}

.element { 
    .icon-color("img/svg/some-svg.svg", @color2, stroke, fill);
    &:hover { .icon-color("img/svg/some-svg.svg", @color1, stroke, fill); }
}

.element { 
    .icon("img/svg/some-svg.svg");
}