Easy SVG Icons with Edge Iconify
In this lesson, we'll learn how we can install and use the edge-iconify package giving us super easy access within our EdgeJS files to any of the SVG icon packages available through Iconify.
- Author
- Tom Gobich
- Published
- Feb 21
- Duration
- 7m 57s
Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.
Adocasts
Burlington, KY
Transcript
Easy SVG Icons with Edge Iconify
-
[MUSIC]
-
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.
-
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.
-
So Edge has official integration with Iconify, and
-
this package provides a number of different.
-
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,
-
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.
-
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
-
each individual set at icon-sets.iconify.design.
-
There's a big list of general icons, and then if we keep scrolling down,
-
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.
-
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.
-
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.
-
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
-
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.
-
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.
-
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,
-
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,
-
get the symbol, JSX, URL, CSS, UNO CSS, TailwindCSS.
-
You can use it within various components as well.
-
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.
-
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
-
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,
-
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.
-
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.
-
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.
-
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.
-
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.
-
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,
-
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,
-
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.
-
We have our global example right here.
-
So what we want to do in addition to this is import the edge iconify package.
-
So that's import edge iconify, as well as add collection so
-
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.
-
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.
-
So like phicons for this particular set would be a good use case from and
-
then @iconified-json/ph, or whatever icon set identifier you installed.
-
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.
-
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.
-
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,
-
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.
-
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
-
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
-
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,
-
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.
-
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
-
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
-
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.
-
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
-
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.
-
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,
-
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.
-
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.
-
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.
-
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.
-
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
-
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,
-
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.
-
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.
-
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
-
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.
-
Introduction
-
Fundamentals
-
2.0Routes and How To Create Them5m 23s
-
2.1Rendering a View for a Route6m 29s
-
2.2Linking Between Routes7m 51s
-
2.3Loading A Movie Using Route Parameters9m 17s
-
2.4Validating Route Parameters6m 6s
-
2.5Vite and Our Assets6m 38s
-
2.6Setting Up Tailwind CSS9m 5s
-
2.7Reading and Supporting Markdown Content4m 32s
-
2.8Listing Movies from their Markdown Files8m 51s
-
2.9Extracting Reusable Code with Services7m 4s
-
2.10Cleaning Up Routes with Controllers4m 52s
-
2.11Defining A Structure for our Movie using Models9m 38s
-
2.12Singleton Services and the Idea of Caching6m 11s
-
2.13Environment Variables and their Validation4m 16s
-
2.14Improved Caching with Redis10m 44s
-
2.15Deleting Items and Flushing our Redis Cache6m 46s
-
2.16Quick Start Apps with Custom Starter Kits6m 28s
-
2.17Easy Imports with NodeJS Subpath Imports8m 40s
-
-
Building Views with EdgeJS
-
3.0EdgeJS Templating Basics8m 49s
-
3.1HTML Attribute and Class Utilities6m 9s
-
3.2Making A Reusable Movie Card Component10m 24s
-
3.3Component Tags, State, and Props4m 53s
-
3.4Use Slots To Make A Button Component6m 56s
-
3.5Extracting A Layout Component5m 13s
-
3.6State vs Share Data Flow2m 59s
-
3.7Share vs Global Data Flow6m 7s
-
3.8Form Basics and CSRF Protection6m 13s
-
3.9HTTP Method Spoofing HTML Forms3m 3s
-
3.10Easy SVG Icons with Edge Iconify7m 57s
-
-
Database and Lucid ORM Basics
-
4.0Configuring Lucid and our Database Connection4m 3s
-
4.1Understanding our Database Schema9m 35s
-
4.2Introducing and Defining Database Migrations18m 35s
-
4.3The Flow of Migrations8m 28s
-
4.4Introducing Lucid Models5m 43s
-
4.5Defining Our Models6m 49s
-
4.6The Basics of CRUD11m 56s
-
4.7Defining Required Data with Seeders11m 11s
-
4.8Stubbing Fake Data with Model Factories13m 48s
-
4.9Querying Our Movies with the Query Builder15m 30s
-
4.10Unmapped and Computed Model Properties3m 24s
-
4.11Altering Tables with Migrations7m 6s
-
4.12Adding A Profile Model, Migration, Factory, and Controller2m 57s
-
4.13SQL Parameters and Injection Protection9m 19s
-
4.14Reusable Query Statements with Model Query Scopes8m 11s
-
4.15Tapping into Model Factory States9m 15s
-
4.16Querying Recently Released and Coming Soon Movies4m 59s
-
4.17Generating A Unique Movie Slug With Model Hooks7m 59s
-
-
Lucid ORM Relationships
-
5.0Defining One to One Relationships Within Lucid Models5m 49s
-
5.1Model Factory Relationships2m 54s
-
5.2Querying Relationships and Eager Vs Lazy Loading5m 17s
-
5.3Cascading and Deleting Model Relationships5m 16s
-
5.4Defining One to Many Relationships with Lucid Models6m 56s
-
5.5Seeding Movies with One to Many Model Factory Relationships5m 24s
-
5.6Listing A Director's Movies with Relationship Existence Queries8m 41s
-
5.7Listing and Counting a Writer's Movies8m 41s
-
5.8Using Eager and Lazy Loading to Load A Movie's Writer and Director5m 18s
-
5.9Defining Many-To-Many Relationships and Pivot Columns9m 48s
-
5.10Many-To-Many Model Factory Relationships4m 50s
-
5.11A Deep Dive Into Relationship CRUD with Models18m 5s
-
5.12How To Create Factory Relationships from a Pool of Data13m 55s
-
5.13How To Query, Sort, and Filter by Pivot Table Data9m 47s
-
-
Working With Forms
-
6.0Accepting Form Data12m 15s
-
6.1Validating Form Data with VineJS9m 29s
-
6.2Displaying Validation Errors and Validating from our Request7m 16s
-
6.3Reusing Old Form Values After A Validation Error2m 3s
-
6.4Creating An EdgeJS Form Input Component5m 28s
-
6.5Creating A Login Form and Validator5m 1s
-
6.6How To Create A Custom VineJS Validation Rule9m 7s
-
-
Authentication & Middleware
-
The Flow of Middleware7m 49s
-
Authenticating A Newly Registered User4m 14s
-
Checking For and Populating an Authenticated User2m 10s
-
Logging Out An Authenticated User2m 24s
-
Logging In An Existing User6m 54s
-
Remembering A User's Authenticated Session6m 55s
-
Protecting Routes with Auth, Guest, and Admin Middleware5m 36s
-
-
Filtering and Paginating Queries
Join The Discussion! (4 Comments)
Please sign in or sign up for free to join in on the dicussion.
cbernard
Hi Tom, really enjoying the videos. I have a question on this one. As per the documentation I'm using in globals.ts
And then in my
home.edgeI'm using@svg('heroicons:arrow-left-solid')but I just get raw tag rendered rather than the svg icon. Any ideas?Please sign in or sign up for free to reply
tomgobich
Hey cbernard! Thank you, I'm happy to hear that! Yeah, so the EdgeJS documentation takes a framework-agnostic approach to describing things. Within AdonisJS, the
edgeinstance has already been created and you'll want to reference the already existing instance when adding your icons.Small change, but this should get things working for ya:
Please sign in or sign up for free to reply
cbernard
Thanks Tom for the speedy reply. I had originally tried that but to no avail. However, I found my issue. It was because the
globals.tswas not registered with thepreloadsinadonisrc.ts. I think that is explained in lesson 3.8, but I must have missed it.Please sign in or sign up for free to reply
tomgobich
Anytime! Ah - yes, preloads need registered within the preloads array inside the
adonisrc.tsfile to be used; happy you were able to get your issue figured out!If you create your preload file using the Ace CLI's
node ace make:preloadcommand, it'll automatically register it within the preloads array for you as well.Please sign in or sign up for free to reply