Cannot read property toSvg

Getting the following error, any idea's?

Could you make a CodePen to reproduce this error? Here's a Feather CodePen template to get you started: https://codepen.io/pen?template=WOJZdM

I've had the same trouble when I tried to set the data-feather attribute dynamically in a php template:

<i data-feather="{icon}"></i>

Weird enough the dynamic replacement worked but all subsequent icons didn't render and throw this error.

I have the same error here, but in my case i'm using Wordpress.

When i put a feather icon in the_content() section i'm getting this error.

This happens when the attribute data-feather is empty or when the icon doesn't exist..
data-feather=""

This should be fixed, because an empty or invalid icon name causes all icons to be NOT displayed

we just need an if statement before rendering? To check if there is that icon?

I have the same issue it's appear if you are not auth on your website and browse as guest
but if you are auth as admin or members no more errors

Uncaught TypeError: Cannot read property 'toSvg' of undefined
    at feather.min.js:12
    at feather.min.js:12
    at Array.forEach (<anonymous>)
    at Object.n.default [as replace] (feather.min.js:12)
    at terms:368

@gamefanpage

I have the same issue it's appear if you are not auth on your website and browse as guest ...

@gamefanpage Does it appear with empty icon names or always ?

_{Sent with GitHawk}

Hi, I encountered the same issue. What happened in my case was I mistyped one icon name (slider instead of sliders) but all the icons did not load. I must say it was kinda hard to debug.

To reproduce, here's the edited code from the codepen template above: https://codepen.io/kedomingo/pen/pogbLya

This happens when you put in a non-existing icon name or you misspelt an icon name.

If fixed this issue in ANGULAR 10

Here is my code :

<div class="card icon-card cursor-pointer text-center mb-2 mx-50" *ngFor="let dat of data | keyvalue">
     <div class="card-body">
         <div class="icon-wrapper">
              <i [data-feather]="dat.key"></i>
         </div>
       <p class="icon-name text-truncate mb-0 mt-1">{{ dat.key }}</p>
     </div>
</div>

component.ts

public  json = require('feather-icons/dist/icons.json');
public data;

ngOnInit() {
  this.data = this.json;
}

Here key element is square brackets I mean [data-feather].

This happens when the attribute data-feather is empty or when the icon doesn't exist..
data-feather=""

This should be fixed, because an empty or invalid icon name causes all icons to be NOT displayed

This was the problem in my case.

In my case it was icon name typo. Check if icon name exists.

You can use [attr.data-feather]="dat.key" instaed of [data-feather]="dat.key".
Angular is binding attributes data base on [attr.AttributeName].

Same Problem here...
Using python django with bootstrap...

checked typo, checked path...

the icon with the given address can be loaded by my browser but feather reports the same error...

replace.js:34 Uncaught TypeError: Cannot read properties of undefined (reading 'toSvg') at replaceElement (replace.js:34) at replace.js:19 at Array.forEach (<anonymous>) at Object.replace (replace.js:18) at 1:641

My problem was I fired a multi-rename in my IDE, and I accidentally updated an icon's name to a non existing one.
I figured it out when I added some console debugging to feather.js.

Add these lines to node_modules/feather-icons/dist/feather.js in the replaceElement() function, before the .toSvg() call:

console.log(_icons2.default[name]);
console.log(name);
console.log('-----');

of course delete them after you end debugging.

The issue here is that's it's very hard to debug, if you have a lot of icons in your page. So far I use this code every time this issue appears, and then manually check against the website to see which icon is misspelled. Can we have a more graceful fallback that doesn't just ruin all the other icons.

$('[data-feather]').each(function (){console.log($(this).attr('data-feather'));});

Navigation Menu

Repository navigation

Cannot read property toSvg #443

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Cannot read property toSvg #443

Description

Activity

colebemis commented on May 31, 2018

christophlieck commented on Sep 7, 2018

abner-carvalho commented on Sep 21, 2018

wdebusschere commented on Sep 25, 2018

emilas44 commented on Aug 4, 2019

gamefanpage commented on Oct 20, 2019

moeenio commented on Oct 29, 2019

kedomingo commented on Jun 14, 2020

adigunsherif commented on Oct 10, 2020

parthdevloper commented on Nov 4, 2020

ProteanCode commented on Feb 14, 2021

kenanhodzic commented on Mar 21, 2021

ankitmovaliya commented on May 28, 2021

ToM-Korn commented on Oct 27, 2021

subdesign commented on Aug 9, 2022

alexseif commented on Aug 29, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions