Giters

svg-sprite / grunt-svg-sprite

SVG sprites & stacks galore — Grunt plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours

Home Page:https://github.com/svg-sprite/svg-sprite

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Export HTML-Implementation

lukasoppermann opened this issue · comments

commented

Could you make an option to have it create a html file which includes the svg and has all the icons as svg-tags?

<svg viewBox="0 0 100 100" class="icon shape-codepen">
  <use xlink:href="#shape-codepen"></use>
</svg>
commented

Hey @lukasoppermann,

thanks for your input!

I'm not sure if I understand your question correctly, so let me recap: You want the Grunt task (which basically has the job to create a sprite out of several single SVG icons) to also create an HTML document which embeds the sprite as inline SVG plus inline SVG elements for each single icon? What are you trying to achieve with this? I can hardly imagine in how far this could add to svg-sprite's functionality. In fact, you should pretty much be able to do so by employing an additional post-processing Grunt task ... Please provide a little more input on this.

Thanks, cheers,
Joschi

commented

Hey, the import of the svg is not so important, basically I want to save myself the work to create all the -tags. Just like the task creates a css file for you, I figure it could create a html file in case you do not want to implement the sprite as a css background, but rather embed it to be able to style it via css.

So just like the css options creates all css styles for you, this option would create the svg-tags for every of your svg icons.

commented

Ok, I think I'm about beginning to understand. I'm not quite sure, but I could imagine you could even achieve this by adding an additional (custom) Mustache template for creating this kind of output. Did you try this?

In any case, I'm currently on holidays, in a camping car somewhere at the Japanese coastline, and I'll be back in Germany around end of May. So if you're in need of a quick solution, you'll be on your own right now anyway ... ;)

Please let me know if you succeed in the template way of doing this. I'd be happy to add this to the distribution! Good luck! :)

commented

Hey I tried it, but did not get it to work to my satisfaction, I do not need it in a rush, so if you could add this once you are back in Germany I would be very happy.

Here is what I personally think it should do:

  1. Create an HTML-Page
  2. Add html stuff and some css (e.g. to resize all svgs to one size and make them all be black)
  3. Include the svg (paste it into the html)
  4. Add all svgs probably kind of like this:
{{#svg}}<!-- {{#selector}}{{expression}}{{/selector}} -->
<svg viewBox="0 0 height & width of svg icon" class="{{#common}}{{prefix}} {{/common}}{{#selector}}{{expression}}{{^last}} {{/last}}{{/selector}}">
  <use xlink:href="#{{#selector}}{{expression}}{{/selector}}"></use>
</svg>
{{/svg}}
commented

Ok, I'll do my best. But please don't expect me to be particularly fast on this one, as I don't consider it an essential feature and will be very busy right after my return. I'll get back to you once I'm finished. Cheers!

commented

Cool, thanks. I see how it is not essential, but I would guess that for you its probably a simple thing anyway.

commented

Hey @lukasoppermann,

as of release 17c721a there are 2 new rendering templates shipping with svg-sprite:

  • An HTML preview document including inline SVG implementation (so basically exactly what you requested, right?) and
  • an inline SVG sprite variant.

The only thing I didn't implement is the "make them all be black" part (as I don't see the point in that!?). For further details please have a look at the Inline embedding section of the svg-sprite documentation.

The new versions are already published to the npm repo as well. Please let me know if all this works out for you! :)

Cheers,
Joschi