svg-inline-loader icon indicating copy to clipboard operation
svg-inline-loader copied to clipboard

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

Open scorgn opened this issue 5 years ago • 1 comments

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?

scorgn avatar Jul 21 '18 03:07 scorgn

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

rob2d avatar Nov 19 '18 18:11 rob2d