gulp-svg-sprites
gulp-svg-sprites copied to clipboard
How to add background in CSS?
If I use <i class="icon facebook"></i>
the svg is rendered.
But say I want to add the svg as background in CSS.
.myclass {
background: *** // How do I get the svg here?
}
@Ajeey well you have some options.
all included templates for generating the css / scss from your svg files are using the :before selector to set the background image / size and position styles.
if that is not a problem for you you can just "extend" the icon class in your css / html
<div class="myclass svg-icon-youricon"></div>
which will add the icon (styles) to the :before element of your .myclass
you can also write your own template that does not use :before.
templates are here https://github.com/shakyShane/gulp-svg-sprites/tree/master/tmpl
if you use sass / scss you can make use of the mixin feature. i would use https://github.com/shakyShane/gulp-svg-sprites/blob/master/tmpl/sprite.scss and just extract the background style definition to an extra mixin. so you can use it everywhere
@Ajeey Could this be what you are looking to do? Just replace with insert_dir_here with the location where the sprite is located. I just used the following below.
Possible option for insert_dir_here:
'../image/sprite/{{{sprite}}}
{{#shapes}}
{{#first}}
.myclass {
background-image: url('__insert_dir_here__');
}
{{/first}}
.icon--{{base}} {
/*add other code here*/
}
{{/shapes}}
@soenkekluth using the :before attribute is a great option as well!