drdk / grunt-dr-svg-sprites

Grunt plugin to create SVG sprites with PNG fallbacks at needed sizes
113 stars 19 forks source link

Readme example correct? #16

Closed brianfeister closed 10 years ago

brianfeister commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

I was just about to point that out :D

And everything is working now?

brianfeister commented 10 years ago

Yup, all good. Thanks!