drdk / dr-svg-sprites Goto Github PK

I'm having trouble getting the sprite to respect the order in which I want the icons to be. I've tried specifying the files individually in options.spriteElementPath, I've tried numbering the original files e.g. 01-my-first-icon.svg, 02-my-second-icon.svg etc. I've tried filename to classname mapping using options.map. Nothing I try works, the icons are always added to the sprite in the same order.

Here's a sample of the generated sprite css - you can see the numbering is not respected:

.svg-17-icon__instagram--12x12 {
    background-position: 0 0;
}

.svg-01-icon__arrow-left--12x12 {
    background-position: -23px 0;
}

.svg-03-icon__arrow-right--12x12 {
    background-position: -45px 0;
}

It wouldn't be an issue if it weren't for the fact that my local dev site and our staging site output the icons in one order, but our live site (when we run the build process) does it in a different order, meaning all the icons display incorrectly.

By the way, I'm using the grunt task version of this - should I post this question there instead?

Thanks. Any suggestions?

I am trying to disable the cleanupIDs option but every build has renamed the id tags.
Here is my gruntfile, have I missed something out?

    "svg-sprites": {
      "images": {
        options: {
          svgo: {
            plugins: [
              { removeViewBox: false },
              { removeUselessStrokeAndFill: false },
              { convertColors: false },
              { convertPathData: false },
              { moveGroupAttrsToElems: false },
              { cleanupIDs: false},
              { cleanupAttrs: false },
              { convertColors: false }
            ]
          },
          spriteElementPath: "images/svg-min",
          spritePath: "images/svg-min/sprites/sprite-min.svg",
          cssPath: "stylesheets/sprite-min.css",
        },
      }
    },

Is there any way to pass a specific path to generated CSS?

Example:

Default configuration

var options = {
    spriteElementPath: "img/logos",
    spritePath: "img/sprites/logo-sprite.svg",
    cssPath: "css/logo-sprite.css"
};

.foo { 
    background-image: url("../img/logos/bar.svg"); 
}

I would like to pass a custom path, something like this.

Custom path

var options = {
    spriteElementPath: "img/logos",
    spritePath: "img/sprites/logo-sprite.svg",
    cssPath: "css/logo-sprite.css",
    customCssPath: "shared/images"
};

.foo { 
    background-image: url("shared/images/bar.svg"); 
}

Was normally when using derepente returned message:

"FATAL ERROR: Can not call method 'match' of undefined"

Can anyone tell me how to fix?

Hello,

I'd like to be able to inline the sprite in the css.
For example, with less.js you would do something like this:

data-uri('image/png;base64', 'sprite.png');

I'd like to have the possibility to generate less / sass syntax for this.

So instead of this: (sprites.css)

background-image: url("sprite.png");
background-image: url("sprite.svg"), none;

I could get this: (sprites.less)

background-image: data-uri('image/png;base64', 'sprite.png');
background-image: data-uri('image/svg+xml;charset=UTF-8', 'sprite.svg');

What do you think?

Prior to version 0.9.5 I was seeing css generated with whole unit values for height and width. After upgrading with no change to either the source .svg files or the configuration I'm seeing:

height: 12.571428571428571px;
width: 11.857142857142858px;

instead of:

height: 13px;
width: 12px;

Perhaps the change from return Math.ceil(value * newSize / oldSize); to return value * newSize / oldSize; in lib/util.js is related?

Hello,

sometimes, when i push to live my updated css/sprite i have sprite.svg browser cache issue,
maybe it could be good to have an option to add an ramdom get param to svg sprite url for refresh sprite.svg browser cache when you update on live server.

in generated css :
background-image: url("sprite.svg");
with and option add :
background-image: url("sprite.svg?rnd=1417528824");
or something like that.

maybe it's a web server header config issue.

what do you think about it ?

Hi,

i often use "em" unit to size a same sprite in several location with font-size on specific target element.

i just change this line : (in lib/build-css.js)

   if (config.cssUnit == "rem" || config.cssUnit == "em") {

it seems to work fine.

Is it right ?
Can you add it ?

Thanks

First of all, great module.

The problem is, that I can not to use this with SCSS and placeholders.

I took a look at your files and modified it to support this feature. If you can merge this it would be great...

Hi, after successfully installing and using this plugin for a few weeks, it looks like after last week's commit it is breaking. I am actually using grunt-dr-svg-sprites which is looking for dr-svg-sprites version '^0.9.9'. The problem is that I created a handlebars template using the '_url' helper which has now changed to 'url' in version 0.9.10, and npm is using my cached version of dr-svg-sprites (0.9.9) because of the caret. I think dr-svg-sprites should get a minor bump because it is not backwards compatible with the old template helper, and grunt-dr-svg-sprites should use the tilde matcher (~0.9.9) instead of the caret.

On a related note, the current version of phantomjs is a problem now because the cdn was moved. The latest version is 1.9.7-12, which should fix the phantomjs install issues that my team has been seeing.

Btw, this plugin is awesome! I went through like 10 svg sprite generators before settling on this one.

Hi,

I just have a quick question. How do I handle icon state like hover and active? Shall I create a new svg per state and then add/remove CSS classes with JavaScript?

Or is it possible to have such files

foo.svg 
foo~hover.svg

that are generated as the following CSS classes

icon-foo { ... } 
icon-foo:hover { ... }

It turns out that despite the scalable nature of SVG, mobile safari (iOS) still has measures SVG elements and refuses to render them if they exceed a certain total pixel area. I was using the plugin and ran into the upper limit that is allowable, the result being that icons that didn't render at all via SVG in mobil Safari.

Automatically creating multiple sprites would be the long-term goal, and I'm just adding here to help anyone else having this problem, but I wonder how hard it would be to add a console warning in the npm task for cases where that maximum area is exceeded. A bit more explanation can be seen in this question and my comment on the answer:

http://stackoverflow.com/questions/17048332/svg-file-size-limits-for-ios-safari/17066700#17066700

Getting this error when trying to build: (fwiw, I'm working on a CLI interface for this library)

Error: Command failed: /home/vagrant/dev/dominicbarnes/dr-svg-sprites-cli/node_modules/dr-svg-sprites/node_modules/svg2png/node_modules/phantomjs/lib/phantom/bin/phantomjs: 1: /home/vagrant/dev/dominicbarnes/dr-svg-sprites-cli/node_modules/dr-svg-sprites/node_modules/svg2png/node_modules/phantomjs/lib/phantom/bin/phantomjs: 4w��h: not found
/home/vagrant/dev/dominicbarnes/dr-svg-sprites-cli/node_modules/dr-svg-sprites/node_modules/svg2png/node_modules/phantomjs/lib/phantom/bin/phantomjs: 1: /home/vagrant/dev/dominicbarnes/dr-svg-sprites-cli/node_modules/dr-svg-sprites/node_modules/svg2png/node_modules/phantomjs/lib/phantom/bin/phantomjs: �����8__TEXT: not found
/home/vagrant/dev/dominicbarnes/dr-svg-sprites-cli/node_modules/dr-svg-sprites/node_modules/svg2png/node_modules/phantomjs/lib/phantom/bin/phantomjs: 2: /home/vagrant/dev/d�n��y�T: not foundg-sprites-cli/node_modules/dr-svg-sprites/node_modules/svg2png/node_modules/phantomjs/lib/phantom/bin/phantomjs: E�bss����j���-��m�b
/home/vagrant/dev/dominicbarnes/dr-svg-sprites-cli/node_modules/dr-svg-sprites/node_modules/svg2png/node_modules/phantomjs/lib/phantom/bin/phantomjs: 6: /home/vagrant/dev/dominicbarnes/dr-svg-sprites-cli/node_modules/dr-svg-sprites/node_modules/svg2png/node_modules/phantomjs/lib/phantom/bin/phantomjs: Syntax error: ")" unexpected

    at ChildProcess.exithandler (child_process.js:648:15)
    at ChildProcess.emit (events.js:98:17)
    at maybeClose (child_process.js:756:16)
    at Socket.<anonymous> (child_process.js:969:11)
    at Socket.emit (events.js:95:17)
    at Pipe.close (net.js:465:12)

My configuration object looks something like:

{
  spriteElementPath: "images/",
  spritePath: "sprite/",
  cssPath: "sprite/index.css",
  pngPath: "sprite/"
}

Not sure if this is a phantomjs error... or svg2png... or otherwise. Any help would be appreciated

We're trying to get the SVG sprites working at we're constantly getting "NaNpx" in the CSS and the sprite sheets don't look quite right.

Could you provide a sample SVG file to check against? Curious if there's something wrong with the SVG code coming out of Illustrator.

Samples would be useful to test the library as well.

Hi,

Is there any chance to create a Gulp version of the dr-svg-sprite like you did for Grunt?

Thanks!

Sometimes, some svgo plugins need to be disabled to prevent svg destruction.

Can we add an options to pass svgo config.

it could be something like :

pass sprite object to parse function in index.js

   svgutil.parse(sprite,file.contents.toString(), function (err, data) {

and move svgo var init in parse function with svgo config var

function parse (sprite, content, callback) {
  var svgo = new SVGO(sprite.config.svgo);

gruntfile.js examples

    "svg-sprites": {
      options : {
        svgo: {
          plugins: [
                    { removeViewBox: false },
                    { removeUselessStrokeAndFill: false },
                    { convertPathData: { straightCurves:false}}
          ]
        }
      },
...

seems to work, what do you think of that?

Vertical (must-have), grid, diagonal left/right...

Do you have plans to create a gulp plugin?

I'm getting the above error when this tasks runs.. It will actually show the message underneath 'Building SVG sprites'.

Here is my setup:

    'svg-sprites': {
        'icons' : {
            options: {
                spriteElementPath: 'source/assets/svgs',
                spritePath: '.tmp/images/sprites/icons.svg',
                cssPath: '.tmp/styles/_icons.scss',
                sizes: {
                    std: 24,
                    small: 18,
                    large: 36
                },
                refSize: 'large',
                unit: 12
            }
        }

This is my code; I have no idea why layout stopped working; it's compiling properly and picking up all the other options except layout for some reason.

"svg-sprites": {
      options: {
        spriteElementPath: "images-source",
        spritePath: "images",
        cssIncludeElementSizes: false,
        layout: "vertical",
        cssPath: "sass",
        cssPrefix: "_spotlight",
        cssSuffix: "scss",
      },
      icon:{ // name
        options: {
          sizes: {
            large: 60,
            small: 30
          },
          refSize: "small",
          unit: 10
        }
      }
    },

Has anyone proposed responsive spritemaps as a feature? I'm going to take a look myself but wanted to ask here first... Any known issues that would make it difficult to have a config option so that the compiled CSS includes media queries and adapts to a responsive breakpoints? Changing class names is great for what it is, but if I want those icons to adapt responsively, it creates a problem. Since we are only using the background-size property in modern browsers (the same where media queries are supported), then I think the PNG fallback will be the behavior for all non-modern browsers. Just thinking aloud here, let me know your thoughts, I may try to add a config option for media query support and submit a PR if you're open to it.

I appreciate the templates that provide control over the generated .css output. Due to the following line source = source.replace(/(^(\r\n)+)|((\r\n)+$)/g, "").replace(/(\r\n)+/g, "\r\n"); in lib/build-css.js I'm unable to force the generation of blank lines in my output. I see the value of that line for someone looking for compact output, however I'm generating .scss files and then passing them by scss-lint which is enforcing an empty line after each rule declaration.

The template that I'm using is:

{{#sizes}}{{#items}}{{className}} {
    background-position: {{unit x -1}} {{unit y -1}};
{{#if ../../config/cssIncludeElementSizes}} height: {{unit height}};
    width: {{unit width}};{{/if}}
}

{{/items}}{{#if ../config/cssPngPrefix}}{{prefix items ""}} {
    background-size: {{unit width}} {{unit height}};
}
{{prefix items ../../config/cssPngPrefix}} {
    background-image: url('{{url pngPath}}');
}
{{else}}{{#items}}{{className}}{{#unless @last}},
{{/unless}}{{/items}} {
    background-image: url('{{url pngPath}}');
    background-size: {{unit width}} {{unit height}};
}{{/if}}{{/sizes}}

{{#sizes}}{{#items}}{{../../config/cssSvgPrefix}}{{className}}{{#unless @last}},
{{/unless}}{{/items}}{{/sizes}} {
    background-image: url('{{url svgPath}}');
}

While much of the template has been altered, the first half of the ../config/cssPngPrefix if statement has not been altered to pass scss-lint.

When the templates were first added I was able to control the output of blank lines by stacking the handlebars into single lines, the feature appears to have been added at some point between the introduction of templates and the current version.

During the "parse" phase, where the dr is finding all the source SVG images and parsing them, it is not taking into account that multiple icons may have ID attributes that clash once they are merged into a single file.

Before finding this tool, I was working on a tool to combine sprites, and addressed this problem by leveraging the available prefix config, which I just set as the file basename. This way, ids would never clash. (and then, once SVGO is run the final time on the completed build, it won't run into any issues there either.

I will work on submitting a PR, but if you solve this before me I won't be opposed. :)