m2-sass-inlinesvg

Gulp plugin for converting svg files into sass functions in order inline svgs in your css files and use as background-image icons. Based on the gulp plugin Fork of gulp-sassvg and follows recommendations for optimizing inline svgs for full browser support.

Install

npm install m2-sass-inlinesvg --save-dev

Basic Usage

Note: Currently sass-inline-svg does not support css classes used to style svgs but rather requires presentation attributes (.e.g fill, stroke, etc) When exporting the svg make sure that you select the option to use presentation attributes.

// gulpfile.js
var m2SassInlinesvg = require('m2-sass-inlinesvg');
var svgmin = require('gulp-svgmin');

gulp.task('sass:svg', function(){
    return gulp.src('./path/to/svgs/folder/**/*.svg') 
      .pipe(svgmin()) // Recommend using svg min to optimize svg files first
      .pipe(m2SassInlinesvg({
        destDir: './icons',
        prefix: 'mytheme'
      }));
});

// sass file
@import "sass-inline-svg.scss";

.icon-test-blue {
  background-image: inline-svg("iconname", blue);
}

.icon-facebook {
  background: url( inline-svg("facebook", #FFAFF, $url:false) ) no-repeat; 
}

.icon-arrow-left {
  background-image: inline-svg("arrow-left", rgba(224, 51, 224, 0.79));
}

/* Generated css */

.icon-blue {
  background-image: url("data:image/svg+xml,<svg ...> ... </svg>");
}

.icon-facebook {
  background: url("data:image/svg+xml,<svg ...> ... </svg>") no-repeat;
}

.icon-blue {
  background-image: url("data:image/svg+xml,<svg ...> ... </svg>");
}

Icon Mixin

// sass file 

@import "sass-inline-svg.scss";

.icon-arrow-left-blue {
  @include inline-svg-icon("arrow-left", blue, center, 2rem 2rem);
}

/* Generated css */

.icon-arrow-left-blue {
  background-image: url("data:image/svg+xml...");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2rem 2rem;
}

Automatically create classes for svg icons

// sass file 

@import "sass-inline-svg.scss";

// folder that your icons are in. If you have multiple folders with svg icons,
// you will want to repeat this for each group (folder) of icons.

$folder: "icons"; 
@each $icon in svg-list($folder){
  $url: inline-svg($icon, #1a1ab4);
  
  // Use whatever prefix you'd like on your icons, we are using $folder here by 
  // default
  .#{$folder}-#{$icon} {
      background-image: $url;
  }
}

## Issues

File bugs at https://bitbucket.org/davemosemann/gulp-sass-inline-svg/issues