search

gitFoxCode / nuxt-icons

Module for Nuxt allowing pleasant use of svg icons
192 stars 23 forks source link

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

Open McPizza0 opened 2 years ago

McPizza0 commented 2 years ago

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 commented 2 years ago

@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 commented 1 year ago

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

gitFoxCode commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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