Add svg icon automator to Iconify to Gulpfile

sage
1

Is anyone using automated icon-svg rendering in their sage workflow?

I’m experimenting with adding gulp-iconify to the Gulpfile, but not successful so far.

I can add something along these lines:

// ### Gulp-iconify

gulp.task('iconify', function () {
    iconify({
      src: [path.source + 'images/icons/*.svg'],
      pngOutput: './dist/images/icons/png',
      scssOutput: './assets/styles/components',
      svgoOptions: {
        enabled: true,
        options: {
          plugins: [
            { removeUnknownsAndDefaults: false },
            { mergePaths: false }
          ]
        }
      },
      svg2pngOptions: {
        scaling: 1.0,
        verbose: true,
        concurrency: null
      }
    });
  });

with a modified sequence:

runSequence(['fonts', 'images'], 'scripts', 'styles', 'iconify', callback);

And get close:

icon-ic_print_black_18px{
    background-image:url(../assets/images/icons/png/ic_print_black_18px.png);
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAAN#etc

But as you can see, the path to the png is wrong because it’s based on the scssOutput parameter.

2

Also had to add generated sass files to main.scss:

@import "./components/icons.fallback.scss";
@import "./components/icons.png.scss";
@import "./components/icons.svg.scss";
3

Don’t have iconify working fully, but did add a couple of modules that optimize SVGs as well as creating fallback PNG files

    // ### SVG to PNG
    var svg2png = require('gulp-svg2png');

    gulp.task('svg2png', function () {
      gulp.src([path.source + 'images/*.svg'])
        .pipe(svg2png())
        .pipe(gulp.dest(path.dist + 'images'));
    });

    // ### SVG MIN - variation of svgo for Gulp
    var svgmin = require('gulp-svgmin');

    gulp.task('svgmin', function() {
      gulp.src([path.source + 'images/*.svg'])
      .pipe(svgmin(function getOptions (file) {
        var path = require("path");
        var prefix = path.basename(file.relative, path.extname(file.relative));
        return {
          plugins: [{
              removeDimensions: true
            }, {
              removeComments: true
            }, {
              cleanupNumericValues: {
                floatPrecision: 2
                }
            }, {
              addClassesToSVGElement: {
                className: prefix,
                }
              }]
            };
          }))
          .pipe(gulp.dest(path.dist + 'images'));
    });

Which can be added to the build sequence:

gulp.task('build', function(callback) {
  runSequence('styles',
              'scripts',
              ['fonts', 'images'],
              'svgmin',
              'svg2png',
              callback);

Then I can add them using file_get_contents:

<?php echo file_get_contents(Assets\asset_path('images/arrow-down.svg')) ?>

And also use a Wordpress-svg plugin so they can be added via Wordpress.

Still working on best way to handle the fallback for this type of loading. Apparently 1 in 250 web users are still on browsers that don’t support svg.

1 Like