nuxt-icons Not using `fill` attribute creates fill in `stroke` only SVGs

My Icon pack mostly makes use of stroke in the SVGs

When NOT using the fill attribute, all strokes in the SVG are filled with shapes. This breaks the icons visually. Adding the fill attribute fixes rendering. This is linguistically confusing as you are adding a fill color by not using fill attribute - but using fill attribute uses the original fill? 🤔

Also There is currently no way to target the stroke of the SVG to set color.

p.s. @gitFoxCode Epic work here! Exactly what I was looking for!

Jun 15 '22 02:06 OmarMcAdam

@gitFoxCode Maybe it would be a good idea to rename fill to preserve-fill as this package fill is a Boolean props and not a DOM attribute fill="#ff0000".

Jun 28 '22 21:06 mrleblanc101

try this https://github.com/yisibell/nuxt-svg-icons

Feb 21 '23 10:02 yisibell

try this https://github.com/yisibell/nuxt-svg-icons

At what point does this module support stroke? This module which defacto is a modified nuxt-icons also does not support outline-icons from advance. Currently, this can be done in pure CSS, but to improve DX I would have to come up with a good syntax and that wouldn't bite with many icon possibilities

Feb 21 '23 11:02 gitFoxCode

try this https://github.com/yisibell/nuxt-svg-icons

At what point does this module support stroke? This module which defacto is a modified nuxt-icons also does not support outline-icons from advance. Currently, this can be done in pure CSS, but to improve DX I would have to come up with a good syntax and that wouldn't bite with many icon possibilities

In nuxt-svg-icons version 1.6.0， My strategy is to handle the stroke and fill attributes through svgo so that they can be modified directly on the svg node.

Feb 22 '23 07:02 yisibell

try this https://github.com/yisibell/nuxt-svg-icons

At what point does this module support stroke? This module which defacto is a modified nuxt-icons also does not support outline-icons from advance. Currently, this can be done in pure CSS, but to improve DX I would have to come up with a good syntax and that wouldn't bite with many icon possibilities

As for svg 's width and height which also processed by vite-plugin-svg4vue, so that you can directly use font-size to set, and your svg size will be responsive

Feb 22 '23 07:02 yisibell

Not using `fill` attribute creates fill in `stroke` only SVGs - no way to target stroke!