question-mark
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.

Empty svg path for valid ionicon

See original GitHub issue

When taking the readme example and changing to a valid ionicon named ion-clipboard, there is an empty svg path in the rendered DOM.

image

The following code renders the following html to the DOM.

    <Ionicon icon="ion-clipboard" rotate={true} fontSize="35px" color="blue"/>
<svg class="sc-bdVaJa fUuvxv" fill="black" width="30px" height="30px" viewBox="0 0 1024 1024" rotate="0">
	<path d=""></path>
</svg>

I have confirmed that other icons from react-ionicons render properly.

    <Ionicon icon="ios-alert" rotate={true} fontSize="35px" color="blue"/>

image

  • If not all the ionicon names are usable within react-ionicons, that could be documented better. Happy to provide a PR if you can help link me to the important areas in the codebase for knowing which are available.

  • If there are required props to supply so that it will render beyond icon, that could be documented better

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
zamarrowskicommented, Dec 25, 2017

Yeah, you are right! I will update the README. Thanks!

1reaction
zamarrowskicommented, Dec 24, 2017

react-ionicons uses ionicons v3 (https://ionicframework.com/docs/ionicons/). In v3, names of icons changed. In GH pages (https://zamarrowski.github.io/react-ionicons/) you can read this:

NOTE: This icons are for react-ionicons v2 that uses ionicons v3. If you are looking for react-ionicons v1 check out this: Ionicons

If you want to use the old icons you should 1.x version of react-ionicons.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Ionicons Usage Guide
The Ionicons Web Component is an easy and performant way to use Ionicons in your app. The component will dynamically load an SVG...
Read more >
Can't change the stroke color of Ionicon 5 outline set
I fixed this changing the svg code: stroke="currentColor" . This will make the stroke adopt the color you defined in ion-icon 's style...
Read more >
SVG in HTML
what are the costs of XML Namespaces in SVG-in-HTML? ... How to handle wellformedness errors in SVG fragments; Empty svg image (If can't...
Read more >
Custom SVG Icons in Ionic with Ionicons - Josh Morony
In this tutorial, I am going to walk through how you can implement our own custom icons when using Ionicons in an Ionic...
Read more >
Icon - Quasar Framework
Quasar supports out of the box: Material Icons , Material Symbols , Font Awesome , Ionicons , MDI , Eva Icons , Themify...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found