search

shakyShane / gulp-svg-sprites

Create SVG sprites or compile to <symbols>
MIT License
334 stars 45 forks source link

Symbol mode and CSS #46

Closed mattrosno closed 9 years ago

mattrosno commented 10 years ago

It looks like defs and symbols mode doesn't generate CSS. If using symbols mode, the snippet looks like this:

<svg class="icon"><use xlink:href="#icon_comments"></use></svg>

My problem is that I need to set dimensions on the svg tag to correctly size the icon. Can gulp-svg-sprites generate a stylesheet when in symbols mode to set dimensions? Something like:

.icon.comments {
  height: 16px;
  width: 16px;
}

And then use with:

<svg class="icon comments"><use xlink:href="#icon_comments"></use></svg>

I design my SVG icons at the intended height/width, and it would be nice to apply that through a class by default. Thanks!

jackfearing commented 10 years ago

I was wondering the same thing. I have two gulp tasks running.

  1. Exporting the default sprite file
  2. Exporting the symbols.

It would be great to be able to apply the filename (%f) to the class so we could target it better.

jackfearing commented 10 years ago

+1

macbruker commented 10 years ago

This is exactly what I also need. Is there a way to work around the current limitations?