Ionicons V5

[julius-lae]

Please update to Ionicons version 5. There are a lot of new Icons.

[AliAkhgar]

same request here!

[rozzz333]

same here, Project doesn't build for me after installing v5 on react native version "0.61.5"

[magaro98]

+1

[JacksonLaw]

I have the font files here: https://github.com/JacksonLaw/react-native-ionicons/blob/fonts-request/fonts/Ionicons.ttf
And the glyphs: https://github.com/JacksonLaw/react-native-ionicons/blob/fonts-request/glyph/map.json
The rest of the repo isn't finished unfortunately but there is a WIP open at https://github.com/arniu/react-native-ionicons/tree/v5

[yesIamFaded]

The feedback in this repo sucks tbh ... 😞

[humatic]

I left a comment on this duplicate issue: #1145 (comment)

Basically, I'd be willing to create a pull request for ionicons v5, but I'm not sure what the update process is.

Also, @JacksonLaw I installed react-native-ionicons but the icons don't render correctly for me. I left a comment on your pull request here: arniu/react-native-ionicons#16 (comment)

[dushyanttessact]

@humatic same issue here, any update from you guys?

[humatic]

@dushyanttessact Not in relation to this issue. But I found a work around that I'm reasonably happy with. I ended up downloading the latest SVG files directly from Ionicons and then using SVGR to convert the files to JS. Here's an example of the command to use:

npx @svgr/cli --native  --icon --replace-attr-values "#000=currentColor" -d path/to/output/ionicons-5.0.0-js path/to/input/ionicons-5.0.0

This method is a bit more manual than I would have liked, but on the other hand it removed a dependency from my stack and gave me more control. Note that I still had to make a few minor tweaks directly to the output JS files (ex: missing fill color).

[darrylyoung]

Thanks for sharing that solution, @humatic.

I'm in the situation where I want to use icons from Ionicons 5 but expo/vector-icons won't update until this repository updates and there doesn't seem to be any movement here so I think I'll go with your workaround for now until there's an update here. Thanks again.

[arstropica]

In my PR.

[romanakash]

Any update on this?

[thearabbit]

+1

[silencer07]

i created a fresh react native project, somehow the app is crashing because Ionicons are missing?? hmmm

import Ionicon from "react-native-vector-icons/Ionicons"

Error: Unrecognized font family 'Ionicons'

"react-native-vector-icons": "6.7.0",

[bryantpark04]

i created a fresh react native project, somehow the app is crashing because Ionicons are missing?? hmmm

import Ionicon from "react-native-vector-icons/Ionicons"

Error: Unrecognized font family 'Ionicons'

"react-native-vector-icons": "6.7.0",

I think your import statement is wrong, it should be
import Ionicons from 'react-native-vector-icons/Ionicons';

[MinimogDev]

@arstropica I saw that your PR was merged on 2nd of July and there was v7 release on 4th of July, however it seems that ionicons are still using old style. Do you by any chance know if your changes were released yet?

[arstropica]

@MinimogDev I believe my PR was merged in v6.7.0.
You may want to clear your build folder and then rebuild pods to ensure the right font file gets imported.

[RealDyllon]

@arstropica I've installed v7.0.0, and I'm unable to use any of the new IonIcons icons. I've tried cleaning the build folder, and rebuilding pods, but that didn't fix it. The older "ios-" and "android-" icons work fine.

@MinimogDev Did you find a solution?

[MinimogDev]

@RealDyllon I'm afraid not, I'm on v7 as well (fresh project that never used this lib before), but I see old ionicon designs

[arstropica]

@MinimogDev @RealDyllon
Are either one of you on Expo? I noticed some weird behaviour with Expo loading older versions of the package.

https://snack.expo.io/@estatesales/c731d8

You can try comparing the glyph code of a working icon with that in glypmaps/Ionicons.json and see if they are the same. The above snack gives a different code suggesting that expo is loading an earlier version.

[RealDyllon]

@arstropica My ./glyphmap/IonIcons.js shows:"ios-american-football": 61717,, as expected.

I'm using bare react native, and cocoapods to link the native dependencies. Could this be a .ttf issue?

[arstropica]

@RealDyllon Not sure. Could be a dependency collision. Do you have any dependencies that also load the Ionicons font (i.e. nativebase)? If so, do they load a different version?

npm list react-native-vector-icons

[RealDyllon]

@arstropica here's npm's response:

/Users/dyllon/Code/my-app └── react-native-vector-icons@7.0.0

Looks like this is the only dependency.

Looking through the entire xcode project, I could only find import references to the .ttf in the /fonts directory of the npm module. Any way to check the version of that? "Get info" states the .ttf is v1.00

Or could it be that an older .ttf is still cached somewhere?

[arstropica]

@RealDyllon Possibly. I just tried v.7.0.0 with a new install and the new icons worked fine.

I used the Manual Option for setup and coped the list of fonts into info.plist.

import React from 'react';
import {StyleSheet, View, SafeAreaView, ScrollView} from 'react-native';
import Ionicon from 'react-native-vector-icons/Ionicons';

console.log(Ionicon.getRawGlyphMap()['filter']);

const App: () => React$Node = () => {
  return (
    <SafeAreaView>
      <ScrollView>
        <View style={[styles.center]}>
          <Ionicon name="filter" size={48} />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  center: {
    flex: 1,
    alignContent: 'center',
    alignItems: 'center',
  },
});

export default App;

If the console statement outputs null or the icon fails to appear, then it's a problem with RN.

[johnf]

This happened in #1176