feat: update example

example/iconfont.json

@@ -0,0 +1,8 @@
+{
+  "symbol_url": "//at.alicdn.com/t/font_3252843_5j919n642xe.js",
+  "use_typescript": true,
+  "save_dir": "./src/components/iconfont",
+  "trim_icon_prefix": "icon",
+  "default_icon_size": 18,
+  "local_svgs": ""
+}

example/metro.config.js

@@ -6,6 +6,7 @@ const root = path.resolve(__dirname, '..');
 
 const modules = Object.keys({
   ...pak.peerDependencies,
+  'react-native-video': '*',
 });
 
 module.exports = {

example/package.json

@@ -24,7 +24,7 @@
     "react-native-redash": "^16.2.3",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-screens": "^3.10.1",
-    "react-native-svg": "^12.1.1",
+    "react-native-svg": "^12.3.0",
     "react-native-video": "*"
   },
   "devDependencies": {
@@ -40,6 +40,7 @@
     "eslint": "^7.14.0",
     "jest": "^26.6.3",
     "metro-react-native-babel-preset": "^0.66.2",
+    "react-native-iconfont-cli": "^2.2.4",
     "react-test-renderer": "17.0.2",
     "typescript": "^4.4.4"
   },

example/src/components/icon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { StyleProp } from 'react-native';
+import type { ViewProps } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { normalize } from '../../../src/utils';
+import type { IconNames } from './iconfont';
+import IconFont from './iconfont';
+
+export type IconProps = {
+  name: IconNames;
+  size?: number;
+  color?: string | string[];
+  style?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+} & ViewProps;
+export const Icon = ({ color, size, ...rest }: IconProps) => (
+  <IconFont
+    {...rest}
+    {...(size ? { size: normalize(size) } : {})}
+    color={color || ''}
+  />
+);

example/src/components/svg-icon/Chevrondown.tsx → example/src/components/iconfont/IconAIcChevrondown16.tsx

@@ -11,7 +11,11 @@ interface Props extends GProps, ViewProps {
   color?: string | string[];
 }
 
-let Chevrondown: FunctionComponent<Props> = ({ size, color, ...rest }) => {
+let IconAIcChevrondown16: FunctionComponent<Props> = ({
+  size,
+  color,
+  ...rest
+}) => {
   return (
     <Svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
       <Path
@@ -22,10 +26,12 @@ let Chevrondown: FunctionComponent<Props> = ({ size, color, ...rest }) => {
   );
 };
 
-Chevrondown.defaultProps = {
+IconAIcChevrondown16.defaultProps = {
   size: 18,
 };
 
-Chevrondown = React.memo ? React.memo(Chevrondown) : Chevrondown;
+IconAIcChevrondown16 = React.memo
+  ? React.memo(IconAIcChevrondown16)
+  : IconAIcChevrondown16;
 
-export default Chevrondown;
+export default IconAIcChevrondown16;

example/src/components/iconfont/IconAIcChevronleft16.tsx

@@ -0,0 +1,37 @@
+/* tslint:disable */
+/* eslint-disable */
+
+import React, { FunctionComponent } from 'react';
+import type { ViewProps } from 'react-native';
+import { Svg, GProps, Path } from 'react-native-svg';
+import { getIconColor } from './helper';
+
+interface Props extends GProps, ViewProps {
+  size?: number;
+  color?: string | string[];
+}
+
+let IconAIcChevronleft16: FunctionComponent<Props> = ({
+  size,
+  color,
+  ...rest
+}) => {
+  return (
+    <Svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
+      <Path
+        d="M673.92 865.92a48 48 0 0 0 0-67.84L387.84 512l286.08-286.08a48 48 0 1 0-67.84-67.84l-320 320a48 48 0 0 0 0 67.84l320 320a48 48 0 0 0 67.84 0z"
+        fill={getIconColor(color, 0, '#333333')}
+      />
+    </Svg>
+  );
+};
+
+IconAIcChevronleft16.defaultProps = {
+  size: 18,
+};
+
+IconAIcChevronleft16 = React.memo
+  ? React.memo(IconAIcChevronleft16)
+  : IconAIcChevronleft16;
+
+export default IconAIcChevronleft16;

example/src/components/iconfont/IconFeedback.tsx

@@ -0,0 +1,35 @@
+/* tslint:disable */
+/* eslint-disable */
+
+import React, { FunctionComponent } from 'react';
+import type { ViewProps } from 'react-native';
+import { Svg, GProps, Path } from 'react-native-svg';
+import { getIconColor } from './helper';
+
+interface Props extends GProps, ViewProps {
+  size?: number;
+  color?: string | string[];
+}
+
+let IconFeedback: FunctionComponent<Props> = ({ size, color, ...rest }) => {
+  return (
+    <Svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
+      <Path
+        d="M704 767.392A318.016 318.016 0 0 1 512 832a318.016 318.016 0 0 1-192-64.608C242.464 708.928 192 616.384 192 512c0-176.448 143.552-320 320-320s320 143.552 320 320c0 104.384-50.464 196.928-128 255.392M512 128C300.256 128 128 300.256 128 512c0 141.76 77.408 265.504 192 332.032A381.312 381.312 0 0 0 511.936 896h0.128A381.312 381.312 0 0 0 704 844.032c114.592-66.528 192-190.272 192-332.032 0-211.744-172.256-384-384-384"
+        fill={getIconColor(color, 0, '#333333')}
+      />
+      <Path
+        d="M639.936 403.84C639.936 339.904 582.528 288 512 288c-70.592 0-128 51.936-128 115.84v15.52a32 32 0 1 0 64 0v-15.552c0-28.576 28.736-51.808 64-51.808 35.296 0 64 23.232 64 51.84v49.152c0.064 1.536-0.544 31.616-39.808 59.008a169.44 169.44 0 0 1-32.16 17.6 31.584 31.584 0 0 0-24 30.4v37.184a32 32 0 0 0 64 0v-15.488c41.952-20.672 65.696-46.464 79.04-69.696 18.56-32.512 16.992-59.84 16.896-60.64V403.84zM512 672a32 32 0 1 0 0 64 32 32 0 0 0 0-64"
+        fill={getIconColor(color, 1, '#333333')}
+      />
+    </Svg>
+  );
+};
+
+IconFeedback.defaultProps = {
+  size: 18,
+};
+
+IconFeedback = React.memo ? React.memo(IconFeedback) : IconFeedback;
+
+export default IconFeedback;

example/src/components/iconfont/IconFlagoutline.tsx

@@ -0,0 +1,31 @@
+/* tslint:disable */
+/* eslint-disable */
+
+import React, { FunctionComponent } from 'react';
+import type { ViewProps } from 'react-native';
+import { Svg, GProps, Path } from 'react-native-svg';
+import { getIconColor } from './helper';
+
+interface Props extends GProps, ViewProps {
+  size?: number;
+  color?: string | string[];
+}
+
+let IconFlagoutline: FunctionComponent<Props> = ({ size, color, ...rest }) => {
+  return (
+    <Svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
+      <Path
+        d="M618.666667 256 853.333333 256 853.333333 682.666667 554.666667 682.666667 533.333333 597.333333 298.666667 597.333333 298.666667 896 213.333333 896 213.333333 170.666667 597.333333 170.666667 618.666667 256M298.666667 256 298.666667 512 554.666667 512 576 597.333333 768 597.333333 768 341.333333 597.333333 341.333333 576 256 298.666667 256Z"
+        fill={getIconColor(color, 0, '#333333')}
+      />
+    </Svg>
+  );
+};
+
+IconFlagoutline.defaultProps = {
+  size: 18,
+};
+
+IconFlagoutline = React.memo ? React.memo(IconFlagoutline) : IconFlagoutline;
+
+export default IconFlagoutline;

example/src/components/iconfont/IconSetting.tsx

@@ -0,0 +1,35 @@
+/* tslint:disable */
+/* eslint-disable */
+
+import React, { FunctionComponent } from 'react';
+import type { ViewProps } from 'react-native';
+import { Svg, GProps, Path } from 'react-native-svg';
+import { getIconColor } from './helper';
+
+interface Props extends GProps, ViewProps {
+  size?: number;
+  color?: string | string[];
+}
+
+let IconSetting: FunctionComponent<Props> = ({ size, color, ...rest }) => {
+  return (
+    <Svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
+      <Path
+        d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56c10.1-8.6 13.8-22.6 9.3-35.2l-0.9-2.6c-18.1-50.5-44.9-96.9-79.7-137.9l-1.8-2.1c-8.6-10.1-22.5-13.9-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85c-2.4-13.1-12.7-23.3-25.8-25.7l-2.7-0.5c-52.1-9.4-106.9-9.4-159 0l-2.7 0.5c-13.1 2.4-23.4 12.6-25.8 25.7l-15.8 85.4c-35.9 13.6-69.2 32.9-99 57.4l-81.9-29.1c-12.5-4.4-26.5-0.7-35.1 9.5l-1.8 2.1c-34.8 41.1-61.6 87.5-79.7 137.9l-0.9 2.6c-4.5 12.5-0.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5c-10.1 8.6-13.8 22.6-9.3 35.2l0.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1c8.6 10.1 22.5 13.9 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4c2.4 13.1 12.7 23.3 25.8 25.7l2.7 0.5c26.1 4.7 52.8 7.1 79.5 7.1 26.7 0 53.5-2.4 79.5-7.1l2.7-0.5c13.1-2.4 23.4-12.6 25.8-25.7l15.7-85c36.2-13.6 69.7-32.9 99.7-57.6l81.3 28.9c12.5 4.4 26.5 0.7 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l0.9-2.6c4.5-12.3 0.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9c-11.3 26.1-25.6 50.7-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97c-28.1 3.2-56.8 3.2-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9z"
+        fill={getIconColor(color, 0, '#333333')}
+      />
+      <Path
+        d="M512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m79.2 255.2C570 602.3 541.9 614 512 614c-29.9 0-58-11.7-79.2-32.8C411.7 560 400 531.9 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8C612.3 444 624 472.1 624 502c0 29.9-11.7 58-32.8 79.2z"
+        fill={getIconColor(color, 1, '#333333')}
+      />
+    </Svg>
+  );
+};
+
+IconSetting.defaultProps = {
+  size: 18,
+};
+
+IconSetting = React.memo ? React.memo(IconSetting) : IconSetting;
+
+export default IconSetting;

example/src/components/iconfont/helper.ts

@@ -0,0 +1,12 @@
+/* tslint:disable */
+/* eslint-disable */
+
+export const getIconColor = (color: string | string[] | undefined, index: number, defaultColor: string) => {
+  return color
+    ? (
+      typeof color === 'string'
+        ? color
+        : color[index] || defaultColor
+    )
+    : defaultColor;
+};

example/src/components/iconfont/index.tsx

@@ -0,0 +1,50 @@
+/* tslint:disable */
+/* eslint-disable */
+
+import React, { FunctionComponent } from 'react';
+import type { ViewProps } from 'react-native';
+import type { GProps } from 'react-native-svg';
+import IconAIcChevrondown16 from './IconAIcChevrondown16';
+import IconAIcChevronleft16 from './IconAIcChevronleft16';
+import IconFlagoutline from './IconFlagoutline';
+import IconSetting from './IconSetting';
+import IconFeedback from './IconFeedback';
+export { default as IconAIcChevrondown16 } from './IconAIcChevrondown16';
+export { default as IconAIcChevronleft16 } from './IconAIcChevronleft16';
+export { default as IconFlagoutline } from './IconFlagoutline';
+export { default as IconSetting } from './IconSetting';
+export { default as IconFeedback } from './IconFeedback';
+
+export type IconNames =
+  | 'a-ic_chevrondown_16'
+  | 'a-ic_chevronleft_16'
+  | 'flagoutline'
+  | 'setting'
+  | 'feedback';
+
+interface Props extends GProps, ViewProps {
+  name: IconNames;
+  size?: number;
+  color?: string | string[];
+}
+
+let IconFont: FunctionComponent<Props> = ({ name, ...rest }) => {
+  switch (name) {
+    case 'a-ic_chevrondown_16':
+      return <IconAIcChevrondown16 key="1" {...rest} />;
+    case 'a-ic_chevronleft_16':
+      return <IconAIcChevronleft16 key="2" {...rest} />;
+    case 'flagoutline':
+      return <IconFlagoutline key="3" {...rest} />;
+    case 'setting':
+      return <IconSetting key="4" {...rest} />;
+    case 'feedback':
+      return <IconFeedback key="5" {...rest} />;
+  }
+
+  return null;
+};
+
+IconFont = React.memo ? React.memo(IconFont) : IconFont;
+
+export default IconFont;

example/src/components/index.tsx

@@ -1,3 +1,2 @@
 export * from './text';
 export * from './view';
-export * from './svg-icon';