如何使用React Native矢量图标？

Question

我刚刚使用此命令安装了React Native矢量图标：

npm install react-native-vector-icons

但是如果我在index.android.js中使用它

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

我得到的是一个中心带有X的正方形，而不是图标。

为什么？

编辑：

如果我尝试使用“npm install react-native-vector-icons --save”安装它，那么我会得到这个错误：

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

编辑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

编辑3:

我已从物理设备上移除了该应用，然后按照QMFNP的建议重新构建了它。现在它可以正常工作。

- xRobot

Answer 1

首先要确保在项目中保存了所需的依赖。方法是运行以下命令：

npm install react-native-vector-icons --save。必须包括--save，否则react-native link将无法找到模块。

在您的iOS或Android项目中使用这些图标之前，还需要链接本机模块。一种快速的方法是使用以下命令：

react-native link react-native-vector-icons

如果因某种原因导致react-native link无法链接本机模块，react-native-vector-icons README页面中也提供了详细的手动链接Android和iOS本机模块以及在网页中集成库的说明。

- QMFNP

---

react-native link 给我返回了一个错误："Error: Cannot find module 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons\package.json'"。 - xRobot

@xRobot，我已经更新了我的答案，包括在npm install命令中不包含--save时会发生什么。 - QMFNP

如果我包含--save，就会出现错误。请参见上面编辑的问题以查看它 :) - xRobot

@xRobot，请尝试运行npm cache clean，如这里所述：https://github.com/npm/npm/issues/10826。 - QMFNP

好的，npm cache clean解决了问题，现在已经安装并使用--save选项。然后我用"react-native link..."将其链接，但是我仍然看到一个中心带有X的正方形（我已经重新编辑了上面的问题）。谢谢:D - xRobot

Answer 2

这里是完整的更新答案，只需按照以下步骤进行 :-

1. 运行npm install react-native-vector-icons --save 2. 运行react-native link 3. 运行react-native link react-native-vector-icons 4. 根据您的需要，使用以下任一方式之一导入Icon

   **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. 使用(JSX)

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

- kumar kundan

Answer 3

步骤1： 安装react-native-element：

npm install react-native-elements --save

步骤二：安装react-native-vector-icons 从npm安装

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

链接它

react-native link react-native-vector-icons

之后，您可以按照以下步骤在页面中使用它：

第一步：

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

第二步：

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

- Chhay Rith Hy

Answer 4

也许您没有正确导入库，您必须指定您想要使用的图标系列。

我认为您正在使用的图标名称与您正在搜索的图标不符。

例如，如果您将使用材料图标，则导入将是：

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

并将名称更改为name={add}

如果您不想使用材料图标，请尝试查找其他图标系列。

- Ruben Abarca

---

根据他们在运行react-native link时遇到的错误，看起来react-native-vector-icons尚不存在于node_modules文件夹中。 - QMFNP

Answer 5

你可以使用：

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

或者：

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

在任何React Native组件属性中。

- Namdev Deshmukh

---

将Icon组件的属性设置为icon = {{ type:'font-awesome',name:'lock'}}似乎无法正常工作。 - samridhgupta

Answer 6

我认为这可能有所帮助，至少这是我每次都要做的事情。在 Project/android/app/build.gradle 中添加这行：

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

- Aditya Raj Singh

Answer 7

按照以下步骤手动操作 https://github.com/oblador/react-native-vector-icons#option-manually-1

这可能会帮助某些人使用cmd安装React Native Vector Icon并按照每个手动步骤进行操作，但是留下位于android>app>src>main>java>com>youApplication>mainApplication.java的mainApplication.java文件。 如果您运行自动链接命令react-native link react-native-vector-icons，则将其注释掉： //import com.oblador.vectoricons.VectorIconsPackage; //无法自动链接的包可以在此处手动添加，例如： // packages.add(new MyReactNativePackage()); // packages.add(new VectorIconsPackage()); 然后重新构建您的应用程序，这对我有用，我总共花了10多个小时才找到它。

- vibhu

Answer 8

遇到的问题可能是字体文件没有被复制到正确的位置供 React Native 使用。

我按照这里列出的步骤进行操作：https://aboutreact.com/react-native-vector-icons/，这对我有效，而 npm link 的解决方案对我无效。

我的环境如下：

• npm: 10.2.0
• node: v21.1.0
• 操作系统: macOS Ventura
• xcode: 15.0.1

我的步骤如下：

1. npm install react-native-vector-icons --save
2. npx pod-install 或者 cd iOS && pd install
3. iOS中导入图标文件
   1. 在ios目录下创建一个fonts文件夹，并将node_modules/react-native-vector-icons/Fonts中的所有字体文件复制到其中
   2. 现在在Xcode中打开项目YourProject -> ios -> YourProject.xcworkspace
   3. 在Xcode中打开项目后，点击左侧边栏中的项目以打开选项，然后选择“Add Files to “YourProjectName””
   4. 选择你创建的fonts文件夹。记得选择下方的Create Folder references，然后点击Add
   5. 编辑info.plist并添加字体配置

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

然后重新运行构建CLI，你应该能够看到图标。

- Kaihua