icon icon indicating copy to clipboard operation
icon copied to clipboard

add SVGO implementation to optimize and clean SVGs

Open Neoniq opened this issue 1 year ago • 4 comments

https://github.com/svg/svgo

There are nuxt modules with support for SVGO but they are not working out of the box with nuxt/icon (or not working at all like https://nuxt.com/modules/svg-sprite)

So i think it is good addition to already most perfect module

I myself find it frustrating to fix fill and stroke to be of currentColor. SVGO can do it for me just fine

Neoniq avatar Jul 09 '24 14:07 Neoniq

Iconify icons should already be optimized. Do you mean for the custom svg icons? If in that case, I think it would make sense to have that. PR welcome if anyone wants to work on that. Thanks

antfu avatar Jul 15 '24 15:07 antfu

Yes for custom icons of course. I'm seeing nuxt icons becomes kinda all in one solution, because it is close enough for me already

Neoniq avatar Jul 15 '24 20:07 Neoniq

svgo for custom icon collection would be appreciated

awacode21 avatar Aug 21 '24 14:08 awacode21

We could just use the iconify tools and while/after parsing them into the collection we could just pipe them through cleanSVG and runSVGO. Also adding the corresponding options to our configuration.

See: https://iconify.design/docs/libraries/tools/icon/cleanup.html and https://iconify.design/docs/libraries/tools/icon/svgo.html

Blackskyliner avatar Sep 20 '24 05:09 Blackskyliner

Yes, I use usually SVGO to remove the fill and stroke attributes using svgo, and apply a svg { fill: currentColor } globally in my CSS. I see I can get the same effect using the customize function, but I'd prefer the svgo approach as this is how vue-svg-inline-loader and vite-svg-loader works, so it would be uniform across my vue, inertia.js and nuxt projects

mrleblanc101 avatar Sep 09 '25 15:09 mrleblanc101