Using icons

[mk0y]

Following docs how to use icons in native-base project didn't help me to use any icon other than the ones from Ionicons package.
I installed react-native-vector-icons and linked with rnpm.
Here I see all icon definitions in my project: node_modules/native-base/node_modules/react-native-vector-icons/
If I want to use any other icon, for example "arrow-right" from EvilIcons, I'm getting in my Genymotion emulator: "Warning: Failed prop type: Invalid prop 'name' of value 'arrow-right' supplied to 'Icon', expected one of ['ios-add', 'ios-add-circle', .....]"
All these expected icons are defined in Ionicons.js file.

So, how do I get "arrow-right" from EvilIcons package?

Right now I'm doing like this: <Icon name='arrow-right' />

Thanks!

[oblador]

You should import your icon directly from this package like this:

import Icon from 'react-native-vector-icons/EvilIcons';

[mk0y]

Now none of the icons from other packages won't work. I'm trying to have header like here http://nativebase.io/docs/v0.5.9/components#header and also use icons from other packages, not just limiting to one.

[mk0y]

Think I got it.
Import as exact name, not just "Icon":

import EvilIcons from 'react-native-vector-icons/EvilIcons';

import FontAwesome from 'react-native-vector-icons/FontAwesome';

Then instead using <Icon /> element, use <FontAwesome name='fontawesome-name' /> element.

[melvinsg]

According to the IconNB implementation:

<Icon theme={{ iconFamily: 'FontAwesome' }} name='fontawesome-name' />

[jpaulin]

Is the aforementioned thing possible to get around with, some aliasing on part of the user? Namespace clash then with the icons' names themselves?

Just thinking of "going simple" and keeping downstream code consistent. The idea would be that "just use the icons", without - as a developer - caring about exactly in which packages they are implemented.

I thought along the lines:

// Combines packages here somehow, after which:
import Icon from 'react-native-vector-icons'

I'd be interested in making some kind of PR if this is deemed
a) mildly or more useful
b) not confusing for existing users, so not breaking code that is as in previous thread messages

[mballen-1]

Try upgrading your semantic-ui-react version to latest version
Worked for me in reactjs, not tested in react Native yet

[Swarzkopf314]

<Icon name='power-off' type='FontAwesome'/>