Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

can't render icons dynamically with "-" in name using .toSvg()

See original GitHub issue

Prerequisites

Version: 4.24.1
Operating system: any

Step to reproduce

in any .js file:

feather.icons.external-link.toSvg()

Actual behavior

error (this is obviously inconsitent with JS syntax because of the -)

Any message or error

Uncaught ReferenceError: link is not defined

Suggestions

You could use the JS typical approach ommiting the - and capitalize every word/string after

feather.icons.external-link.toSvg()

     |
     V

feather.icons.externalLink.toSvg()

Issue Analytics

State:
Created 4 years ago
Comments:6 (1 by maintainers)

Top GitHub Comments

1reaction

andy-swwcommented, Dec 8, 2019

Instead, you can use bracket notation

alright, that makes sence. I’m sorry, I must have overlooked the note in the api reference section.

@colebemis: thank you 😃

1reaction

colebemiscommented, Dec 6, 2019

Hi, @andy-sww 😄 Icons with multi-word names (e.g. external-link) cannot be accessed using dot notation (e.g. feather.icons.x). Instead, you can use bracket notation (e.g. feather.icons['external-link'].toSvg()). There is some documentation on it here: https://github.com/feathericons/feather#feathericons

Top Results From Across the Web

How to dynamically import SVG and render it inline

I want to dynamically import that svg based on the name passed to the function. It looks like this: import React from 'react';...

5 Gotchas You're Gonna Face Getting Inline SVG ... - CSS-Tricks

Their 2.0 release is using an SVG icon system, and here he shares some issues ... Just to make the above points crystal...

How to use SVGs in React | Sanity.io guide

Writing React component template is not straightforward. Use case: A custom SVG icon library. Include SVGs directly in JSX. JSX supports all SVG ......

How to use SVGs in React - LogRocket Blog

SVGs are useful for building fast and accessible webpages. In this post, we will go through various ways we can use or render...

The Best Way to Embed SVG on HTML (2021) - Vecta.io

How does embedding SVGs using Img tags, Object tags, Inline SVG differs among each other in terms of browser support, alt and title...