向 React-Native 项目添加自定义图标

Question

在使用 React Native 开发项目并使用 IonIcons 中的图标时，我意识到重复单束和重复队列的图标不存在。我找到了 svg 形式的合适图标，如何将它们添加到我的项目中？我正在使用react-native-vector-icons 包。

我尝试手动将图标插入字体文件并更改字形映射。我还尝试添加自定义字体文件。两个都没用。

Answer 1

要使用自定义 svg 图标，您需要安装这两个依赖项：

• react-native-svg

• react-native-svg-transformer

（确保遵循两个依赖项的设置说明）

配置依赖项后，重新构建应用程序。然后，创建一个可重用的 svg 组件，如下所示，它将接受道具

name

、

style

、

width

、

height

。

const SvgIcon = (props) => {
  const {style, width = 24, height = 24, color} = props;
  const propsObj = {
    style,
    width,
    height,
    fill: color,
  };
  return <props.name {...propsObj} />;
};
export default SvgIcon;

最后，在任何其他组件中使用此组件，如下所示（假设您已将 svg 文件保存为

mySvgIcon.svg

）：

import SvgIcon from '../components/SvgIcon';
import MySvgIcon from '../mySvgIcon.svg';

// Rest of the component code

<SvgIcon
    width={20}
    name={MySvgIcon}
    height={20}
    color={'white'}
 />