drdk / grunt-dr-svg-sprites

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

Using Scss Placeholders instead of standard classes #24

Closed wellhairy closed 10 years ago

wellhairy commented 10 years ago

Im using dr-grunt-svg-sprites to output sass partials, i'm having an issue changing the class to a placeholder so i can use @extend to bring the image to the rest of my kit. At the moment my grunt file looks a bit like this;

"svg-sprites": {
          "main": {
              options: {
                  spriteElementPath: "kcc-ui-kit/assets/images",
                  spritePath:  "kcc-ui-kit/assets/images/sprites",
                  cssPath: "kcc-ui-kit/assets/images/sprites",
                  cssSuffix: "scss",
                  cssPrefix: "_",
                  sizes: {
                      std: 26
                  },
                  refSize: 26,
                  unit: 12,
              }
          }
      },

Ideally i'd like to the output to look like %class-name or %class-name, .class-name instead of just .class-name

I cant really find any documentation on how this is done so i apploagise now if i've missed a trick somewhere.

This is the first issue i've logged on GitHub so im sorry if this isn't the right place to logg this kind of issue but any help would be super appreciated.

phloe commented 10 years ago

Unfortunately this isn't currently possible :(

Via options.template you should have been able to customise the output to suit your needs (a SASS partial) - but as you noticed the selectors in the output are hardcoded with as classnames... bummer. I'm looking into ways of opening up customisation of selectors. I'll bump this issue once I have more :)

wellhairy commented 10 years ago

Ahhh fiar, i figured that it might not be possible at this time but to be honest dr-grunt-svg-sprites has already made my workflow so much quicker that manually replacing a few classes is hardly anything to gripe about ;) cheers for the quick response. I'll take a look at options.template documentation tomoz. Thanks.

adamrobinson commented 10 years ago

This would definitely be a welcomed addition. I was looking into whether this was possible the other day but noticed that it wasn't possible via any options or a custom options.template

phloe commented 10 years ago

FWIW I just landed a new option in dr-svg-sprites 0.9.13 (npm cache clean as needed) to alleviate this need (and others): options.selector. Check it out :)

wellhairy commented 10 years ago

Thanks for the update, i'm looking into implementing this later today. much appreciated

On Fri, Sep 26, 2014 at 1:56 PM, Rasmus Fløe notifications@github.com wrote:

Closed #24 https://github.com/drdk/grunt-dr-svg-sprites/issues/24.

— Reply to this email directly or view it on GitHub https://github.com/drdk/grunt-dr-svg-sprites/issues/24#event-170693438.

Kind Regards

Allan King Digital Media Design & Illustration www.wellhairy.com