Svg Icons (via Iconify)

Edge has an official integration for rendering icons using Iconify. Iconify has over 100 open-source icon sets you can reference using a unified API.

Installation

The Edge and Iconify integration is a plugin you must install from the npm packages registry.

npm i edge-iconify

The next step is to register the plugin with Edge.

import { Edge } from 'edge.js'
import { edgeIconify } from 'edge-iconify'

const edge = Edge.create()

/**
 * Register the plugin
 */
edge.use(edgeIconify)

Installing Iconify bundles

Before you can render icons, you will have to install the Iconify icon bundles. Iconify provides various distribution bundles. However, the Edge integration works only with JSON collections.

Let's install and use the HeroIcons icon set.

npm i @iconify-json/heroicons

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

/**
 * Add heroIcons collection
 */
addCollection(heroIcons)

const edge = Edge.create()

/**
 * Register the plugin
 */
edge.use(edgeIconify)

Usage

Once the setup is completed, you can render icons using the @svg tag. The svg tag accepts the icon identifier and an optional set of attributes to define on the output SVG element.

@svg('heroicons:arrow-left-solid')

Output

<svg width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M11.03 3.97a.75.75 0 0 1 0 1.06l-6.22 6.22H21a.75.75 0 0 1 0 1.5H4.81l6.22 6.22a.75.75 0 1 1-1.06 1.06l-7.5-7.5a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"></path></svg>

In the following example, we define custom width, height, and color for the icon.

@svg('heroicons:arrow-left-solid', {
  width: 40,
  height: 40,
  color: 'purple'
})

Output

<svg width="40" height="40" viewBox="0 0 24 24" color="purple"><path fill="currentColor" fill-rule="evenodd" d="M11.03 3.97a.75.75 0 0 1 0 1.06l-6.22 6.22H21a.75.75 0 0 1 0 1.5H4.81l6.22 6.22a.75.75 0 1 1-1.06 1.06l-7.5-7.5a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"></path></svg>

Inline rendering within markup

You can use the svg global helper to render the SVG icons alongside the raw text markup (without a line break).

<button> {{ svg('heroicons:archive-box') }} Delete post <button>

Finding the icon identifier

You can view the available icons from the Iconify icons set browser.

• Start by selecting the icon set you are using.
• Search for the icon you want to use.
• Click and copy its identifier displayed next to the Icon preview.

Finding and installing icon bundles

Unfortunately, we have not seen a detailed installation guide on the Iconify website for their JSON collections. You can use the following table to reference the collections and their npm package name.