How to display SVG icons dynamically?

Crypto 618 · 2024-02-13T07:12:50.645+00:00

I am trying to create a dynamic menu using an array of objects as mentioned in https://youtu.be/ICTzRosXYec?si=e9HbgRUY7o-UrnIqSuccessfully have created the menu.Want to copy paste code from https://icon-sets.iconify.design/ (for example)Here is the code: <path fill="currentColor" d="M17 3.34a10 10 0 1 1-14.995 8.984L2 12l.005-.324A10 10 0 0 1 17 3.34m-1.051 6.844a1 1 0 0 0-1.152-.663l-.113.03l-2.684.895l-2.684-.895l-.113-.03a1 1 0 0 0-.628 1.884l.109.044L11 12.22v.976l-1.832 2.75l-.06.1a1 1 0 0 0 .237 1.21l.1.076l.101.06a1 1 0 0 0 1.21-.237l.076-.1L12 15.303l1.168 1.752l.07.093a1 1 0 0 0 1.653-1.102l-.059-.1L13 13.196v-.977l2.316-.771l.109-.044a1 1 0 0 0 .524-1.221zM12 6a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3"/> How do I save this code into object and then load the svg within a repeat?I know how to copy paste the code onto div but how do I do that from an object I created?I have searched and found related examples but not sure if what I am doing is possible or correct way of doing it.Thanks.

Crypto 618
2 years ago
I am trying to create a dynamic menu using an array of objects as mentioned in https://youtu.be/ICTzRosXYec?si=e9HbgRUY7o-UrnIq
Successfully have created the menu.
Want to copy paste code from https://icon-sets.iconify.design/ (for example)
Here is the code:

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M0 0h24v24H0z"/><path fill="currentColor" d="M17 3.34a10 10 0 1 1-14.995 8.984L2 12l.005-.324A10 10 0 0 1 17 3.34m-1.051 6.844a1 1 0 0 0-1.152-.663l-.113.03l-2.684.895l-2.684-.895l-.113-.03a1 1 0 0 0-.628 1.884l.109.044L11 12.22v.976l-1.832 2.75l-.06.1a1 1 0 0 0 .237 1.21l.1.076l.101.06a1 1 0 0 0 1.21-.237l.076-.1L12 15.303l1.168 1.752l.07.093a1 1 0 0 0 1.653-1.102l-.059-.1L13 13.196v-.977l2.316-.771l.109-.044a1 1 0 0 0 .524-1.221zM12 6a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3"/></g></svg>

How do I save this code into object and then load the svg within a repeat?

I know how to copy paste the code onto div but how do I do that from an object I created?

I have searched and found related examples but not sure if what I am doing is possible or correct way of doing it.

Thanks.
Andreas Møller
2 years ago
You can load svgs just like any other image using the img tag:

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web#the_quick_way_img_element.

For a menu I would not recommend using a repeating item though. It is easier just to have multiple elements in your menu
👍1
@Andreas Møller
You can load svgs just like any other image using the img tag:

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web#the_quick_way_img_element.

For a menu I would not recommend using a repeating item though. It is easier just to have multiple elements in your menu
Crypto 618
2 years ago
Thankyou. So I add an img and under Attributes I see source with the default image url. The code I have I don't think is a URL. When I pass the code nothing happens. I suspect because it is not a link to the svg. Do I upload the svg and use the image link? Ok I tried that and it works. Toddle creates an img link for me. How do I upload multiple icons so that I can get the img url. Is there a place to see uploaded assets with url?
Andreas Møller
2 years ago
You you would have to upload the image somewhere, but are you sure this is necessary for your case?
Does the menu items need to be stored in an array?
Crypto 618
2 years ago
In my example it was. But that is what the video recommended. For my own projects I could just "hard code it". I wasn't sure of best practice.
Andreas Møller
2 years ago
Hard coding is best practices unless you have a good reason to keep it in an array.
👍1

How to display SVG icons dynamically?

Crypto 618

Andreas Møller

Crypto 618

Andreas Møller

Crypto 618

Andreas Møller