Readme example correct?

[brianfeister]

Hi there, love this plugin! I'm trying to generate multiple separate spritemaps per your example here:

grunt.initConfig({
    "svg-sprites": {
        "spriteOne": {
            options: {
                spriteElementPath: "source/img/svg",
                spritePath: "source/img/svg/spriteOneSvgsInHere",
                cssPath: "source/css",
                prefix: "One",
                sizes: {
                    large: 55
                },
                refSize: 26,
                unit: 13
            }
        },
        "spriteTwo": {
            options: {
                spriteElementPath: "source/img/svg",
                spritePath: "source/img/svg/spriteTwoSvgsInHere",
                cssPath: "source/css",
                prefix: "Two",
                sizes: {
                    large: 65
                },
                refSize: 26,
                unit: 13
            }
        }
    }
});

Unfortunately this is not working for me, spritePath is the path where the generated spritemap is placed, which is fine. However, I have my original SVG shapes in source/img/svg/spriteOne/shapes but the generated spritemap source/img/svg/spriteOne-sprite.svg is empty.

[brianfeister]

Ok, so the .../shapes portion doesn't apply to this scenario, however, even after removing it, the source/css/spriteOne-sprites.css file is generating only

.svg  {
    background-image: url(../img/spriteOne-sprite.svg);
}

and omitting icon-specific CSS styles.

[phloe]

I would expect the resulting svg sprite to be empty only if the script couldn't find any svg elements (ending with .svg) directly inside the spriteElementPath directory. Is this the case?

[brianfeister]

In my case, I do have elements with .svg inside path/to/sprites/logo (path/to/sprites/logo/logo.svg). Logging out this.data from tasks/index.js. I get a this.data.spriteElementPath of path/to/sprites. When I declare svg-sprites.logo.options.spriteElementPath = path/to/sprites/logo it fails with

Warning: ENOENT, no such file or directory 'path/to/sprites/logo/logo'

But declaring svg-sprites.logo.options.spriteElementPath = path/to/sprites does successfully create a path/to/css/logo-sprites.css stylesheet, but it has only one rule and omits all of the background positioning and element-specific CSS:

.svg  {
    background-image: url(../img/logo-sprite.svg);
}

[brianfeister]

Since that's probably alot of talk without specifics, here is the exact code I'm using (note that my filepaths above were just examples):

      'svg-sprites': {
        'logo' : {
          options: {
              spriteElementPath: 'styleguide/img/svg',
              spritePath: 'styleguide/img',
              cssPath: 'styleguide/css'
            },
            shapes: {
              options: {
                sizes: {
                  main: 45,
                },
                refSize: 26,
                unit: 13
              }
            }

        },
        'main' : {
          options: {
            spriteElementPath: 'styleguide/img/svg',
            spritePath: 'styleguide/img',
            cssPath: 'styleguide/css'
          },
          shapes: {
            options: {
              sizes: {
                max: 75,
                large: 45,
                medium: 30,
                small: 15,
                icon: 7,
              },
              refSize: 26,
              unit: 13
            }
          }

        }
      },

[brianfeister]

Another interesting note is that given the above configuration, I get a logo-sprite.svg and logo-sprites.css, but no logo-{size}-sprite.png files.

[brianfeister]

Ack! How embarassing! shapes as a key value is a substitute for main/logo in my example above. So the correct config for my above example should be:

      'svg-sprites': {
        'logo' : {
          options: {
            spriteElementPath: 'styleguide/img/svg',
            spritePath: 'styleguide/img',
            cssPath: 'styleguide/css',
            sizes: {
              main: 45,
            },
            refSize: 26,
            unit: 13
          }
        },
        'main' : {
          options: {
            spriteElementPath: 'styleguide/img/svg',
            spritePath: 'styleguide/img',
            cssPath: 'styleguide/css',
            sizes: {
              max: 75,
              large: 45,
              medium: 30,
              small: 15,
              icon: 7,
            },
            prefix: 'main',
            refSize: 26,
            unit: 13
          }
        }
      },

[phloe]

I was just about to point that out :D

And everything is working now?

[brianfeister]

Yup, all good. Thanks!