eleventy-plugin-svg-sprite icon indicating copy to clipboard operation
eleventy-plugin-svg-sprite copied to clipboard

Only the config options globalClasses and defaultClassess of the last array config are applied

Open Thibaultfq opened this issue 10 months ago • 0 comments

When having multiple svgSprites, only the config options globalClasses and defaultClassess of the last array element are applied. for example:

const svgSprite = require("eleventy-plugin-svg-sprite");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(svgSprite, [
    {
      path: "./src/assets/svg_1", // relative path to SVG directory
      svgSpriteShortcode: "svgsprite1",
      globalClasses: 'not-applied',
    },
    {
      path: "./src/assets/svg_2", // relative path to SVG directory
      svgSpriteShortcode: "svgsprite2",
      globalClasses: 'applied',
    },
  ]);
};

No svg will ever have the first "not-applied" class.

This is because the for-loop in the initialisation (see .eleventy.js) overrides the shortcode (default "svg") with the last item.

see:

//this code is inside a config-array loop and overwrites itself since config.svgShortcode is not unique in the loop (as expected).
eleventyConfig.addShortcode(config.svgShortcode, (name, classes, desc) => {
      if (!name) {
        throw new Error("[eleventy-plugin-svg-sprite] name of SVG must be specified");
      }
      const nameAttr = name;
      const classesAttr = `${config.globalClasses} ${classes || config.defaultClasses}`;
      // "desc" is required for accessibility and Lighthouse validations
      const descAttr = desc || `${nameAttr} icon`;
      // a unique id is generated so that the svg references the correct description in aria-labelledby
      const uniqueID = (idCounter++).toString(36);

      return `<svg class="${classesAttr}" aria-labelledby="symbol-${nameAttr}-desc-${uniqueID}" role="group">
                  <desc id="symbol-${nameAttr}-desc-${uniqueID}">${descAttr}</desc>
                  <use xlink:href="#svg-${nameAttr}"></use>
              </svg>`;
    });

proposal: let globalClasses and defaultClassess not be provided in an array of configs but rather provide an array of spriteConfigs and a single object of shortcode/displaying configs. When refactoring, would be great to immediately add the proposal in #16

Thibaultfq avatar Apr 17 '24 12:04 Thibaultfq