SVG icons not working

[pete-gi]

Package version

6.0.1

Describe the bug

I was following the docs about adding ability to append <svg> icons to templates.

My code is exactly the same, the only change is using @iconify-json/carbon iconset instead of @iconify-json/heroicons:

// start/view.ts

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

/**
 * Add carbon collection
 */
addCollection(carbon)

const edge = Edge.create()

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

Usage:

@topnav.item()
  @topnav.button()
    @svg('carbon:edit')
    Item
  @end
@end

Versions in package.json:

"@iconify-json/carbon": "^1.1.28",
"edge-iconify": "^2.0.1",

view.ts file is being preloaded:

// adonisrc.ts

preloads: [
  () => import('#start/routes'),
  () => import('#start/kernel'),
  () => import('#start/events'),
  () => import('#start/view'),
],

Using the @svg() tag, it is rendered as raw string.
Using the {{ svg() }} function, an error is throwed saying svg is not a function.
Using these outside of components makes no difference.

Reproduction repo

Repo

[thetutlage]

Can you please share a reproduction repo for the same?

[pete-gi]

Created the basic repo with web preset. Link in edited message above.

[thetutlage]

Its because you are using two different instances of Edge. Inside the start/view.ts file, you are creating a new instance and using the global instance to render view.

The start/view.ts file should look like this.

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

/**
 * Add carbon collection
 */
addCollection(carbon)
addCollection(heroicons)

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

[pete-gi]

Ok thanks. And please update the docs. This was literally copy/paste, only changed iconset. Most of people that will be new do the framework will be just copying code you provided in the docs

[thetutlage]

Docs cannot adapt to your application environment. They show you how to use the Iconify plugin.

Docs cannot find if:

• You are using Edge inside AdonisJS
• Or using it inside Express
• Do you have two instances of Edge in one app
• Do you use the default global instance of Edge.