eleventy-plugin-svg-sprite
eleventy-plugin-svg-sprite copied to clipboard
Only the config options globalClasses and defaultClassess of the last array config are applied
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