Ray Deck shows three ways to add Phosphor icons to WeWeb projects. The Icon component is best for dynamic icons because it handles duotone icons properly and integrates with WeWeb's state and sizing. Custom HTML gives control but low flexibility, while text elements work for simple icons but fail with duotone variants.
So let's talk about how we can use an icon that we have already copied into our friends over at WeWeb, right? So the having already done the import using the WeWeb state embed, which we did over in File here, Trigger Workflows here, we were at, we have already imported the code that is able to get the, that moves over the, the stuff from the Phosphor icons, which means the Phosphor icons are now in context. The question is now, how can we make use of them? And there are 3 ways we can make use of them, right? The first way is we could create our own custom HTML that's sort of following their directions and create an i-class just like they did in GitHub FOS for IconWeb. And we can just click on that and it shows how they can be downloading their code either by getting a link to the stylesheet or, and this is the technique we're using right now, we're just getting the whole script. That way we get all the versions of those icons and that's just getting loaded in at the, at the point of the, the workflow. And so the documentation then says, hey, we want you to use this i, which is short for italic, i tag for the purpose of displaying these things. So when we do that with HTML, we can see we get exactly what we want, but have to code it all in directly. And while we can start to do that dynamically using the pound, using the, the plug here, it's a pain to work with. It's not that flexible. So door number 2 we can use is we can add just like base text, like we talked about before, like I showed before. So I can create a text element and get here some text. And if I were to set the class of that text to ph-duotone and ph-alien, you say, oh, hey, look, the alien shows up here. But look at how it works. Like the alien, there's an outline of the alien over here on the right. And then there's the other part of the alien over here on the left. If I simply just get rid of the text, You'll see the alien is off-center from each other. It's weird. We don't really know what's going on with that. And that's the reason why the alien kind of looks bizarre and what the thing you noticed before of how that works. So here we have ph_duotone, ph_alien, and we're saying that's not quite working the way we like it to. Now, of course, we just do ph, say, bold. It works just fine, right? Because the bold is only singular. Is ph-duotone that seems to have some more sophisticated CSS directives that really wants to use the i. So in that case, this isn't quite working for us. We need to do something a little bit better. Fortunately, we are— we do have something that works better. We have a more on-target component in WeWeb called an icon. Actually just creates an i tag. That's all the— that's all the special stuff here. So you can have here, it has a plus, has a little star here. And the star is based on getting what they call the icon from Font Awesome. That's another icon library. And we can go edit the icon library, but a really easy way, and you can click into here and use the picker for which icon you're going to use. But all these icons that we're looking at in here are actually just class names underneath the covers. So if we just change the icon over here, we could say it's going to be equal to ph-duotone, ph-alien, and we get the alien with the outline we're looking for. So this can feel like it's a little bit more ceremony than just using the picker, but it's also completely dynamic. So now you could say, you can make it respond to a formula or use JavaScript to decide exactly how you want to look at a given point in time. And of course you already get access to all the other elements down here, being able to change things based on state and size and display and all that good business. So hopefully this shows you 3 ways that you can bring external icons into WeWeb. The HTML route, which is high control but not very flexible. The text, which works in some circumstances but not others, and icon, which really seems like the tool that was made for this particular job.
