search

webpack-contrib / svg-inline-loader

Inline SVG loader with cleaning-up functionality
MIT License
491 stars 59 forks source link

Add height, width, and fill attributes to <svg> or <path> #85

Open scorgn opened 6 years ago

scorgn commented 6 years ago

Hey there,

I love what you did with svg-inline-loader. I am using it now to load icons into my application.

I am styling the icons with CSS, but until the CSS loads they come out oddly sized and not the color I need them to be. I understand I can go in and change the attributes in the svg files, but sometimes I am using the same file with different styles. It would be really cool to be able to do require('icon.svg?height=32px&width=32px&fill=#ff000'); and have SVG add the height and width to the SVG tag, and the fill to each path tag.

Is this something that might be a feature in the future?

rob2d commented 5 years ago

Was just looking at this library as well and noticed that. Might be a stupid suggestion, but in the meantime since you're using CSS if feasible perhaps you can inline a small stylesheet at the top of your static content? If you want to keep using external CSS files with this approach, I found this plugin can help with that: https://www.npmjs.com/package/html-inline-css-webpack-plugin