00:05
So there are some more advanced topics that EdgeJS can take care of, like providing and injecting stateful information inside of our components, as well as creating custom tags.
00:14
But we're not quite ready to cover those at this point in time. But there is one last thing that I would like to cover within our EdgeJS introduction, and that is SVG icons.
00:22
So Edge has official integration with Iconify, and this package provides a number of different.
00:29
So here is a list of them, icon package sets that we can pick from. And you'll see the list just keeps going on and on and on. So if we scroll back up to the top,
00:38
we can install the package specifically for this by doing npm i edge iconify. And then we can tell Edge to use this plugin by using the use method within our preload file.
00:47
But first we need to pick an icon package to select from. So we can see a list of all of them as well as the icons within
00:52
each individual set at icon-sets.iconify.design. There's a big list of general icons, and then if we keep scrolling down,
01:00
we'll have animated icons, emojis, brand social, maps and flags, thematic, archive and unmaintained packages as well. Let's go ahead and scroll back up to the top.
01:09
So out of all of these different icon packages, all that we need to do is pick one that we would like to use. Within here you have the number of icons that are included within the package.
01:17
So like material symbols includes a little over 12,000. FOS4 includes a little over 7,000, remix 2,000, so on and so forth.
01:25
For this particular lesson, we'll be installing FOS4, but you can swap this out relatively easily with any of these other packages. If we go ahead and click in the FOS4 here, we'll see a list of all of the various
01:35
icons that are supported by this particular icon set. We could scroll through this, it's also a paginated list here as well. And if the icon supports it, you can select between the various styles.
01:44
So you have thin, light, regular, bold, fill, and duotone for this particular icon set. We can clear that out as well to view all of them.
01:51
And if we click on any one particular icon, so let's do maybe an armchair here, we get a detailed view of this particular icon, including the icons identifier,
01:59
which we can use with this plugin to specifically render out this particular icon. But if you need the raw information as well, you can copy the SVG right down here,
02:07
get the symbol, JSX, URL, CSS, UNO CSS, TailwindCSS. You can use it within various components as well.
02:15
But all that we're particularly interested in is the icon identifier. If we click on this, we get a number of different icon identifiers for the particular package that we're using.
02:23
We're going to be using the iconify icon. So that's going to be the identifier for ph colon, followed by the armchair hyphen fill. If we go back to the SVG icon documentation within EdgeJS, so
02:32
we scroll down a little bit, we'll see this within the Usages section we have. The icons packages identifier, here they're using hero icons,
02:39
a colon to separate it, and then the specific icons identifier within that package. And that will plop the raw SVG directly within our document, rendering out that icon.
02:47
So let's go ahead and get started by installing this package. So first, we just need to scroll back up to the top here, and let's copy the npm i edge hyphen iconify command and jump back into our terminal.
02:56
Go ahead and paste that in here. Okay, cool, so we should be good to go there. Let's scroll down a little bit. And then we just need to install the particular package that we want to use for our icon set.
03:04
You can find the particular icon identifier right down within the EdgeJS documentation, but they also follow a naming structure. So like within here, we have our FOS4.
03:13
So if we click on one of these, we have that ph package identifier. So we can use that to reference what particular icon set we want to install within our application.
03:21
So if we dive back into our terminal here, let's clear this out. We could do, for example, npm i at iconify hyphen json slash ph,
03:31
which is the package's identifier there, to install the FOS4 package. Go ahead and hit Enter on that to run that, and there we go. So we can clear that out and boot our server back up, npm run dev,
03:40
hide our terminal back away. And let's hide our browser back away as well and jump back into our text editor. So what we want to do is jump into that global file that we were working with before within our start directory.
03:49
We have our global example right here. So what we want to do in addition to this is import the edge iconify package.
03:55
So that's import edge iconify, as well as add collection so
04:00
that we can add an actual icon collection to the package from edge iconify. And then we'll want to actually install the icon set that we installed as well.
04:08
So import, and all of these are exported as icons, regardless of the one that you installed. So you'll want to give them an alias name in case you are installing multiple.
04:17
So like phicons for this particular set would be a good use case from and
04:21
then @iconified-json/ph, or whatever icon set identifier you installed.
04:27
Then we want to use the add collection to add our phicons to the EdgeJS iconify collection. So we'll call add collection here and just pass in our phicons.
04:37
This will register the icons as available within the edge iconify package. And then we just want to tell edge to use the edge iconify package as a whole.
04:46
So again, here we're registering the particular icon sets that we want to use. If we have multiple icon sets, we just need to add in multiple usages of the add collection call,
04:54
passing in each particular icon set that we want to use. And then we tell EdgeJS to use edge iconify so that we actually have the icons available to us to use.
05:02
So if we jump back to our home page, let's find an icon for our flush redisdb button. So let's jump back into our browser. Armchair is not quite going to cut it, so let's instead search for
05:10
various icons, maybe something like a trash can. And I'm going to pick this one right here. So we can use its identifier of ph colon trash hyphen fill to plop this
05:20
particular icon inside of our page. So let's hide our browser back away. And just before our flush redisdb button, let's do @svg,
05:28
which is a helper tag provided by EdgeJS iconify so that we can just simply pass in the particular icons identifier of trash-fill. Give that a save.
05:37
And now if we jump back into our browser, look at that we have our icon right down there within our button. If we wanted to, we'll go ahead and open our text editor back up. We can add additional attributes to this icon as well
05:47
by providing in a second argument as an object. For example, we could do class to add in a tail and CSS class. So if we wanted to put a little bit of spacing between the icon and
05:55
the text itself, we could do margin right of maybe two. Give that a save. And now we have a little bit of spacing between our icon and the actual text for the button itself.
06:04
So since tags need to be defined on their own line, for example, if we were to try and do flush redisdb on the same line as our svg tag, give that a save, we're going to end up getting an error within the background
06:14
here, unexpected token flush redisdb. And that's because tags need to be on their own line. Let's jump back into our text editor here and undo that.
06:21
If we need our SVG to be on the exact same line, we'd use interpolation. So just like so, copy just the SVG method portion of this,
06:28
removing the at character, and plop this within our interpolation. Just like so, give that a save. Let's jump back into our browser, give it a refresh since we had that error. And look at that, everything's working a-okay.
06:38
So visually within our button here as well, if we wanted to keep this as a tag usage, so if we go back a couple of steps to where we had our tag, and remove those interpolations right there, give this a save.
06:47
Let's inspect what we have real quick within the HTML markup. So let's right click on that, inspect. And if we scroll down a little bit, you'll see that we have our SVG followed by the flush redisdb.
06:56
Okay, so let's right click our button and let's edit as HTML so that we can see this as raw. So you can see our SVG and our flush redisdb are rendered on separate lines.
07:05
There's some use cases, like whenever you're working with spans and whatnot, where this would need to be rendered out on the same line. You can do that relatively easily with EdgeJS. So if we jump back into our text editor and
07:15
end this particular tag here with a tilde. This applies for any tag, not just the SVG tag here. We can give this a save, just jump back into our browser,
07:22
right click our button once more, edit as HTML so that we can see the raw HTML usage. And now you'll see that our flush redisdb is on the exact same line as our SVGs end tag.
07:32
So essentially that just informs EdgeJS to instead of rendering it as separate lines here as we have it right here, to instead render it as one line, kind of like so.
07:40
So that tilde just provides us a way to do this, since our tags require a new line in order to be valid. So again, that doesn't make any visual difference, so we'll go ahead and
07:48
just leave it as we have it right here for our particular use case. Okay, cool. So that's how you can use icons within EdgeJS using Edge Iconify.
