hiswe / gulp-svg-symbols Goto Github PK

Vector graphics editing programs don't always output height and width attributes on svg. Currently, gulp-svg-symbols requires that such attributes be set, since the attributes are implicitly required to be present here.

Options for fixing it could be as simple as defaulting to 100 on that line, or it could be more intelligent and parse the viewbox attribute (which is almost always set). The simple fix would look like this:

width:    math.number(result.info.width || 100),
height:   math.number(result.info.height || 100),

Currently this is a breaking issue that I imagine is affecting lots of users (for instance a similar problem was happening on the grunt-icon plugin here) and the fix looks pretty easy. Thanks for making this gulp plugin!

We need to optimise svg-symbols.svg. It shouldn't have <desc> tag for SEO context.

(bad) example:

Just a memo for a future PR.

var gulp       = require('gulp')

var through2   = require('through2')

var plumber    = require('gulp-plumber')
var svgSymbols = require('gulp-svg-symbols')
var filter     = require('gulp-filter')
var imagemin   = require('gulp-imagemin')

module.exports = function() {

  var cssFilter = filter('**/*.css')
  var svgFilter = filter('**/*.svg')

  return gulp.src('src/frontend/glyphicons/**/*.svg')
    .pipe( plumber() )
    .pipe( through2.obj(function ( file, enc, cb ) {

      var fileString = file.contents.toString()

      var titleRegex = /<title>.*<\/title>/gi
      var descRegex = /<desc>.*<\/desc>/gi
      var commentRegex = /<!--.*-->/gi
      var defsRegex = /<defs>.*<\/defs>/gi
      var mSShapeGroupRegex = / +sketch:type=\"MSShapeGroup\"/gi
      var mSPageRegex = / +sketch:type=\"MSPage\"/gi

      fileString = fileString.replace(titleRegex, '')
      fileString = fileString.replace(descRegex, '')
      fileString = fileString.replace(commentRegex, '')
      fileString = fileString.replace(defsRegex, '')
      fileString = fileString.replace(mSShapeGroupRegex, '')
      fileString = fileString.replace(mSPageRegex, '')

      file.contents = new Buffer( fileString )

        this.push( file )
        cb()

    }) )
    .pipe(
      svgSymbols({
        svgId: 'pmd-Svg--%f',
        className: '.pmd-Svg--%f',
        fontSize: 32,
        css: true
      })
    )
    .pipe( cssFilter )
    .pipe( gulp.dest('build') )
    .pipe( cssFilter.restore() )
    .pipe( svgFilter )
    .pipe( gulp.dest('web/assets/images') )

}

We also should work on dest folder for svg and css. It should be an option, not a filter like I did.

Currently gulp-svg-symbols can output two attributes on a sprite's root element:

• xmlns="http://www.w3.org/2000/svg" is hardcoded
• class="<%= svgClassname %>" if options.svgClassname is truthy

While keeping all this in place, it would be useful for users to pass other attributes, which can vary depending on specific needs:

• varying xmlns declarations,
• aria-hidden="true" and maybe style="/* let's hide this */" for embedded sprites,
• other use cases I’m not thinking of

I suggest adding an svgAttributes option that will be passed to templates, and rendered like this:

<svg<%= renderAttributes({className: svgClassname}, svgAttributes) %>>

The renderAttributes function could be defined in the template itself (see the attrs function here for an example, though it would need to be extended to accept and merge several objects). Or it could be defined once and provided to all templates. That would bring the list of data provided to templates to:

• icons (Array)
• defs (string)
• renderAttributes (Function)
• svgClassname (user defined)
• svgAttributes (user defined)

(If I’m not missing anything.)

Example: https://github.com/shakyShane/gulp-svg-sprites#user-content-advanced-custom-templates

Should be done after 6 months of deprecation warning

style="width:0; height:0; visibility:hidden;"

Why now this style and not display: none like before?

It does that on my website:

As you can see, there's a line now where it was not before.

This 2 images will tell more than words

Each time my icon task is called, results are appended. This should create a new file each time.

If I have two files that define something like <defs><clipPath id="path0_fill" ... /></defs>, the id path0_fill will be defined twice, breaking one of the images.

This happens with pretty much any SVG export from figma.

Why am I getting this message? After all, the viewBox attribute is here:

<svg viewBox="0 0 64 64" enable-background="new 0 0 64 64" height="64px" version="1.1" width="64px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
  <g>
    <circle cx="32" cy="32" fill="#C75C5C" r="32"/>
  </g>

  <g opacity="0.2">
    <g>
      <path d="M52.872,28.063c-0.31-0.951-1.133-1.645-2.121-1.79l-11.327-1.645l-5.067-10.263     c-0.444-0.899-1.356-1.467-2.357-1.467s-1.913,0.568-2.357,1.467l-5.064,10.263L13.25,26.273     c-0.991,0.145-1.813,0.838-2.121,1.79c-0.31,0.951-0.053,1.995,0.665,2.694l8.197,7.99l-1.934,11.283     c-0.168,0.986,0.237,1.982,1.046,2.57c0.455,0.334,0.996,0.502,1.543,0.502c0.418,0,0.838-0.1,1.222-0.302l10.132-5.327     l10.132,5.327c0.384,0.202,0.804,0.302,1.222,0.302c0.544,0,1.088-0.168,1.545-0.502c0.809-0.589,1.214-1.585,1.046-2.57     L44.01,38.746l8.197-7.99C52.922,30.06,53.18,29.014,52.872,28.063z" fill="#231F20"/>
    </g>
  </g>

  <g>
    <g>
      <path d="M52.872,26.063c-0.31-0.951-1.133-1.645-2.121-1.79l-11.327-1.645l-5.067-10.263     c-0.444-0.899-1.356-1.467-2.357-1.467s-1.913,0.568-2.357,1.467l-5.064,10.263L13.25,24.273     c-0.991,0.145-1.813,0.838-2.121,1.79c-0.31,0.951-0.053,1.995,0.665,2.694l8.197,7.99l-1.934,11.283     c-0.168,0.986,0.237,1.982,1.046,2.57c0.455,0.334,0.996,0.502,1.543,0.502c0.418,0,0.838-0.1,1.222-0.302l10.132-5.327     l10.132,5.327c0.384,0.202,0.804,0.302,1.222,0.302c0.544,0,1.088-0.168,1.545-0.502c0.809-0.589,1.214-1.585,1.046-2.57     L44.01,36.746l8.197-7.99C52.922,28.06,53.18,27.014,52.872,26.063z" fill="#F5CF87"/>
    </g>
  </g>
</svg>

Hello, I'm able to get the svg-symbols.svg file created. But when I view the generated file, the first <symbol> I see has an ID of #svg-symbols. But within that symbol are also multiple symbols inside of it that also shares the same ID. What's going on, why does this happen, and how to fix?

Thanks in advance.

• Stylus / Sass with icon sizes as variables (default-preprocessor)
• Should be able to do the same with CSS variables (default-cssvar not sure if it's usefull)

Currently this plugin doesn't copy viewbox attribute settings from original file to merged symbols file. That's causing svg symbols to be cropped out in some cases.

Simply make the <title> tag optional.

If there were no files in a stream, gulp-svg-symbols will still generated the templates and add them to the stream. For instance:

gulp.src('this/path/doesnt/match/any/*.svg')
  .pipe(svgSymbols())
  .pipe(gulp.dest('dist/sprite.svg'))

will still generate a dist/sprite.svg file, with no symbols.

Would it be possible to return nothing (or an empty-ish stream; sorry if I'm using those concepts wrongly by the way) when the source stream is empty? That's what other gulp plugins I use tend to do.

Hello, can you help?
Add function auto-convert if attr missin?!

Hi,

Thank you for this great plugin!

I have a little issue, some SVG doesn't display as they should when I call them through . I've tried to display them in an and they display well.

I give you two of these images so you can see the problem.
I've tried to save them as SVG 1.1 and tiny 1.2, no changes.
It occurs when the SVG have some areas with no transparency (text in my two SVG below)

svg-icon.zip

Thanks a lot for your help

as mentioned here putting a style like:

style="width:0; height:0; visibility:hidden;"

is not very helpfull.

Even more when you reference the SVG externally, like:

<svg role="img" class="icon icon-pouic">
  <use xlink:href="/svg/svg-symbols.svg#icon-pouic"></use>
</svg>

It should be:

• removed from SVG template
• add in the doc the “hidden accessible” CSS (like in #23)

see #29

Hello, would it be possible for the css styles to remain in the SVG file, instead of generating a separate .css file?

If this is already possible, how can I achieve it?

Thanks so much for making this plugin! I love how it avoids a lot of the overreaching I see in similar plugins while embracing Chris Coyier's latest technique.

My one nitpick is that, for my current project, I don't really need the generated CSS... all my assets are of similar dimensions. Right now, I'm "disabling" the stylesheet like so:

var gulp = require('gulp');
var gulpIf = require('gulp-if');
var svgSymbols = require('gulp-svg-symbols');

gulp.task('sprites', function(){
  gulp.src('./src/svg/*.svg')
    .pipe(svgSymbols())
    .pipe(gulpIf(/[.]svg$/, gulp.dest('./build')));
});

But it seems like it might be nicer to just pass along an option to turn that feature off?

Just a suggestion! Thanks again!

I'm trying to create multiple different sprite files. When I pass the svg-symbols task into rename, it only renames the css file. I have specified the specific folder assets that I want to generate as its own sprite. How can I rewrite my gulp task so that the task creates a different svg file and its associated css file, that's separate from the default sprite? Do you have any examples? Thank you in advance.

/Users/kud/Projects/_playmedia/desktop/node_modules/gulp-svg-symbols/node_modules/svgo/node_modules/sax/lib/sax.js:918
  while (parser.c = c = chunk.charAt(i++)) {
                              ^
TypeError: Cannot call method 'charAt' of undefined
    at Object.write (/Users/kud/Projects/_playmedia/desktop/node_modules/gulp-svg-symbols/node_modules/svgo/node_modules/sax/lib/sax.js:918:31)
    at module.exports (/Users/kud/Projects/_playmedia/desktop/node_modules/gulp-svg-symbols/node_modules/svgo/lib/svgo/svg2js.js:131:9)
    at /Users/kud/Projects/_playmedia/desktop/node_modules/gulp-svg-symbols/lib/format-svg-data.js:52:5
    at /Users/kud/Projects/_playmedia/desktop/node_modules/gulp-svg-symbols/node_modules/svgo/lib/svgo.js:31:13
    at Object.sax.onerror (/Users/kud/Projects/_playmedia/desktop/node_modules/gulp-svg-symbols/node_modules/svgo/lib/svgo/svg2js.js:120:9)
    at emit (/Users/kud/Projects/_playmedia/desktop/node_modules/gulp-svg-symbols/node_modules/svgo/node_modules/sax/lib/sax.js:615:33)
    at error (/Users/kud/Projects/_playmedia/desktop/node_modules/gulp-svg-symbols/node_modules/svgo/node_modules/sax/lib/sax.js:644:3)
    at strictFail (/Users/kud/Projects/_playmedia/desktop/node_modules/gulp-svg-symbols/node_modules/svgo/node_modules/sax/lib/sax.js:662:22)
    at Object.write (/Users/kud/Projects/_playmedia/desktop/node_modules/gulp-svg-symbols/node_modules/svgo/node_modules/sax/lib/sax.js:1172:37)
    at module.exports (/Users/kud/Projects/_playmedia/desktop/node_modules/gulp-svg-symbols/node_modules/svgo/lib/svgo/svg2js.js:131:9)

with

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<g id="_x23_010101ff">
    <path fill="#010101" d="M10.528,5.518c0.743-0.108,1.497-0.035,2.245-0.057c1.02-0.034,1.994,0.351,2.887,0.804
        c0.987,0.488,1.741,1.313,2.473,2.113c1.229,1.606,1.834,3.621,2.008,5.616c0.007,0.663,0.188,1.321,0.09,1.984
        c-0.096,0.728-0.071,1.468-0.234,2.186c-0.373,1.632-0.999,3.24-2.087,4.534c-1.115,1.495-2.814,2.549-4.659,2.844
        c-0.582,0.073-1.168,0.031-1.752,0.042c-1.97,0.086-3.815-0.985-5.129-2.386c-1.876-2.023-2.629-4.842-2.645-7.548
        c-0.033-2.578,0.627-5.254,2.265-7.289C7.078,6.892,8.754,5.905,10.528,5.518 M10.784,6.284C8.959,6.624,7.306,7.736,6.263,9.267
        c-1.112,1.567-1.557,3.488-1.748,5.369c-0.136,2.065,0.224,4.161,1.045,6.063c0.828,1.748,2.292,3.262,4.168,3.851
        c0.971,0.362,2.024,0.275,3.04,0.251c1.175-0.138,2.322-0.584,3.256-1.314c2.035-1.49,3.09-3.991,3.35-6.442
        c0.032-0.974,0.021-1.95,0.008-2.923c-0.188-2.103-0.896-4.226-2.316-5.821c-0.78-0.799-1.755-1.41-2.812-1.773
        C13.15,6.109,11.937,6.195,10.784,6.284z"/>
    <path fill="#010101" d="M23.491,7.15c0.935-1.002,2.26-1.738,3.66-1.691c0.758,0.019,1.535-0.07,2.271,0.151
        c0.538,0.158,1.046,0.4,1.537,0.671c-0.06,0.239-0.149,0.466-0.259,0.684c-1.089-0.555-2.295-0.963-3.534-0.845
        c-0.943,0.13-1.909,0.409-2.647,1.039c-0.971,0.772-1.541,2.035-1.444,3.276c0.068,1.038,0.613,2.006,1.416,2.658
        c1.679,1.383,3.935,1.786,5.616,3.166c0.669,0.615,1.371,1.277,1.646,2.173c0.446,1.495,0.325,3.182-0.447,4.553
        c-1.045,1.628-2.952,2.758-4.918,2.602c-1.578,0.095-3.238-0.289-4.489-1.288c0.077-0.228,0.182-0.443,0.311-0.646
        c0.573,0.265,1.083,0.654,1.686,0.859c1.729,0.591,3.78,0.639,5.35-0.406c1.771-1.179,2.478-3.65,1.672-5.603
        c-0.336-0.757-0.896-1.396-1.585-1.848c-1.621-1.145-3.636-1.578-5.195-2.822c-0.84-0.593-1.481-1.476-1.727-2.479
        C22.073,9.886,22.481,8.271,23.491,7.15z"/>
    <path fill="#010101" d="M0.349,6.633c0.337-0.096,0.718,0.019,0.955,0.276c0.029,0.272,0.098,0.625-0.139,0.826
        C0.961,7.917,0.652,8.108,0.381,7.948C-0.149,7.772-0.095,6.883,0.349,6.633z"/>
    <path fill="#010101" d="M0.314,11.454c0.244-0.017,0.488-0.017,0.731,0C1.09,15.82,1.041,20.19,1.069,24.56
        c0.005,0.252-0.011,0.506-0.024,0.758c-0.243,0.015-0.488,0.015-0.731,0c-0.047-4.366,0.005-8.736-0.024-13.104
        C0.285,11.959,0.301,11.706,0.314,11.454z"/>
</g>
</svg>

Any idea why?

It works if I set it to an empty string (title: ''), but not false.

BTW thanks for creating the plugin! 👍

Is it possible to set unique ids for gradient fill and strokes?

given these settings:

    .pipe(symbols({
      className: '[data-am-Icon~=%f]',
      svgoConfig: {
        utilizeAbsolute: false,
        floatPrecision: false,
        removeDoctype: false,
        removeXMLProcInst: false,
        removeComments: false,
        removeMetadata: false,
        removeEditorsNSData: false,
        cleanupAttrs: false,
        convertStyleToAttrs: false,
        removeRasterImages: false,
        removeUselessStrokeAndFill: false,
        removeHiddenElems: false,
        moveElemsAttrsToGroup: false,
        moveGroupAttrsToElems: false,
        convertShapeToPath: false,
        mergePaths: false,
        transformsWithOnePath: false,
        cleanupNumericValues: false,
        convertColors: false,
        removeNonInheritableGroupAttrs: false,
        removeViewBox: false,
        cleanupEnableBackground: false,
        removeEmptyText: false,
        collapseGroups: false,
        convertPathData: false,
        convertTransform: false,
        removeEmptyAttrs: false,
        removeEmptyContainers: false,
        cleanupIDs: false,
        removeUnusedNS: false,
        sortAttrs: false,
        removeTitle: false,
        removeDesc: false
      }
    }))

this doesn't work and the file is still run through SVGO AFAICT, which strips things out.

before:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Desktop-HD" transform="translate(-886.000000, -195.000000)" fill="#EF413A">
            <g id="search-+-type-something-in-he-+-Shape" transform="translate(513.000000, 187.000000)">
                <path d="M387.8472,21.1496 L387.564,21.4328 L386.5056,20.3744 C387.5632,19.068 388.2,17.408 388.2,15.6 C388.2,11.4096 384.7904,8 380.6,8 C376.4096,8 373,11.4096 373,15.6 C373,19.7904 376.4096,23.2 380.6,23.2 C382.408,23.2 384.068,22.5632 385.3744,21.5056 L386.4328,22.564 L386.1496,22.8472 L390.9512,27.6488 L392.648,25.952 L387.8472,21.1496 Z M375.4008,15.6 C375.4008,12.7328 377.7336,10.4 380.6008,10.4 C383.468,10.4 385.8008,12.7328 385.8008,15.6 C385.8008,18.4672 383.4672,20.8 380.6008,20.8 C377.7336,20.8 375.4008,18.4672 375.4008,15.6 Z" id="search"></path>
            </g>
        </g>
    </g>
</svg>

after:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="search" viewBox="0 0 20 20">
      <title>search icon</title>
      <path d="M14.847 13.15l-.283.283-1.058-1.06C14.563 11.07 15.2 9.41 15.2 7.6c0-4.19-3.41-7.6-7.6-7.6C3.41 0 0 3.41 0 7.6c0 4.19 3.41 7.6 7.6 7.6 1.808 0 3.468-.637 4.774-1.694l1.06 1.058-.284.283 4.8 4.802 1.698-1.698-4.8-4.802zM748.4 23.6c0-2.867 2.334-5.2 5.2-5.2 2.868 0 5.2 2.333 5.2 5.2s-2.333 5.2-5.2 5.2c-2.866 0-5.2-2.333-5.2-5.2z" fill="#EF413A"/>
    </symbol></svg>

as you can see, the fill-rule gets stripped, which is essential for this icon.

Any suggestions?

For finer accessibility, we should be able to provide a custom string for each symbol

If I run your plugin with gulp4 I got following error: Unhandled rejection TypeError: file.isSymbolic is not a function
It has to do with vinyl-fs version 3

Hello,

I already have a separate workflow in place for optimizing my SVGs, and using this tool with the default settings completely overrides that, as it appears to use SVGO by default.

I've been trying to tinker with the "svgoConfig" property in order to disable SVGO entirely, but to no avail. I'm wondering if there is a way to do so -- and if, for that matter, SVGO should only be enabled when someone explicitly sets the "svgoConfig" property.

Regardless of my own workflow, it seems to go against the stated goal of being a "minimal plugin" by having the default behaviour directly tied to SVGO.

Overall, though, great job! I really want to be using this as part of my SVG workflow.

Cheers.

Add warn for

• duplicated ids
• <clipath> & <mask> not inside <defs> tags (breaking in firefox)

Update doc for

• <clipath> like in gulp-svgstore With the task in the example folder

If I have source files using <use xlink:href="..."/> the output file gets corrupted. It is missing the xlink namespace. Alternatively the xlink:href should be converted into href which is supported in modern browsers.

e.g. the European Flag:

<svg xmlns="http://www.w3.org/2000/svg" width="810" height="540" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 810 540">
    <defs>
        <g id="d">
            <g id="b">
                <path id="a" d="M0-1l-.31.95.477.156z"/>
                <use xlink:href="#a" transform="scale(-1 1)"/>
            </g>
            <g id="c">
                <use xlink:href="#b" transform="rotate(72)"/>
                <use xlink:href="#b" transform="rotate(144)"/>
            </g>
            <use xlink:href="#c" transform="scale(-1 1)"/>
        </g>
    </defs>
    <path fill="#039" d="M0 0h810v540H0z"/>
    <g fill="#fc0" transform="matrix(30 0 0 30 405 270)">
        <use y="-6" xlink:href="#d"/>
        <use y="6" xlink:href="#d"/>
        <g id="e">
            <use x="-6" xlink:href="#d"/>
            <use xlink:href="#d" transform="rotate(-144 -2.344 -2.11)"/>
            <use xlink:href="#d" transform="rotate(144 -2.11 -2.344)"/>
            <use xlink:href="#d" transform="rotate(72 -4.663 -2.076)"/>
            <use xlink:href="#d" transform="rotate(72 -5.076 .534)"/>
        </g>
        <use xlink:href="#e" transform="scale(-1 1)"/>
    </g>
</svg>

Resulted in a :
<svg xmlns="http://www.w3.org/2000/svg"> [1] missing namespace xlink error

Additionally the referenced IDs within the defs section are not rewritten/renumbered. So if multiple files contain the same ID it will also break the output file:

<defs>
  <g id="a"><path d="M0-1l-.31.95.477.156z"/></g>
  <g id="a"><rect width="5" height="1" y="2" x="0"/></g>
</defs>

I understand I can alter each symbol id but is there a way to pass in variable derived from the file.relative string?

.pipe(svgSymbols({
  id: path + '-%f'
}))

In this example if the svg was in the filesystem as:

ui/notification/error.svg

I'd like the symbol output to be

<symbol id="ui-notification-error" ... >

Beside svgClassname it would be great to have to option to add inline styles.

see #18

<svg xmlns="http://www.w3.org/2000/svg"><% if(defs) {%>
  <defs>
      <%= defs %>
  </defs><% } %><% _.forEach( icons, function( icon ){ %>
    <symbol id="<%= icon.id %>" viewBox="<%= icon.svg.viewBox %>"<% if (icon.svg.originalAttributes.preserveAspectRatio) {%> preserveAspectRatio="<%= icon.svg.originalAttributes.preserveAspectRatio %>" <% }%>><% if (icon.title) {%>
      <title><%= icon.title %></title><% }%>
      <%= icon.svg.content %>
    </symbol><%
}); %></svg>

Hey,

I am a happy user of your library, but as my project grows we have a lot of dependencies.
We could save a lot of space if you added .npmignore file to your project.

I even found tool that can help you with it: https://github.com/inikulin/dmn

Thanks!

Hi.
Thanks for plugin.
He works good, but i find some bugs.
The first bug is the class .st0, which is not tied to the svg class
`.barber {
width: 22.1px;
height: 21.2px;
}
.st0{fill:#010101;}

.user-login {
width: 16px;
height: 16px;
}
.st0{fill:#FFFFFF;}

`

The second bug is the bad formatting for svg file.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22.1" height="38" viewBox="0 0 22.1 38"><svg id="barber" viewBox="0 0 22.1 21.2" width="22.1" height="21.2" y="0"><style>.st0{fill:#010101}</style><path class="st0" d="M21.8 0h-.1c-1 3.3-1.3 7.3-4 8.8-.5-1.4-1.8-2.1-3.2-2.7-.9-.4-1.9-1.1-2.8-1.1-.2 0-.4 0-.6.1-.3-.1-.5-.1-.7-.1-.9 0-1.9.7-2.8 1.1-1.5.7-2.7 1.3-3.2 2.7-2.8-1.5-3-5.6-4-8.8H.3C.1.3.1.7 0 1c0 .8.2 9.2.8 12.2.5 2.7 2.6 4.6 4.6 5.9 1.4.9 3.6 2.1 5.6 2.1 1.9 0 4.2-1.2 5.6-2.1 2-1.3 4.1-3.2 4.6-5.9.6-3 .8-11.4.8-12.2 0-.3-.1-.7-.2-1zm-6 12c-.1.7-.7 1.5-1.4 1.5-1.3.1-1.9-1.9-3.4-1.9-1.4 0-2.1 1.9-3.4 1.9-.7 0-1.3-.8-1.4-1.5-.1-.8.3-2 .7-2.4.5-.5 1.2-.4 2-.5.9-.1 1.7-.4 2.1-.8.5.5 1.2.7 2.1.8.8.1 1.5.1 2 .5.5.5.9 1.6.7 2.4z"></path></svg><svg id="user-login" viewBox="0 0 16 16" width="16" height="16" y="22"><style>.st0{fill:#fff}</style><path class="st0" d="M0 7h7V4.1L11 8l-4 3.9V9.1L0 9z"></path><path class="st0" d="M7 0v2h7v12H7v2h9V0z"></path></svg></svg

There is not indentantion.
May be i will find another plugin for formating svg, but what should i do with css?
Thanks.

Coming across a strange dependency error when attempting to generate SVG symbols using this plugin. My gulpfile.js is as follows:

var gulp = require('gulp');
var rename = require('gulp-rename');
var svgsymbols = require('gulp-svg-symbols');

/* ... */

gulp.task('generate-sprites', function () {
  return gulp.src('resource/img/sprites/*.svg')
    .pipe(svgsymbols({
        svgClassname: 'svg-icons',
        id: 'icon-%f',
        className: '.icon-%f svg',
        templates: [
            'default-svg',
            path.join(__dirname, 'resource/sass/_settings.sprite-template.scss')
        ]
    }))
    .pipe(rename(function(path) {
        if (path.extname === '.scss') {
            path.basename = '_components.sprites';
        } else {
            path.basename = 'sprites';
        }
    }))
    .pipe(gulp.dest('resource/sass'));
});

I've tried reinstalling my global dependencies and used npm cache clean && rm -rf node_modules && npm install to ensure my local dependences are installed from fresh.

I've had a go at going through the dependances myself (with not much luck) such as consolidate, bluebird and lodash, as some other plugins have had this issue. Please see https://github.com/adamayres/gulp-wrap/pull/29/files for more information about the same error in the gulp-wrap plugin.

I have also reduced my Gulp task to use no settings whatsoever:

gulp.task('generate-sprites', function () {
  return gulp.src('resource/img/sprites/*.svg')
    .pipe(svgsymbols())
    .pipe(gulp.dest('resource/sass'));
});

Which has the same error. Here's some more information on my local setup. If you need anything else to help reproduce the error, just ask.

$ gulp generate-sprites
[23:31:53] Using gulpfile ~/Sites/skeleton/gulpfile.js
[23:31:53] Starting 'generate-sprites'...
Unhandled rejection TypeError: tmpl is not a function
    at /Users/oliver/Sites/skeleton/node_modules/consolidate/lib/consolidate.js:779:16
    at /Users/oliver/Sites/skeleton/node_modules/consolidate/lib/consolidate.js:143:5
    at Promise._execute (/Users/oliver/Sites/skeleton/node_modules/bluebird/js/release/debuggability.js:299:9)
    at Promise._resolveFromExecutor (/Users/oliver/Sites/skeleton/node_modules/bluebird/js/release/promise.js:481:18)
    at new Promise (/Users/oliver/Sites/skeleton/node_modules/bluebird/js/release/promise.js:77:14)
    at promisify (/Users/oliver/Sites/skeleton/node_modules/consolidate/lib/consolidate.js:136:10)
    at Function.exports.lodash.render (/Users/oliver/Sites/skeleton/node_modules/consolidate/lib/consolidate.js:775:10)
    at /Users/oliver/Sites/skeleton/node_modules/consolidate/lib/consolidate.js:164:27
    at /Users/oliver/Sites/skeleton/node_modules/consolidate/lib/consolidate.js:98:5
    at tryToString (fs.js:455:3)
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:442:12)

$ npm ls consolidate
[email protected] /Users/oliver/Sites/skeleton
└─┬ [email protected]
  └── [email protected] 

$ cat package.json
{
  ...
  "dependencies": {
    ...
    "gulp": "^3.9.1",
    "gulp-rename": "^1.2.2",
    "gulp-svg-symbols": "^2.0.0",
    ...
  },
  ...
}

$ npm -v
3.10.7

$ node -v
v6.7.0

$ gulp -v
CLI version 3.9.1
Local version 3.9.1

I think I should be able to provide a template for generating React components.

Right now it's easy to make a component referencing the svg-symbols:

import React  from 'react';
import classNames from 'classnames';
import PropTypes  from 'prop-types';

const BASE_CLASS = `svg-icon`

export function Icon( props ) {
  const { svgId, className, ...other } = props
  const COMP_CLASS = classNames( BASE_CLASS, `icon-${ svgId }`, className )
  return (
    <svg
      role="img"
      className={ COMP_CLASS }
      {...other}
    >
      <use xlinkHref={`#icon-${ svgId }`}></use>
    </svg>
  )
}

Icon.propTypes = {
  svgId: PropTypes.string.isRequired,
}

export default Icon

But we should be able to include the whole SVG for an icon into the DOM.
This will allow us to have a more granular styling.

• should have all the tags & attributes in the JSX way
• should be able to add custom className & attributes
• should only rely on React (no classnames or prop-types )
• optional should be able to able to work with preact
• optional should be able to specify a zoom factor

All my <svg>'s have an preserveAspectRatio attribute. The are all stripped out in the resulting <symbol>. To be clear i doint mean the container SVG but all children <symbols>
How can i fix this?
RDG

All defs should be merged in one

Hi. @Hiswe :

I want to use svg sprites in my project. when i export svg file from photoshop cc2015. example like this.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="36" height="36" viewBox="0 0 36 36">
  <defs>
    <style>
      .cls-1 {
        fill: #fff45c;
        stroke: #fc0;
        stroke-width: 2px;
      }

      .cls-2, .cls-3 {
        font-size: 20px;
      }

      .cls-3 {
        fill: #fc0;
        font-family: "Microsoft YaHei";
      }
    </style>
  </defs>
  <g>
    <circle cx="18" cy="18" r="17" class="cls-1"/>
    <text x="8" y="24" class="cls-2"><tspan class="cls-3">爽</tspan></text>
  </g>
</svg>

i found this svg has the style and use class to the element. but when i use svg-symbols to bundle some files. it generators like this.

<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
  <symbol id="coin" viewBox="0 0 36 36">
    <title>coin icon</title>
    <defs>
      <style>
        .cls-1 {
          fill: #fff45c;
          stroke: #fc0;
          stroke-width: 2px;
        }
        .cls-2,
        .cls-3 {
          font-size: 20px;
        }
        .cls-3 {
          fill: #fc0;
          font-family: &quot;
          Microsoft YaHei&quot;
        }
      </style>
    </defs><circle class="cls-1" cx="18" cy="18" r="17"/>
    <text class="cls-2" x="8" y="24">
      <tspan class="cls-3">爽</tspan>
    </text>
  </symbol>
  <symbol id="new" viewBox="0 0 40 43">
    <title>new icon</title>
    <defs>
      <style>
        .cls-1 {
          fill: #33b6fa;
          fill-rule: evenodd;
        }
        .cls-2,
        .cls-3 {
          font-size: 22px;
        }
        .cls-3 {
          fill: #fff;
          font-family: &quot;
          STHeitiSC-Light&quot;
        }
      </style>
    </defs><path class="cls-1" d="M0 0h40v43l-20-5.292L0 43V0z"/>
    <text class="cls-2" x="9" y="27">
      <tspan class="cls-3">新</tspan>
    </text>
  </symbol>
  <symbol id="suggest" viewBox="0 0 40 43">
    <title>suggest icon</title>
    <defs>
      <style>
        .cls-1 {
          fill: #f90;
          fill-rule: evenodd;
        }
        .cls-2,
        .cls-3 {
          font-size: 22px;
        }
        .cls-3 {
          fill: #fff;
          font-family: &quot;
          STHeitiSC-Light&quot;
        }
      </style>
    </defs><path class="cls-1" d="M0 0h40v43l-20-5.292L0 43V0z"/>
    <text class="cls-2" x="9" y="27">
      <tspan class="cls-3">荐</tspan>
    </text>
  </symbol>
</svg>

i think the class will broke . so i can't use it on the page. Is there some solution for this case ?

Styles should be extracted and bundled in a CSS file.

finish VUE template

Inspiration can be found in vue-svgicon

Hi @Hiswe,
First of all awesome gulp-plugin.
I didn't saw yet your .js code, but before I just wanted to ask you if there is a way to make the generated tag (inside the svg-symbols.svg) to inherit the classes that the tag has.
Thank you!

Hi,

Thanks for your great plugin !

Small question, how i can keep the preserveAspectRatio="none" attribute ?

I try with svgo :

removeAttrs: false,
removeUnknownsAndDefaults: false,

But i can't keep this value.

Any idea ?

when:

<svg width="100%" height="100%" viewBox="0 0 20 20" …

CSS sizes are 100/100 instead of 20/20.

Hey,

not sure if this question was here already but I didn't find anything in the closed bugs. Would it be possible to create a PNG fallback sprite for the SVGs?

Cheers,
Anselm

I've run into in an issue while serving my files with Google Drive.
I don't know why but having self closing tags just mess everything.

Using gulp-replace width this regex seems to fix the issue.

    .pipe(/<(\w*)\s([^\/<]*)\/>/gi, '<$1 $2></$1>'))

I should provide this regexp to the plugin.

I hate to be that guy...

If you could go ahead and make the demo page more helpful, that would be great

Comparing the demo page to that of its predecessor (https://www.npmjs.com/package/gulp-svg-sprites), it is missing the vital ingredient, the code for the SVG icon that needs to be used, for ease of use purposes.

I'm using this successfully to add svg's inline in my html. Works great. What I can't quite figure out is.. Is there a way I can use the outputted sprite to create a background images?
I.e my search field has a search icon within the input. Rather than adding this inline in the html I'd like to set it as a background image of the input.
Not sure if this is possible!?

#42