32

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 [email protected] C:\Users\xrobot\Desktop\React Native\AwesomeProject `-- [email protected]

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

Improve this question

9 Answers 9

Reset to default
34

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.

see attached screenshot

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

react-native link return me " Error: Cannot find module 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons\package.json'"
@xRobot this is the result of not saving the react-native-vector-icons dependency. I'm able to reproduce your error if I run npm install react-native-vector-icons and react-native link react-native-vector-icons. In order to fix it, you have to be sure to include the --save at the end of your npm install so it creates the react-native-vector-icons folder inside of your node_modules folder. The full command is npm install react-native-vector-icons --save.
@xRobot I've updated my answer to include what happens when you don't include --save in your npm install command.
If I include --save, I get an error. See the edited question above to see it please :)
@xRobot can you try running npm cache clean as mentioned here: github.com/npm/npm/issues/10826 ?
|
18

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" />
Improve this answer

Comments

16

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" />
Improve this answer

Comments

5

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.

Improve this answer

1 Comment

Based on the error they're getting when they try running react-native link it appears that react-native-vector-icons doesn't exist inside of the node_modules folder yet.
1

You can use : 

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

Or :

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

in any React native componant property.

Improve this answer

1 Comment

Giving Icon component property as icon = {{ type:'font-awesome',name:'lock'}} doesnt seems to work
1

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"
Improve this answer

Comments

0

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

Improve this answer

Comments

0

Having the same issue as the root cause might be those font files are not copied into the right place for RN to use.

I followed the steps listed here: https://aboutreact.com/react-native-vector-icons/ which works for me, while npm link solution does not work for me.

My env is as follows,

  • npm: 10.2.0
  • node: v21.1.0
  • os: macOS Ventura
  • xcode: 15.0.1

My steps are as follows,

  1. npm install react-native-vector-icons --save
  2. npx pod-install or cd iOS && pd install
  3. Importing Icon Files in iOS
    1. Create a fonts directory in ios and copy all the font files from node_modules/react-native-vector-icons/Fonts into it
    2. Now open the project YourProject -> ios -> YourProject.xcworkspace in Xcode.
    3. After opening the project in Xcode click on the project from the left sidebar to open the options and select Add Files to “YourProjectName”
    4. Select the fonts directory which you have created. Remember to select Create Folder references from below and click Add
    5. Edit info.plist and add fonts configuration
<key>UIAppFonts</key> <array> <string>fonts/FontAwesome.ttf</string> <string>fonts/Ionicons.ttf</string> <string>fonts/Foundation.ttf</string> <string>fonts/MaterialCommunityIcons.ttf</string> <string>fonts/MaterialIcons.ttf</string> </array>

Then rerun the build CLI and you should be enable to see the icons.

Improve this answer

Comments

0

Add this code in android/app/build.gradle to confirm that it works fine for every icon.

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.