React NativeBase的本机自定义图标字体

采用自：https://medium.com/@kelleyannerose/react-native-custom-icon-font-with-no-sad-red-screen-72b8d09a0e7b
这就是对我起作用的：）

**第0步：**React Native Vector图标安装和链接请确保您已经安装并链接了react-native-vector-icons。如果您还没有安装它，请按照他们的文档中的安装说明进行安装。通常这两个命令会为您完成安装。

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

**第一步：**在Fontello中添加图标首先，你必须把你的图标变成一种字体。转到fontello.com，正如他们的UI所准确建议的那样，“把定制的SVG图标或SVG字体拖到这里”。

**第二步：**选择图标这可能不是很明显，但是在你上传图标之后，你必须选择你想要包括的图标（一个接一个）。这很好，因为如果你想的话，你可以从其他库中选择图标，它们都将成为你的一个图标字体的一部分。你会用一个红色的圆圈清楚地看到你的选择。

**第三步/重要提示：**命名字体我建议在Fontello中的红色大按钮旁边的小框中命名字体。这样就不会有人问你字体名是什么。文件名也会与字体名相匹配，这样你就可以在iOS和Android中使用相同的名称，从而减少出错的可能性  。

**步骤4：**下载webfont点击右上角的红色“下载webfont”按钮。您可以通过点击向下箭头获得配置文件，但您还需要.ttf文件。

**第5步：**将.ttf文件添加到项目中从下载的fonts目录中找到.ttf文件，并将其添加到您的src文件中有意义的某个位置。我通常使用src/assets/fonts目录。为了我自己的理智，我希望在共享文件中的某个位置可以访问此文件。
**步骤6（iOS）：**将.ttf添加到Xcode中的资源中在Xcode ios/yourprojectname.xcodeproj中打开项目。进入Xcode后，右键单击资源目录，选择“将文件添加到“yourprojectname”...“”，然后选择自定义图标字体.ttf文件（我在步骤5中提到的src/assets/fonts目录中有我的文件）。
**第7步（iOS）：**添加字体以复制捆绑资源在Xcode中，转到顶部工具栏中的“Build Phases”，打开“Copy Bundle Resources”，您将看到react-native-vector-icons中的图标字体列表。在该列表中检查您的图标字体名称，如果没有，请单击“+”并选择您的.ttf文件。

x1c4d 1x指令集

步骤8（iOS）：添加到INFO.PLIST打开你的info.plist文件（最好在你添加任何其他目标之前，因为这是要被复制的info.plist），然后打开“应用程序提供的字体”。点击小圆圈中的“+”。它会在顶部添加一行，让你输入你的字体文件名。

**第9步（Android）：**将.ttf添加到Android将.ttf文件添加到android/app/src/main/assets/fonts目录。该目录应该已经存在，因为您已经安装了react-native-vector-icons并运行了react-native link，它会将Android的所有图标字体文件都放在这里。
**第10步：**将配置和图标组件添加到您的项目中返回到共享的src目录！在共享的src目录中添加两个文件，分别称为icon-font.js和icon-font.json，或者您可以随意命名它们。

返回到您从Fontello下载的文件，抓取config.json内容并将其粘贴到您的icon-font.json文件中。
打开您的icon-font.js文件并粘贴以下内容（当然，用您命名的自定义图标字体替换kelleyicons）。

import { createIconSetFromFontello } from 'react-native-vector-icons';
import fontelloConfig from './icon-font.json';
const MyIcon = createIconSetFromFontello(fontelloConfig, 'kelleyicons');
export default MyIcon;

**第11步：**添加示例在运行应用程序之前，请在某个位置添加图标字体的示例，以便您可以立即仔细检查它是否正常工作。在任何组件或屏幕文件中，从icon-font.js文件导入图标。

import MyIcon from './../config/icon-font.js';

在您的视图中，可以这样使用它（因为我使用的是NativeBase，所以我将自定义图标 Package 在NativeBase的Icon组件中）。您可以在icon-font.json文件中找到要使用的各个名称。

<Icon><MyIcon
  name={'chrome'}
  size={20}
  color={'#333333'} /></Icon>

**第12步：**保存、跑步和（希望如此）庆祝！确保所有东西都保存好了，进入你的终端run npm start，打开你的应用程序，祈祷零错误！
额外提示！

从React Native 0.60开始，资源会自动链接。这意味着如果您运行pod install（您最终会这样做），您 * 可能 * 会看到错误消息'Multiple commands produce' error when building with new Xcode build system'。如果您正在运行New Build System(File > Workplace Settings > Build System)。此错误是因为React Native尝试链接相同的资源两次。如果您遇到这种情况，只需返回步骤7（iOS）：添加字体以复制捆绑资源选择所有.ttf文件并按-按钮删除。然后重新构建：）

我们在React中执行如下操作来显示.ttf和.svg图标

import ttfFile from “./fonts/fileName.ttf”;
  import svgFile from “./svg/fileName.svg”

  <img src={ttfFile} />
  <img src={svgFile} />

或者

<img src={require(“./fonts/fileName.ttf”)}/>
  <img src={require(“./svg/fileName.svg”)} />

请原谅我打错了双引号，因为我是从我的移动的回答

ReactNativeBase的本机自定义图标

NativeBase提供createIcon，您可以使用viewBox和.svg档案的路径数据，个别建立和汇出自己的图标。

一条路径

如果您的图标只有一个路径数据，则可以按如下方式提供：

import React from 'react';
import { createIcon } from 'native-base';

export const MyCustomIcon = createIcon({
  viewBox: '0 0 512 512',
  d: 'M424.337,272.548c-72.91,...,8.532v16.549H271.514z',
});

多个路径

使用react-native-svg中的Path和G，可以将上述路径提供给createIcon参数中的path属性。
以下是一个示例：

import React from 'react';
import { createIcon } from 'native-base';
import { Path, G } from 'react-native-svg';

export const MyCustomIcon = createIcon({
  viewBox: '0 0 512 512',
  path: <G>
    <Path d="M486.4,0H25.6C11.468,...,8.533V486.4z" />
    <Path d="M452.267,...,8.533V452.267z" />
  </G>
});

奖金
您甚至可以使用useToken为自定义图标提供主题的颜色

import React from 'react';
import { createIcon, useToken } from 'native-base';
import { Path, G } from 'react-native-svg';

export const MyCustomIcon = (props) => {
  const [white, primary, secondary] = useToken('colors', ['white', 'primary.400', 'secondary.400']);

  const component = createIcon({
    viewBox: '0 0 370 370',
    path: <G>
      <Path fill={primary} d="M350.00159,370.00153h-230a20,...,8.533V452.267z" />
      <Path fill={white} d="M250.00159,40.00154h-230a20,...,40Z" />
      <Path fill={secondary} d="M135.1,219.84,36.41,...,338.57l39.49-56.66Z" />
    </G>,
    ...props
  });

  return component.type.render();
};