search

patrickxchong / eleventy-plugin-svg-sprite

A high performance Eleventy universal plugin that compiles a directory of SVG files into a single SVG Sprite and adds shortcodes to embed SVG Sprite and SVG content in Eleventy templates.
MIT License
41 stars 6 forks source link

Generate sprite file rather than embed in the HTML #9

Closed jamesdoc closed 2 years ago

jamesdoc commented 2 years ago

The spritesheet implementation wraps the generated SVG with a <div> which hides the sprite. This makes a lot of sense.

https://github.com/patrickxchong/eleventy-plugin-svg-sprite/blob/5f2ca08a08d588f86ad8e03a84c8f579e1e65f66/src/SVGSprite.js#L67-L68

However, would it be possible to make this optional?

Ideally I'd like to generate the spritesheet into a svg file (via 11ty permalinks), and then cache it for a longtime at the clientside. This means I could then reference the speicific icon, eg:

<svg class="">
   <use xlink:href="https://cdn.com/spriteSheet.svg#logo"></use>
</svg>
patrickxchong commented 2 years ago

Hey James, I wanted to clarify, would the problem be solved if the sprite is written to an external filepath (outputPath) that is provided via the config? eg, (assuming array config, would work for non array config as well)

module.exports = function (eleventyConfig) {

  eleventyConfig.addPlugin(svgSprite, [
    {
      path: "./src/assets/svg_1", // relative path to SVG directory
      svgSpriteShortcode: "svgsprite1",
      outputFilepath: "./sprites/svgsprite1" // filepath for the first spritesheet
    },
    {
      path: "./src/assets/svg_2", // relative path to SVG directory
      svgSpriteShortcode: "svgsprite2",
      outputFilepath: "./sprites/svgsprite2" // filepath for the second spritesheet
    }
  ]);
};
jamesdoc commented 2 years ago

That would be an even better solution that the one I suggested!

Would be good if it could be aware of the 11ty config, eg, knows about dir.output (but I'll not lose sleep over that).

return {
    dir: {
      input: `./src`,
      output: `./dist`,
      includes: "_includes",
      data: "_data",
    },
};
patrickxchong commented 2 years ago

What you suggested is really cool actually, and I definitely agree that would be preferable, but alas, Eleventy 1 doesn't support that yet because the plugin has no access to the dir object. It'll only be available in Eleventy 2 which is still in progress (https://www.11ty.dev/docs/events/#event-arguments). The best solution for now would be to go with outputFilepath. I've already implemented the changes and published version 2.1.0 with updated documentation. Give it a try and let me know if it solves your problem!

jamesdoc commented 2 years ago

Well, that is perfect. Thank you Patrick.

Implemented here: https://github.com/theglobechurch/globe-static/commit/e859dcbfce6722b647c6bcad122e62146a2cec04

patrickxchong commented 2 years ago

Great! Glad it worked for you, and definitely a good idea to create shortcode for it. I didn't add that in because the spritesheet could be used in different ways. Cheers!