如何使用 React Native 矢量图标？

Question

I have just installed React Native vector icons with this comand:

npm install react-native-vector-icons

But if I use it in the index.android.js

<Icon name="ios-add" size={30} color="#4F8EF7" />

I get a square with a X in the center instead of the icon.

Why ?

EDIT:

If I try to install it with "npm install react-native-vector-icons --save", then I get this error:

C:\Users\xrobot\Desktop\React Native\AwesomeProject>npm install react-native-vector-icons --save

    npm ERR! Windows_NT 10.0.14393
    npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "react-native-vector-icons" "--save"
    npm ERR! node v6.9.5
    npm ERR! npm  v3.10.10
    npm ERR! path C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7
    npm ERR! code EPERM
    npm ERR! errno -4048
    npm ERR! syscall rename

    npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7' -> 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons'
    npm ERR!     at destStatted (C:\Program Files\nodejs\node_modules\npm\lib\install\action\finalize.js:25:7)
    npm ERR!     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:264:29
    npm ERR!     at FSReqWrap.oncomplete (fs.js:123:15)
    npm ERR!
    npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7' -> 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons'
    npm ERR!     at Error (native)
    npm ERR!  { Error: EPERM: operation not permitted, rename 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7' -> 'C:\Users\emiliano\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons'
    npm ERR!     at destStatted (C:\Program Files\nodejs\node_modules\npm\lib\install\action\finalize.js:25:7)
    npm ERR!     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:264:29
    npm ERR!     at FSReqWrap.oncomplete (fs.js:123:15)
    npm ERR!
    npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\emiliano\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7' -> 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons'
    npm ERR!     at Error (native) parent: 'AwesomeProject' }
    npm ERR!
    npm ERR! Please try running this command again as root/Administrator.

    npm ERR! Please include the following file with any support request:
    npm ERR!     C:\Users\xrobot\Desktop\React Native\AwesomeProject\npm-debug.log

    C:\Users\xrobot\Desktop\React Native\AwesomeProject>npm install react-native-vector-icons
    AwesomeProject@0.0.1 C:\Users\xrobot\Desktop\React Native\AwesomeProject
    `-- react-native-vector-icons@4.0.0

EDIT 2:

C:\Users\xrobot\Desktop\React Native\AwesomeProject>react-native link react-native-vector-icons
rnpm-install info Linking react-native-vector-icons android dependency
rnpm-install info Android module react-native-vector-icons has been successfully linked
rnpm-install info Linking react-native-vector-icons ios dependency
rnpm-install info iOS module react-native-vector-icons has been successfully linked
rnpm-install info Linking assets to ios project
rnpm-install WARN ERRGROUP Group 'Resources' does not exist in your XCode project. We have created it automatically for you.
rnpm-install info Linking assets to android project
rnpm-install info Assets have been successfully linked to your project

EDIT 3:

I have removed the app from the physical device and then I re-build it ( as QMFNP said ). Now it works

Answer 1

First, make sure you're saving the dependency in your project by doing:

npm install react-native-vector-icons --save . Including the --save is necessary, otherwise react-native link won't be able to locate the module.

Before you can use them in your iOS or Android project, you also have to link the native modules. The quick way to do this is by using the following command:

react-native link react-native-vector-icons

If for any reason you have problems using react-native link to link the native modules, the react-native-vector-icons README also provides detailed instructions for linking them manually on Android and iOS, and integrating the library on the web as well.

Answer 2

Here is full UPDATED answer, just follow these steps :-

1. npm install react-native-vector-icons --save 2. react-native link 3. react-native link react-native-vector-icons 4. import Icon using one of these ( as per your requirement )

   **MaterialCommunityIcons**

    import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
   **Ionicons**

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

   **FontAwesome5**

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

5. Uses (JSX)

     <Icon size={24} color="white" name="movie" />

Answer 3

Step 1: Install react-native-element:

npm install react-native-elements --save

Steps 2: Install react-native-vector-icons Install from npm

npm install react-native-vector-icons --save

Link it

react-native link react-native-vector-icons

After that you can use it in your page by: Step 1:

import { Icon } from 'react-native-elements';

Step 2:

<Icon name="md-beer" type="ionicon" color="#887700" />

Answer 4

Maybe you are not importing correctly the library, you must specify a family of icons you wanna use.

I think the name of the icon you are using not correspond with the icon you are searching.

For example, if you will use material icons, the import will be: import Icon from 'react-native-vector-icons/MaterialIcons';

And change the name to name={add}

Try look for other icons family if you don want use material icons.

Answer 5

You can use :

icon = {"<"Icon name='lock'/>} 

Or :

icon = {{ type:'font-awesome',name:'lock'}}

in any React native componant property.

Answer 6

I think this may help, at least this is what I have to do every time. In the Project/android/app/build.gradle , add this line:

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Answer 7

follow this step manual https://github.com/oblador/react-native-vector-icons#option-manually-1

this may help some one install react native vector icon with cmd and follow every manual step but leave the mainApplication.java which is at android>app>src>main>java>com>youApplication>mainApplication.java comment it out if you run the auto linkng command which is react-native link react-native-vector-icons //import com.oblador.vectoricons.VectorIconsPackage; // Packages that cannot be autolinked yet can be added manually here, for example: // packages.add(new MyReactNativePackage()); // packages.add(new VectorIconsPackage()); and rebuild your app this work for me I'm able to find it out in total more than 10hours