Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Thibaultfq opened this issue Apr 17, 2024 · 0 comments

Comments

@Thibaultfq
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant