Previous
Sign Up to Track Progress
Next

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.

Tom Gobich
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

Visit Website

Join The Discussion! (8 Comments)

Please sign in or sign up for free to join in on the dicussion.

  1. cbernard
    Adocasts Plus Subscriber
    Commented 8 months ago

    Hi Tom, really enjoying the videos. I have a question on this one. As per the documentation I'm using in globals.ts

    import { Edge } from 'edge.js'
import { edgeIconify, addCollection } from 'edge-iconify'
import { icons as heroIcons } from '@iconify-json/heroicons'

addCollection(heroIcons)

const edge = Edge.create()

edge.use(edgeIconify)

    
  
    
    
    
      Copied!

    And then in my home.edge I'm using @svg('heroicons:arrow-left-solid') but I just get raw tag rendered rather than the svg icon. Any ideas?

    
  
    
    
    
      Copied!

    1

    Please sign in or sign up for free to reply

    1. tomgobich
      Adocasts Plus Subscriber
      Commented 8 months ago

      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 edge instance 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:

      import edge from 'edge.js' // <-- import default export as edge instance
import { edgeIconify, addCollection } from 'edge-iconify'
import { icons as heroIcons } from '@iconify-json/heroicons'

addCollection(heroIcons)

edge.use(edgeIconify) // <-- add to that pre-existing instance
      
  
      
    
      
      Copied!
      0

      Please sign in or sign up for free to reply

      1. cbernard
        Adocasts Plus Subscriber
        Commented 8 months ago

        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.ts was not registered with the preloads in adonisrc.ts. I think that is explained in lesson 3.8, but I must have missed it.

        2

        Please sign in or sign up for free to reply

        1. tomgobich
          Adocasts Plus Subscriber
          Commented 8 months ago

          Anytime! Ah - yes, preloads need registered within the preloads array inside the adonisrc.ts file 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:preload command, it'll automatically register it within the preloads array for you as well.

          1

          Please sign in or sign up for free to reply

  2. omariqbal
    Commented 5 months ago

    Hey Tom!

    So I started a new project and it was working all good till the 2nd module. I wanted to skip to module 4 so I checked out the relevant branch but getting this error:

    SyntaxError: Unexpected identifier 'assert'

    at (syntax error) SyntaxError: Unexpected identifier 'assert'

    on this line:

    addCollection(phIcons)

    using this file: https://github.com/adocasts/lets-learn-adonisjs-6/blob/4.0_configuring_lucid_and_our_connection/start/globals.ts

    1

    Please sign in or sign up for free to reply

    1. tomgobich
      Adocasts Plus Subscriber
      Commented 5 months ago

      Hey omariqbal!!

      Just pulled down at the same point you linked to test it out and everything seems to be running and working okay for me. What version of NodeJS are you running? I can double-check everything on that specific version as well. I'm on 20.14 at the moment.

      1

      Please sign in or sign up for free to reply

      1. omariqbal
        Commented 5 months ago

        Thanks for the quick reply.

        It keeps working fine till node @ 21.7.3 but starts breaking at node @ 22.0.0

        1

        Please sign in or sign up for free to reply

        1. tomgobich
          Adocasts Plus Subscriber
          Commented 5 months ago

          Anytime!!

          It appears to be related to an issue in Vite, here: https://github.com/vitejs/vite/issues/17291

          The error seems to be happening during the import of the phIcons, which also shares similar imports to those mentioned within the linked issue. For now, your best bet is to probably use a NodeJS version < 22, sorry!

          I tried updated all dependencies to latest, and the issue still persisted on NodeJS v22, hopefully it'll get fixed up soon!

          1

          Please sign in or sign up for free to reply

Playing Next Lesson In
seconds
Re-Open