Change background/foreground color?

[Sjoerd82]

Since these images are SVG's, it should be possible to change/remove the background color?
Changing individual foreground colors should not be required, but a new foreground color to replace all foreground colors would be very useful.

These two together would allow us to make more stylized icons for our social-share bars.

I've been playing around a little bit, but apart from general css effects, didn't manage to change any colors.
Ideas?

[edent]

Most of the icons have something like:

rx="15%"
fill="#fff"

You can change that fill to any valid colour.

Does that help?

[Sjoerd82]

Is not working, and I think it's because I'm loading the logo as an IMG-tag.

Import:

import stiWhatsApp from 'super-tiny-icons/images/svg/whatsapp.svg'

Template:

<img :src="stiWhatsApp" class="social-icon" />

CSS:

.social-icon svg rect {
    fill: #fff !important;
}

When I copy-paste the SVG tag directly into the template I can manipulate it using CSS.
I have a strong suspicion that you can't style much while it's an img-tag pointing to a SVG.

I have seen workarounds like SVGinject (https://github.com/iconfu/svg-inject), but this seems like a lot of code to just style the SVG.

[edent]

Yes. You'll need to edit the SVG file itself if you want to change its colour. We've tried to make the colours as close to the official colours as possible - so they shouldn't need any changes.

[Sjoerd82]

Thanks, yeah, editing the SVG is straight forward. Tried a number of approaches, including conversion to a webfont, but the issue remains that ultimately you don't have the SVG-tag in your template, but an IMG-tag, which is less stylable. There are solutions, but I feel are bit complex, and am not sure what happens to these in the bundler. In the end I found that for "stylized" brand icons I was better of using one of the many webfont libraries, like Font Awesome.

For clarification, when I say "stylized", I mean to remove the brand colors, and replacing them with a single, changeable color, as more like a silhouette of the icon. Like what you see on top of a Medium.com posting. -- thanks for the quick replies though :-)

[Sjoerd82]

... and to close this discussion, and unless I get corrected: you can't modify the internals of the SVG, once it's an IMG in your template (CSS filters will work).