Skip to content

chriswburke/gulp-sass-inline-svg

Repository files navigation

gulp-sass-inline-svg

Updated to support Sass 3.5+ get-function requirements


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 gulp-sassvg and follows recommendations for optimizing inline svgs for full browser support.

Install

npm install gulp-sass-inline-svg --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 sassInlineSvg = require('gulp-sass-inline-svg');
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(sassInlineSvg({
        destDir: './icons'
      }));
});
// 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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published