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

[McPizza0]

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!

[mrleblanc101]

@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".

[yisibell]

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

[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

[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

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.

[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