Empty svg path for valid ionicon

[dawsbot]

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

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"/>

• 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

[zamarrowski]

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.

[dawsbot]

@zamarrowski Seems like updating that on the readme to make that painfully obvious would help a lot of people out like myself.

[zamarrowski]

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

[shobulive]

Facing the same issue it doesn't display with some components when using storybook. Any help would be appreciated.

[zamarrowski]

Can you tell me the version of react-ionicons you are using?

[shobulive]

its 2.1.6. I tried md-home which is visible is some components but isn't it the others

                        <NavButton
                            key={index}
                            isActive={this.state.activeTab === item.name.toLowerCase()}
                            onClick={() => this.changeTab(item.name.toLowerCase())}
                        >
                            <Ionicon
                                name="md-home"
                                color={
                                    this.state.activeTab === item.name.toLowerCase()
                                        ? '#fff'
                                        : '#888'
                                }
                                fontSize="24px"
                            />
                            {item.name}
                        </NavButton>

and this is the result.

[zamarrowski]

the property name is not correct, use icon property :)