Getting entries from svg body for dynamically creating icon
I 'm experimenting with how I might use the Iconify API to get Tabler icon data to dynamically create svg icons and even use the API to create some form of icon component for searching and rendering icons . The data comes back as a JSON object (see example ) : {"prefix":"tabler","lastModified":1700636897,"aliases":{},"width":24,"height":24,"icons":{"circle-x":{"body":"<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m7-2l4 4m0-4l-4 4\"/>"}}} My challenge us how I break up the body to set certain attributes on an svg tag via a formula . I have tried using split (space as the delimiter ) , which generates an array but getting stuck there in terms of how I might create an object and map each value to its respective key . Any pointers ? ✅1@Erik Beuschau - Thanks for getting back to me . Sadly , Parse JSON does not appear to work for the body . I did try that this morning (see example screenshot ) . The string output is <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m7-2l4 4m0-4l-4 4"/> and displays null as it appears to already be parsed ? Am I getting confused with what you mean ? In this case , I 'm looking to split it up to get fill , stroke , etc . , into an object to apply that to svg attributes . Okay , so had another go this morning and managed (by using Matches ) to use a regex to get the string reduced to an array with the values but now stuck on how I create an object from that . I read that parsing HTML is tricky because input could be incorrect , etc . , but given the source data is consistently correct and formatted in a specific way , this reduces risk of problems . Any pointers on how to get this last bit working so I can set each array item to be key /value pair in object without the =" ? Converting to a string after match and then splitting by =" does not work because the string conversion separates each item with a comma . Perhaps you could use a Map function where you use Split to split each item on the = character and then finally use Flat to get a flat array structure ? Perhaps if you could post an example of how you would like the structure to look like I could come up with a better suggestion ? 🤞 @Erik Beuschau - Thanks , pal . Funnily enough , I was looking at Map before seeing your message and that 's kinda heading in the right direction . Basically , I want my svg path to look like this : {
"fill": "none",
"stroke": "currentColor",
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "2",
"d": "M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m7-2l4 4m0-4l-4 4"
}@Erik Beuschau "The Legend " Beuschau strikes again ! That worked ! Interestingly , I didn 't know it was possible to specify the index as the path using Get so learned something new there . Now just to tie it all together and get it to change dependent on chosen icon . I 'm excited by this because it could mean an icon component that allows lookup of tabler icons via Iconify API and application to svg with all the appropriate attributes ! Very handy ! 🙌1- 🤯1
First pass parsing svg data from Iconify API for Tabler icons is up and running . At the moment , I have to reset the text colour to something different for it to update in preview (not sure why 🤔 ) but it works ! I set a couple of buttons up to update the API but the goal is to be able to search for icons , have them be displayed and then pick one . This is all in a component , so could be fashioned into some kind of icon picker for various things . Thanks to @Erik Beuschau for the pointers on parsing the svg <path .. /> data - that was hard to work out ! You can also use a data URI list this : data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"%3E%3Cpath d="m8 9l3 3l-3 3m5 0h3"%2F%3E%3Cpath d="M4 8a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E It ’s not a stupid question . A couple of reasons : * I ’m stupid because I didn ’t read all the docs and didn ’t realise I could just get the data URI (I was thinking about trying to get JSON ) 😂 * I assumed less customisation potential with img but reflecting on the scenario , the customisation is not required . 🫣 However , the bonus is that I learned a bunch of stuff !
.jpeg/public)