eleventy-plugin-svg-sprite
eleventy-plugin-svg-sprite copied to clipboard
Enable arguments for svg shortcode
I have started to test your plugin and was wondering if it would not be better to enable a more global arguments
instead of defaultClasses
and globalClasses
parameters to enable a11ty attributes?
...
const { ...attrs } = config.args ?? {};
let attributes;
if(attrs) {
attributes = Object.entries(attrs).map(([name, value]) => `${name}="${value}"`).join(' ')
}
return `<svg ${attributes ? attributes : ''} aria-labelledby="symbol-${nameAttr}-desc-${uniqueID}" role="group">
<desc id="symbol-${nameAttr}-desc-${uniqueID}">${descAttr}</desc>
<use xlink:href="#svg-${nameAttr}"></use>
</svg>`;
This way, user can add additional aria attribute as well as classes {% svg 'myIconName', {class: 'my-class', 'aria-hidden': true} %}
I have used your plugin with my shortcode to do that, so I just wanted to share my thoughts about that. Not really an issue, just an idea 🙂
Hey @lea37 ! Thanks for raising this. It's a good suggestion, I didn't design the API to be very holistic when I built the plugin because my use case didn't require it, I also didn't know we could put objects as input arguments :O
Glad you found a way to make it work. Instead of updating the code itself I'm thinking of adding this to the README instead since this changes the interface that people interact with the plugin, would you be okay if I adapt what you have for that?
Hey @patrickxchong no problem. Use this suggestion the way you feel the most comfortable with :)