CODEWITHSUNDEEP
react-native
xRobot
xRobot

Reputation: 26567

How to use React Native vector icons?

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

Upvotes: 32

Views: 107732

Answers (9)

Abhimanyu Kumar
Abhimanyu Kumar

Reputation: 1

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"

Upvotes: 0

Kaihua
Kaihua

Reputation: 336

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.

Upvotes: 0

kumar kundan
kumar kundan

Reputation: 2057

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" />

Upvotes: 18

vibhu
vibhu

Reputation: 377

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

Upvotes: 0

Aditya Raj Singh
Aditya Raj Singh

Reputation: 11

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"

Upvotes: 1

Chhay Rith Hy
Chhay Rith Hy

Reputation: 1439

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" />

Upvotes: 16

Namdev Deshmukh
Namdev Deshmukh

Reputation: 37

You can use : 

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

Or :

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

in any React native componant property.

Upvotes: 1

Ruben Abarca
Ruben Abarca

Reputation: 51

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.

Upvotes: 5

QMFNP
QMFNP

Reputation: 997

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.

Upvotes: 34

Related Questions