search

shakyShane / gulp-svg-sprites

Create SVG sprites or compile to <symbols>
MIT License
334 stars 45 forks source link

Add "baseSize" setting to control the font-size on the .icon class #67

Closed elivz closed 9 years ago

elivz commented 9 years ago

I was having some problems in IE with the hard-coded 10px font-size. Possibly related to a minimum font-size allowed in the browser, but I eventually gave up trying to figure it out and just modified gulp-svg-sprites to allow for a different font-size to be set. By changing the font-size to 16px, all my problems went away. This will also be useful in the case that there will be text in the same HTML element as the SVG icon.

Usage:

gulp.task('sprites', function () {
    return gulp.src('assets/svg/*.svg')
        .pipe(svgSprite({
            baseSize: 16
        }))
        .pipe(gulp.dest("assets"));
});

Will output a CSS file starting:

.icon {
    font-size: 16px;
}

And will adjust all the em values in the CSS file as appropriate.

shakyShane commented 9 years ago

Great work - Thanks very much :)

shakyShane commented 9 years ago

in 1.1.0

Thanks for taking the time to contribute :)