/    Sign up×
Community /Pin to ProfileBookmark

Dynamic link to svg?

Copy linkTweet thisAlerts:
Apr 19.2022

I wonder if there is a way to create a link that is “dynamic” (fetched from database etc) and load corresponding icon.

The closest I have found is this, but this does not work

“`
<svg class=”icon”><use xlink:href=”#status[2]” /></svg>
<svg class=”icon”><use xlink:href=”#status2″ /></svg>
“`

https://jsfiddle.net/7trLsqvb/

to post a comment
HTML

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@sibertauthorApr 21.2022 — I have found one way to make the svg icons dynamic. It consists of 2 steps:

**1. SVG Sprites**

Basically collect all icons in ONE page and use "symbol" to reference them.

[url=https://postimages.org/][img]https://i.postimg.cc/Hskf0bmX/sprites.png[/img][/url]

**2. Use the database value to create the symbol "path"**

``<i>
</i>var start = <svg class="status"><use xlink:href="#status
var end = "/></svg>
&lt;td class="status"&gt;${start+element.user_status+end}&lt;/td&gt;<i>
</i>``

fiddle: https://jsfiddle.net/koyLuw43/1/

But the question remains. Can it be done simpler, faster or better?
Copy linkTweet thisAlerts:
@fireworkApr 24.2022 — Fireworks Store in Milwaukee:

Fireworks are inherent to Milwaukee’s summertime culture. There is no summer without Fireworks! There are many firework shows that take place in the City of Milwaukee that you should make sure to attend; On the 4th of July and on due festivals happening all across the city.

https://fireworksnation.com/fireworks-milwaukee/
×

Success!

Help @sibert 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 5.1,
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,
)...