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

Enable arguments for svg shortcode

Open lea37 opened this issue 11 months ago • 2 comments

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 🙂

lea37 avatar Mar 05 '24 09:03 lea37

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?

patrickxchong avatar Mar 15 '24 03:03 patrickxchong

Hey @patrickxchong no problem. Use this suggestion the way you feel the most comfortable with :)

lea37 avatar Mar 16 '24 09:03 lea37