React-native-vector-icons: Ionicons 3.0.0 is a breaking upgrade

[insraq]

I have upgraded to 2.0.0 and found out that Ionicon is upgraded to 3.0.0, which is unfortunately not backward compatible with 2.0.1. So I have to stay at 1.3.4 which still shows the React package warning (0.25.1). Can we have a maintenance release of 1.3.5 that fixes those issues without upgrading Ionicon?

[oblador]

@insraq: The package warning fix is also a breaking change :-/ 3.0.0 is fairly similar to 2.0.1, just that the names have changed. If you still need the 2.0.1 version you can use it as a custom icon set instead.

[oblador]

So for anyone wanting to keep using the 2.0.1 version of Ionicons should use it as a custom font instead. Do so by downloading the iconset and the font file.

Ionicons.js needs to change the createIconSet import to:

import { createIconSet } from 'react-native-vector-icons';

Of course you need to change the font in Xcode javascript imports too.

[oblador]

@insraq: Did it solve your problem?

[robertftw]

@oblador Where can I find the icon names for 3.0.0? http://ionicons.com/ Still shows the 2.0.1 and many of my icons doesn't work anymore.

[oblador]

@robertftw: I'm assuming they will release a new cheat sheet eventually, for now you're probably best off using the IconExplorer example project.

[udanpe]

return Ionicons 2.01
import Icon from 'react-native-vector-icons/Ionicons2';
use icons without names its hell
Ionicons 3.0 last commits on Jan 14, 2016

[ryankask]

I was also having issues with the Ionicons upgrade as a lot of the icon names have changed or are gone. In addition, version 3 doesn't seem to be released yet and there hasn't been a public commit since 14 January 2016. That being said, Ionic 2 beta will be using Ionicons 3 (https://github.com/driftyco/ionic/blob/2.0/package.json#L20) so it's a good thing v3 icons are included but it might be helpful to add the v2 icons again as suggested above.

The biggest issue I had was that there is no cheatsheet for v3. It's a bit inconvenient to have to run a sample application just to see what's available. Instead, I cloned the ionicons repository (git clone https://github.com/driftyco/ionicons.git), ran git checkout 3.0, and then open cheatsheet.html. I was then able to view all the icons.

I noticed that if you were using "android-*" icon names, you can probably just replace "android" with "md". The "ionic" custom icons that weren't prefixed with "ios-" or "android-" seem to be gone.

[oblador]

It's not trivial to support both 3 and 2 at the same time because they share font name and npm package name. I'm totally aware that this is a breaking change and that's why I bumped version to 2.0.0. Perhaps it was slightly early to do this, but I needed to do other breaking changes too so figured it was a good time to do it.

3.0.0 is live on npm since three weeks after being RC for months. I'm assuming they will change the cheatsheet once Ionic 2 becomes stable which shouldn't be _too_ far off considering their beta numbers are now at two digits. I know that I would get a bunch of requests for 3.0 as soon as their website change, so sticking with an unsupported 2.0.1 is not a good idea longterm anyway.

If you don't want to upgrade, then you're stuck with two options: 1. Don't upgrade to RNVI 2.0 or 2. Use Ionicons 2.0.1 as a custom font as I described earlier.

[ryankask]

That makes sense.

Once I looked at the cheatsheet, the upgrade was painless. For those who who want to see the Ionicons 3 cheatsheet, please check this out: https://cdn.rawgit.com/driftyco/ionicons/3.0/cheatsheet.html

[oblador]

@ryankask: Thanks, that's really useful. Wish there was a searchable version like the old one too :-)

[jaywalklabs]

once you have the cheat sheet I dont see a reason to use 2.0.1. its just a matter of replacing some names. lots of new useful icons, def worth while some initial pain. thanks @oblador !

[QuinnStephens]

Just a note for everyone - after upgrading, we found that the icon names were pointing to the wrong icons until we ran rnpm link again, which seemed to fix the issue!

[bgriffith]

First off - apologies for bumping this topic but I have a related issue..

@QuinnStephens - is running rnpm link all you did? I'm having the same issue after upgrading.

If I launch the app with react-native run-ios it seems to use the ionicons 2 font and therefore when I use new ionicons 3 names, I get a box with a question mark. However, if I launch the app through Xcode, I get the right set of icons loaded and no issues.

I've removed all node_modules and reinstalled multiple times, as well as running rnpm unlink and link.

[oblador]

@bgriffith: I'd guess it's due to caching, try to clean build folder.

[bgriffith]

@oblador Thanks! Yeah I'm sure it is - pulling my hair out! I forgot to mention that I've cleared the build folder many times (Xcode -> Product + option -> Clean build folder / Clean) which fixed it when I launch in Xcode, but not through the cli. Having just cloned my project on another machine with no issues I think I'll have to go nuclear 😬

[oblador]

@bgriffith: Not using react-native run-ios so can't help you there. Try stack overflow or the react-native repo.

[oblador]

Did some digging and found this official cheat sheet: http://ionicframework.com/docs/v2/ionicons/

Closing this issue for now.

[siakaramalegos]

What are some of the other major name changes from version 2 to version 3? I'm trying to more easily convert from one to the other in my head. It looks like "social" changed to "logo" and "android" changed to "md", but I can't find any other obvious changes/rules. I'm also trying to build an open-source converter to help out other devs trying to upgrade from version 2 to version 3, so any more clues on matching would be greatly appreciated!

[GantMan]

Thanks to @siakaramalegos => https://infinitered.github.io/ionicons-version-3-search/

https://github.com/infinitered/ionicons-version-3-search