Menu icon Foundation

Developer

My Posts


  • 11
    Replies
  • SVG sprites

    By SVM

    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 genera... (continued)

    Last Reply by Ashley Taylor about 1 month ago


  • NEW
  • Generating SVG sprites

    By SVM

    svgfoundation-sitessvg sprites

    Hello, I love Foundation 6, especially with the addition of the XY grid! 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 ... (continued)


My Comments

SVM commented on SVM's post about 1 month

@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));
}

SVM commented on Martin's post about 2 months

What I've noticed is that this undefined variable error only appears to be affecting plugins that are written using self-invoking scripts. Does anyone have a reason why that would be the case? How can this be resolved?
Also, it appears that this happens to plugins that doesn't have an ES6 export option. What is Zurb the recommendation on using plugins that doesn't have ES6 support? How can we still include non-ES6 plugins in our projects?

SVM commented on SVM's post about 2 months

Thanks Rafi for the reply. I would like to keep the data variables in a single file (especially since the data content are of the same type). I have used the #ifpage helper and see that it's written like so on this page: https://github.com/zurb/panini/blob/master/helpers/ifPage.js
I know that there's #ifequal helper as well, but that doesn't seem to work to look for css classes. I'm curious if this example can be written into a custom handelbars helper to look for <section> tags or use css classes? Can you provide an example of how this could work or be written?
 

SVM commented on Martin's post 2 months

Does anyone have a progress update on this issue? I've ran into the same issue as Jonathan Davis. I'm able to import the Owl Carousel 2 plugin into my app.js file. However, there is an error Cannot read property 'fn' of undefined because Owl Carousel uses $.fn.owlCarousel = function (option) when adding next/prev elements, so this error causes all of Foundation scripts to stop functioning. How does this get resolved?
app.js:23544 Uncaught TypeError: Cannot read property 'fn' of undefined
at app.js:23544
at Object.typeof (app.js:23578)
at __webpack_require
_ (app.js:20)
at Object.<anonymous> (app.js:25520)
at webpack_require (app.js:20)
at Object.defineProperty.value (app.js:14482)
at webpack_require (app.js:20)
at Object.<anonymous> (app.js:25614)
at webpack_require (app.js:20)
at _typeof (app.js:66)

Posts Followed


Following

    No Content

Followers

My Posts



My Comments

You commented on SVM's post about 1 month

@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));
}

You commented on Martin's post about 2 months

What I've noticed is that this undefined variable error only appears to be affecting plugins that are written using self-invoking scripts. Does anyone have a reason why that would be the case? How can this be resolved?
Also, it appears that this happens to plugins that doesn't have an ES6 export option. What is Zurb the recommendation on using plugins that doesn't have ES6 support? How can we still include non-ES6 plugins in our projects?

You commented on SVM's post about 2 months

Thanks Rafi for the reply. I would like to keep the data variables in a single file (especially since the data content are of the same type). I have used the #ifpage helper and see that it's written like so on this page: https://github.com/zurb/panini/blob/master/helpers/ifPage.js
I know that there's #ifequal helper as well, but that doesn't seem to work to look for css classes. I'm curious if this example can be written into a custom handelbars helper to look for <section> tags or use css classes? Can you provide an example of how this could work or be written?
 

You commented on Martin's post 2 months

Does anyone have a progress update on this issue? I've ran into the same issue as Jonathan Davis. I'm able to import the Owl Carousel 2 plugin into my app.js file. However, there is an error Cannot read property 'fn' of undefined because Owl Carousel uses $.fn.owlCarousel = function (option) when adding next/prev elements, so this error causes all of Foundation scripts to stop functioning. How does this get resolved?
app.js:23544 Uncaught TypeError: Cannot read property 'fn' of undefined
at app.js:23544
at Object.typeof (app.js:23578)
at __webpack_require
_ (app.js:20)
at Object.<anonymous> (app.js:25520)
at webpack_require (app.js:20)
at Object.defineProperty.value (app.js:14482)
at webpack_require (app.js:20)
at Object.<anonymous> (app.js:25614)
at webpack_require (app.js:20)
at _typeof (app.js:66)

Posts Followed

Following

  • No Content

Followers