/    Sign up×
Community /Pin to ProfileBookmark

How to get SVG changing with theme?

Copy linkTweet thisAlerts:
Jul 22.2020

I am working on a project where I am hosting a complete application on the web. It has a ton of buttons and icons. I want to add these buttons/icons dynamically through JS and be able to change their color with theme change.

I tried a few things like adding svg through background-image in css class etc but that wont allow me to change color .

What is the best way to do this?

Note- I cant use inline svg etc because it has to be dynamic.

to post a comment
CSSJavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumJul 22.2020 — I cant use inline svg etc because it has to be dynamic.[/quote]
That's too bad as CSS has no access to SVG images in external files. A workaround might be to load the images into containers dynamically by Ajax. Sample code:
fetch('url-of-your-image.svg')
.then(response => {
return response.text();
}).then(svgimg => {
document.getElementById('id-of-your-container').innerHTML = svgimg;
});
Copy linkTweet thisAlerts:
@vijay_kamatauthorJul 22.2020 — Thank you for the reply, not sure I can use Ajax.

This is what I am doing right now:

this.icon = new GenericControl("div");

this.icon.AddClass("liconClass");

in CSS:

.iconClass{

background:url(<avg url>);

}
Copy linkTweet thisAlerts:
@SempervivumJul 22.2020 — Unfortunately I don't know about GenericControl.

Regarding the code you posted you might create a class for each background image and assing the appropriate class then.

Or change the CSS by javascript:
const imgurl = 'img.svg';
document.getElementById('id-of-your-container').style.backgroundImage = 'url(' + imgurl +')';
Copy linkTweet thisAlerts:
@vijay_kamatauthorJul 22.2020 — @Sempervivum#1621150 And how to change the color of the svg icon when theme changes? I need to have a dynamic fill color.
Copy linkTweet thisAlerts:
@SempervivumJul 22.2020 — Unfortunately I don't know of any way how to style an SVG image which is a CSS background.

Workaround: Make your SVG image inline and bring it to the background by z-index. Then you can style it by CSS.
Copy linkTweet thisAlerts:
@vijay_kamatauthorJul 22.2020 — @Sempervivum#1621157 How do you add icons to your websites/projects?
Copy linkTweet thisAlerts:
@SempervivumJul 22.2020 — There are several ways:

Use the pure image, SVG or PNG, or use fontawesame icons.

The color of the latter can be changed easily by CSS color.

However I didn't encounter such requirements as yours. Mostly icons are used standalone.
Copy linkTweet thisAlerts:
@vijay_kamatauthorJul 22.2020 — @Sempervivum#1621159 Thank you for the reply. Hope I can find some way to do this.
×

Success!

Help @vijay_kamat spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...