4. expo图标管理

expo 自带有一个了，预览图标地址在 https://icons.expo.fyi/Index

使用示例

import FontAwesome5 from '@expo/vector-icons/FontAwesome5';
<FontAwesome5 name="hire-a-helper" size={24} color="black" />

如果需要没有想要的图标，我是用下面这种形式； expo还有其他形式支持：链接

安装svg依赖

npx expo install react-native-svg

然后在components下面创建一个Icons.tsx文件，用来管理所有的图标

import Svg, { Circle, Rect, Path } from 'react-native-svg';

interface IconProps {
  size?: string | number;
  color?: string;
}

// 测试图标
export const DemoIcon: React.FC<IconProps> = ({ size = 30, color = '#fff', ...rest }) => {
  return (
    <Svg height="50%" width="50%" viewBox="0 0 100 100" {...rest}>
      <Circle cx="50" cy="50" r="45" stroke="blue" strokeWidth="2.5" fill="green" />
      <Rect x="15" y="15" width={size} height={size} stroke="red" strokeWidth="2" fill="yellow" />
    </Svg>
  );
}

// 招聘
export const ZhaoPinIcon: React.FC<IconProps> = ({ size = 30, color = '#fff', ...rest }) => {
  return (
    <Svg viewBox="0 0 1024 1024" p-id="5316" width={size} height={size}  {...rest}>
      <Path d="M473.6 732.8c-9.6 0-25.6 3.2-48 6.4v112h-83.2v-102.4c-73.6 9.6-150.4 19.2-172.8 22.4L160 681.6c9.6-3.2 22.4-3.2 41.6-6.4V278.4h-19.2V188.8h272v89.6h-28.8v368c19.2-3.2 28.8-3.2 38.4-6.4l3.2 48 6.4 44.8zM288 278.4v70.4h51.2V278.4H288z m0 224h51.2v-67.2H288v67.2z m51.2 153.6v-67.2H288v73.6l51.2-6.4z m259.2-54.4l-3.2 25.6h220.8c0 9.6-9.6 112-12.8 131.2-6.4 76.8-32 89.6-121.6 99.2l-54.4 6.4-25.6-86.4 64-3.2c41.6-3.2 54.4-6.4 57.6-35.2 3.2-9.6 3.2-19.2 3.2-32h-233.6l16-102.4H448v-73.6h416v73.6l-265.6-3.2z m233.6-99.2H467.2V211.2H608V160l80 3.2v48H832v291.2zM547.2 288v32H608V288h-60.8z m0 140.8H608v-32h-60.8v32zM688 288v32h60.8V288h-60.8z m60.8 140.8v-32h-60.8v32h60.8z" p-id="5317" fill={color} />
    </Svg>
  );
}