nuxt-icons
nuxt-icons copied to clipboard
Not using `fill` attribute creates fill in `stroke` only SVGs - no way to target stroke!
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!
@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"
.
try this https://github.com/yisibell/nuxt-svg-icons
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
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.
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