Menu icon Foundation
SVG sprites

I've looked and didn't find a way to use the Foundation for Sites stack to minimize and generate SVG sprites from individual svg files. Is this something that's already built into Foundation?

Or do I need to create my own gulp task to minimize and generate svg sprites? If I do need to add my own gulp task, how would I go about doing so?

 

svgsvg spritefoundation sites

I've looked and didn't find a way to use the Foundation for Sites stack to minimize and generate SVG sprites from individual svg files. Is this something that's already built into Foundation?

Or do I need to create my own gulp task to minimize and generate svg sprites? If I do need to add my own gulp task, how would I go about doing so?

 

Michael Castello 2 months ago

I'm wondering this also. Will let you know what I figure out.

Michael Castello 2 months ago

Hello SVM,

I have managed to set things up so that they work within the Foundation file structure. Here is my setup:

 

// Adding svg-sprite
var svgSprite    = require('gulp-svg-sprite'),
plumber      = require('gulp-plumber'),
baseDir      = 'src/assets/images/svg',   // <-- Set to your SVG base directory
svgGlob      = '**/*.svg',       // <-- Glob to match your SVG files
outDir       = 'src/assets/',     // <-- Main output directory
config       = {
    "shape": {
        "spacing": {
            "padding": 10
        }
    },
    "mode": {
        view : {
            "sprite": "images/sprite.view.svg",
            "bust": false,
            dest : '.',
            "render": {
                "scss": {
                    "dest": "scss/components/_sprite.scss"
                }
            },
            "example": true
        }
    }
};

function sprite() {
    return gulp.src(svgGlob, {cwd: baseDir})
        .pipe(plumber())
        .pipe(svgSprite(config)).on('error', function(error){ console.log(error); })
        .pipe(gulp.dest(outDir));
}

 

You may want to set up your options for SVG-Sprite in your own way. A few key things are: 

- You need that dest: '.' to prevent svg-sprite from creating a bunch of subdirectories with the name of the method you're using to generate the sprite. 

- You need to add something to monitor your svg folder to your gulp "watch" function at the end, like so: 

gulp.watch('src/assets/images/svg/**/*.svg').on('all', sprite)

The setup I've described above uses the "view" method of SVG-sprite, watches for svgs in src/assets/images/svg, and outputs the sprite to src/assets/images with the scss to src/assets/scss/components. 

Hope this helps.

SVM 2 months ago

@Michael, thank you very much for your attempt to find a solution to my question about creating SVG sprites within Foundation 6.4. For some reason, I can't get your solution to work for me.

I'm curious if you're able to find a solution to use gulp-svgstore instead of gulp-svg-sprite? The reason being so is that I need to implement the svg sprite with the <svg><use> method. It seems that gulp-svg-sprite doesn't support this option?

Also, which Foundation version are you using? I noticed that you've defined variables for svg-sprite and plumber. I understand Foundation 6.4 uses load-plugins and defines all plugins variables into a $ dollar sign.

In other words, wouldn't function would be adapted as (notice the $ dollar sign in front of plumber and svgSprite)?

function sprite() {
  return gulp.src(svgGlob, {cwd: baseDir})
    .pipe($.plumber())
    .pipe($.svgSprite(config)).on('error', function(error){ console.log(error); })
    .pipe(gulp.dest(outDir));
}

Michael Castello 2 months ago

My comments are getting flagged for some reason. Possibly because of all the pasting? 

 

I'm curious if you're able to find a solution to use gulp-svgstore instead of gulp-svg-sprite? The reason being so is that I need to implement the svg sprite with the <svg><use> method. It seems that gulp-svg-sprite doesn't support this option?

Gulp-svgsprite supports every svg sprite method known to humankind. Their documentation is pretty extensive for all the different ways you can use it, but for the purpose you're describing, my example below will work to create an .svg sprite file you can include either inline or externally, and then refer to throughout the document with <use>.

 

Also, which Foundation version are you using? I noticed that you've defined variables for svg-sprite and plumber. I understand Foundation 6.4 uses load-plugins and defines all plugins variables into a $ dollar sign

I'm using Foundation 6.4. You are correct that it uses load-plugins and those variables aren't needed. However you do still need the variables for configuring svg-sprite as in the example below:

 

var baseDir      = 'src/assets/images/svg',   // <-- Set to your SVG base directory
svgGlob      = '**/*.svg',       // <-- Glob to match your SVG files
outDir       = 'src/assets/',     // <-- Main output directory
config       = {
    "shape": {
        "spacing": {
            "padding": 10
        }
    },
    "transform": [],
    "mode": {
        symbol: {
          sprite: "images/sprite.symbol.svg",
          bust: false,
          dest: '.',
          render: {
            scss: {
              dest: "scss/components/_sprite.scss"
            }
          },
          example: true,
          inline: true
        }
    }
};

Then use it as follows:

 

function sprite() {
    return gulp.src(svgGlob, {cwd: baseDir})
        .pipe($.plumber())
        .pipe($.svgSprite(config)).on('error', function(error){ console.log(error); })
        .pipe(gulp.dest(outDir));
}

 

 

Negativefix about 2 months ago

@SVM I don't think Foundation templates provides the functionality you have asked. They might add it in the future.

In a small project I am currenlty working on, I'm using iconmoon to generate svg sprites. You can either pick icons from the collections they provide or upload yours. BTW they use <svg><use> method. If you are dealing with small number of icons you can take this path.

Hope it helps.