Grunt, scss and hbs for turning svgs into icons and pngs,

Gruntfile.js

// requires 
/*
* https://github.com/filamentgroup/grunticon
* https://www.npmjs.org/package/grunt-text-replace
*/

'use strict';

module.exports = function (grunt) {

  // Load grunt tasks automatically
  require('load-grunt-tasks')(grunt);

  // Time how long tasks take. Can help when optimizing build times
  require('time-grunt')(grunt);

  // Define the configuration for all the tasks
  grunt.initConfig({
  
  grunticon: {
      svgicons: {
          files: [{
              expand: true,
              cwd: 'images/svg-icons',
              src: ['*.svg', '*.png'],
              dest: "styles/scss/icons/generated"
          }],
          options: {
            svgo: true,
            pngcrush: true,
            cssprefix:  '%icon-',
            
            datasvgcss: '_icons-data-svg.scss',
            datapngcss: '_icons-data-png.scss',
            urlpngcss:  '_icons-fallback.scss',
            
            template: "styles/scss/icons/icon-template-css.hbs"

          }
      }
    },

    replace: {
      nosvgicons: {
        src: [
          'styles/scss/icons/generated/_icons-fallback.scss'
        ],
        overwrite: true,
        replacements: [{
          from: '%icon-',
          to: '%nosvg-icon-'
        }]
      }
    }



  });

  grunt.registerTask('svgicons',[
    'grunticon:svgicons',
    'replace:nosvgicons'
  ]);

icon-template-css.hbs

{{#each customselectors}}{{this}},{{/each}}
{{prefix}}{{name}} {
    background-image: url('{{datauri}}');
}

icons.scss

/* ==========================================================================
= Icons
========================================================================== */

// = firstly import generated icons
@import "generated/icons-data-svg";
@import "generated/icons-fallback";

//declare global icon usage
[class^="icon-"],
[class*=" icon-"] {
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    background:transparent  no-repeat 50% 50% / contain;
}

// = develop the mixin for the files
@mixin grunticon($name) {

    width: 100px;
    height: 100px;
    &,
    .no-svg &{
        @extend %nosvg-icon-#{$name};
    }

    .svg & {
        @extend %icon-#{$name};
    }
}

// = Declare all icons based on svg-icon file name
.icon-chevron {
    @include grunticon(chevron);
}

.icon-logo {
    @include grunticon(logo);
}