Speedrun - Connect Iconify to Weweb in under 10 minutes

Speedrun challenge. We have a gentleman in the community who's asking how to implement Iconify in WeWeb using the WeWeb embedder from StateChange. So let's talk about how to do that. So let's first learn a little about Iconify. Iconify is a data on icons on demand framework where you can have these little— they use web components, which is a specialized tag thing you see here that allows you to have icons and you just specify based on the icon property.. And all that seems relatively straightforward. We can do web components on WeWeb. It's not super well supported, but it's completely doable. But then we're going to need to have the code that's going to be able to convert this sort of specialized type of icon into the underlying SVG or whatever that's going to allow it to work properly. So to do that, we need to figure out how to use it. So we go up to Usage, and we can have SVGs in HTML, and we have a no-code approach, okay, where we we can get the API, we get those icon sets, huh? And we can go get icon sets, and these are all cute. We can find out what the icons are that it supports. That's really cool. And that will maybe even wind up using some of those. But let's go back over here and let's just ask how we create the SVGs using the web component stuff that we were just talking about. So to do that, we wanted icons on demand. That way we could just get the icons we want, not have to download all of them. And to do that, let's see, we have support for— okay, you want me to use this Icon component thing? Uh, and it seems like there are a few different ways to get supported, right? So we have Web Components, that's like the sort of special Icon thing. SVG framework, that's probably gonna be based on overloading regular components like Font Awesome and some of these other libraries work that way usually. And then they have libraries for React and Vue and Svelte and Ember, which are all frameworks, somewhat low-code-ish frameworks that you can use to build out websites. So the Vue 3 is actually what the web is built on, but I think we're going to have an easier time if we just use HTML stuff because we'll stay on the no-code side of things. We click in a web component and we learn about, okay, this, yep, we got the house, fine. But how can we get the code that we need to inject into WeWeb to make it work? All right, we're going to scroll down a little bit more and use more. And okay, here we go. So here is the script tag that we need. This will allow us to take Iconify code and bring it over into WeWeb., and then in WeWeb, we'll be able to make use of the Iconify stuff. So, let's make that go. It seems like there are a couple different ways of doing it. One is you can get it from iconify.design, and second, you can use jsdeliver, which is a pretty common and popular system for taking Node JavaScript packages, and making them available through script tags like this. We're going to click on that, and then we're going to go over to— I guess we need to go set up a WeWeb environment, right? We don't have a WeWeb environment right now, so let's go to weweb.io. And we will go to sign in and we will need to bring in, and we'll start with a blank one just so we can illustrate this most simply. And we'll do Iconify test and create. Cool. And we don't really have anything in here. Let's start nice and simple and we're gonna do a plus here. In fact, no, what we need to do first is bring the, the code, right? The script tag in. Right? So we're gonna do a little copy here and we're going to go over to that Iconify test in WeWeb. And the way that we bring that over is going to be through I mean, we can do it a couple different ways, right? So one way we can do it is by adding code to the page using the custom code, but that only works if you publish. So the cool thing we can do is we can go back over here and we can use this wewebembed.statechange.ai, which is a free utility from StateChange that allows you— there's a little video, you can walk through it later— which allows you to take a script tag like this from HTML, like what we just saw, and we can convert it into a WeWeb JavaScript action. Copy this code, go over to WeWeb, and we say page. And really, you always want to do these script tag things on page load. So let's go here to the workflow, and we're going to add a workflow, and the workflow is gonna be on page load. That's fine. And we're gonna say for a custom JavaScript, and we're going to say, let's put in this code. Cool. All right. And now we can close that up and we can test that to make sure it works. Great. It'll only run once per page. So we'll probably wind up having to reload the page, the whole page in order to make our whole thing work at the end. But that should be fine. So we go back here, we say plus, we say, duh duh, let's bring in L, because since we're using web components, we're gonna need to use custom HTML in order for it to work. Fortunately, we don't need to publish, it works inside the editor. So we can edit the HTML and settings, and then we can expand this little box here and put in the HTML. And the HTML we're going to need to put in, we have here from our friends at Iconify. And let's— they have an example one up here, right? Okay. Yeah, a little copy icon. Great. We can work with that. Uh-huh. And we can do paste. Look at that. It's a little happy, little happy home there. Great. So now we can close it up and we could change it more if we wanted to. We can make this icon into— I don't know, what's another icon that's out there? Want to pick up a phosphor icon? Yeah, sure. How about one of I don't know, a train. How about something with a train? This has a train to it. And we will do ph_train_simple-bold. Oh wait, it has a little copy thing here too. We'll go back over to here and we will say let's change the mdi_home to ph_simple-bold. Now you'll notice that it blanks it out. I'm pretty sure that's because it only loads the stuff that it needs at a given point in time. So in order to— in order for it to work properly, you just refresh your screen, which just refreshes the loader. And here you got the train, loads in the things we needed on demand. And so we can use all of these icons. You can pick through this little no-code system as long as we make it available in here. Okay, there we are. It's an icon. It's an icon that is created with the custom HTML component or to make use of web components. And then in Iconify, there might be a way for us to actually use the built-in WeWeb icon component. Because WeWeb has one. So let's take a look at that. And layout, and the, doo doo doo doo doo, and I can choose icon, right? Now, the question is what kind of element icons use, because certain of these icon libraries don't allow you to use all possible elements or types of elements. So you can see that this is using a div for how it works with the elements. And as long as Iconify would also allow us to use that, might be able to work too. So let's just take a look at that for a second. And okay, so we've got the icon. So this is the web component version, but there's also an SVG framework in React, et cetera. We can't use any of these. We could use Vue if we were using Vue component, but that's more high code. So the SVG component allows us out. There's another script tag. Okay, which will work with— okay, but if it works with span and i tags, so since our friends at WeWeb use div tags, we can't use icon element to work with, at least not as far as I can tell. We don't use icon element in order to work with— yeah, hydrate. Nope, nope, nope. Yeah, so because this thing uses a div, right, which is this guy here, we will not be able to tell this guy to use the Iconify SVG framework. We're going to need to use web components. And so to do that, you're going to need to take the code from their web components library. We're just going to do a recap here. We're going to— you scroll on down to go find their script tag, which is— let's see, here's a script tag. And by the way, searching for open tag script is a pretty good way of doing that. Find that, copy that, you put it into the WeWeb inverter, shake it up a bit, come out with some JavaScript. The JavaScript is then something you're going to put into your WeWeb, put into page, put into, uh, your custom— your— not your custom code, into your trigger workflows. You can put into a custom JavaScript component. We're going to say— and then we're going to put the code into there. And then you create an element, and this one is not going to be as helpful. All right, so we're going to say and backspace that. And then this, which is an HTML element, and in the HTML element you can take a look at the code that's inside it. And by doing that, by doing the F and being LC, that the way we actually create the code is by telling it what the, what the icon needs to be, and by turning that whole thing into a string. And then that way you get to have, make use of all of these cool Iconify icons. Now there is more interesting stuff to be done with Iconify because once you've loaded this thing into memory, this has a whole JavaScript framework of code to build do things more dynamically that you can play with and go over the wall into, into WeWeb too. But that can be the subject for another speedrun video.