wix · ethanshar · Jan 12, 2022 · Jan 12, 2022
diff --git a/demo/src/screens/MainScreen.js b/demo/src/screens/MainScreen.js
@@ -11,7 +11,7 @@ import {
   View,
   Text,
   TouchableOpacity,
-  Image,
+  Icon,
   Button,
   TabController,
   Incubator
@@ -180,7 +180,7 @@ class MainScreen extends Component {
           filterText ? (
             <Button link iconSource={Assets.icons.demo.close} grey10 onPress={this.clearSearch}/>
           ) : (
-            <Image source={Assets.icons.demo.search}/>
+            <Icon source={Assets.icons.demo.search}/>
           )
         }
       />
@@ -210,7 +210,7 @@ class MainScreen extends Component {
           <Text style={[item.deprecate && styles.entryTextDeprecated]} grey10 text50>
             {item.title}
           </Text>
-          <Image source={chevronIcon} style={{tintColor: Colors.grey10}} supportRTL/>
+          <Icon source={chevronIcon} style={{tintColor: Colors.grey10}} supportRTL/>
         </TouchableOpacity>
       );
     } else {

diff --git a/demo/src/screens/componentScreens/ImageScreen.tsx b/demo/src/screens/componentScreens/ImageScreen.tsx
@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
-import {View, Text, Image, Colors, Assets, OverlayTypes} from 'react-native-ui-lib';
+import {View, Text, Icon, Image, Colors, Assets, OverlayTypes} from 'react-native-ui-lib';
 import {renderBooleanOption, renderRadioGroup, renderSliderOption} from '../ExampleScreenPresenter';
 
 const IMAGE_URL =
@@ -94,7 +94,7 @@ class ImageScreen extends Component<{}, State> {
         return (
           <View padding-20 flex bottom={overlayType === Image.overlayTypes.BOTTOM}>
             <View row centerV>
-              <Image
+              <Icon
                 style={{margin: 5, marginRight: 10}}
                 source={Assets.icons.demo.camera}
                 tintColor={overlayType !== 'none' ? Colors.white : undefined}
@@ -106,7 +106,7 @@ class ImageScreen extends Component<{}, State> {
           </View>
         );
       } else {
-        return <Image style={{margin: 5}} source={Assets.icons.demo.camera}/>;
+        return <Icon style={{margin: 5}} source={Assets.icons.demo.camera}/>;
       }
     }
   }

diff --git a/demo/src/screens/componentScreens/PickerScreen.js b/demo/src/screens/componentScreens/PickerScreen.js
@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {ScrollView, Image} from 'react-native';
-import {View, Colors, Dialog, Text, Picker, Avatar, Assets, PanningProvider, Typography} from 'react-native-ui-lib'; //eslint-disable-line
+import {ScrollView} from 'react-native';
+import {View, Colors, Icon, Dialog, Text, Picker, Avatar, Assets, PanningProvider, Typography} from 'react-native-ui-lib'; //eslint-disable-line
 import contactsData from '../../data/conversations';
 import tagIcon from '../../assets/icons/tags.png';
 import dropdown from '../../assets/icons/chevronDown.png';
@@ -172,7 +172,7 @@ export default class PickerScreen extends Component {
             renderPicker={({label}) => {
               return (
                 <View row>
-                  <Image style={{marginRight: 1, height: 16, resizeMode: 'contain'}} source={tagIcon}/>
+                  <Icon style={{marginRight: 1, height: 16, resizeMode: 'contain'}} source={tagIcon}/>
                   <Text grey10 text80>
                     {label} Posts
                   </Text>
@@ -225,7 +225,7 @@ export default class PickerScreen extends Component {
                         {item.name}
                       </Text>
                     </View>
-                    {props.isSelected && <Image source={Assets.icons.check}/>}
+                    {props.isSelected && <Icon source={Assets.icons.check}/>}
                   </View>
                 )}
                 getItemLabel={item => item.name}

diff --git a/demo/src/screens/componentScreens/SliderScreen.tsx b/demo/src/screens/componentScreens/SliderScreen.tsx
@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {Colors, View, Text, Image, Slider, GradientSlider, ColorSliderGroup, Constants} from 'react-native-ui-lib';
+import {Colors, View, Text, Icon, Slider, GradientSlider, ColorSliderGroup, Constants} from 'react-native-ui-lib';
 
 const INITIAL_VALUE = 0;
 const COLOR = Colors.blue30;
@@ -49,7 +49,7 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
           </Text>
 
           <View row centerV style={Constants.isRTL && styles.ltr}>
-            <Image assetName={'megaphone'} style={styles.image}/>
+            <Icon assetName={'search'} style={styles.image}/>
             <Slider
               onValueChange={this.onSliderValueChange}
               value={INITIAL_VALUE}

diff --git a/demo/src/screens/componentScreens/ToastsScreen.js b/demo/src/screens/componentScreens/ToastsScreen.js
@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import {Assets, Colors, View, Button, Text, Image, TouchableOpacity, Toast} from 'react-native-ui-lib';
+import {Assets, Colors, View, Button, Text, Icon, TouchableOpacity, Toast} from 'react-native-ui-lib';
 
 
 const colors = [Colors.green30, Colors.red30, Colors.violet30];
@@ -34,7 +34,7 @@ export default class ToastsScreen extends Component {
           return (
             <TouchableOpacity key={color} onPress={() => this.setState({selectedColor: color})}>
               <View center style={[styles.color, {backgroundColor}, isSelected && styles.selected]}>
-                {color === 'none' && <Image source={plusIcon} tintColor={Colors.black}/>}
+                {color === 'none' && <Icon source={plusIcon} tintColor={Colors.black}/>}
               </View>
             </TouchableOpacity>
           );

diff --git a/demo/src/screens/incubatorScreens/PanViewScreen.tsx b/demo/src/screens/incubatorScreens/PanViewScreen.tsx
@@ -11,7 +11,7 @@ import {
   Constants,
   Modal,
   BorderRadiuses,
-  Image,
+  Icon,
   TouchableOpacity
 } from 'react-native-ui-lib';
 const {PanView} = Incubator;
@@ -157,7 +157,7 @@ class PanViewScreen extends Component {
             <Text text50 marginB-s2>
               Scrollable
             </Text>
-            <Image source={Assets.icons.demo.chevronDown}/>
+            <Icon source={Assets.icons.demo.chevronDown}/>
           </View>
         </ScrollView>
         {showToast && this.renderToast()}

diff --git a/demo/src/screens/realExamples/ProductPage/index.tsx b/demo/src/screens/realExamples/ProductPage/index.tsx
@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
-import {Assets, View, Text, Colors, Image, Button, Carousel, Picker} from 'react-native-ui-lib';
+import {Assets, View, Text, Icon, Colors, Image, Button, Carousel, Picker} from 'react-native-ui-lib';
 import _ from 'lodash';
 
 const colorOptions: {[key: string]: {name: string; color: string}} = {
@@ -40,7 +40,7 @@ class Product extends Component {
     return (
       <ScrollView>
         <View>
-          <Image
+          <Icon
             style={{position: 'absolute', top: 10, right: 10, zIndex: 100, tintColor: Colors.white}}
             source={Assets.icons.demo.share}
           />

diff --git a/expoDemo/MainScreen.tsx b/expoDemo/MainScreen.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback} from 'react';
 import {SectionList, StyleSheet} from 'react-native';
-import {Colors, View, Text, TouchableOpacity, Spacings, Image, Assets, Incubator} from 'react-native-ui-lib';
+import {Colors, View, Text, TouchableOpacity, Spacings, Icon, Assets, Incubator} from 'react-native-ui-lib';
 import {menuStructure} from 'unicorn-demo-app';
 import _ from 'lodash';
 import fuzzysearch from 'fuzzysearch';
@@ -83,7 +83,7 @@ export default function MainScreen({navigation}) {
             preset={null}
             text70
             fieldStyle={styles.fieldStyle}
-            leadingAccessory={<Image source={Assets.icons.search} marginH-s2/>}
+            leadingAccessory={<Icon source={Assets.icons.search} marginH-s2/>}
           />
         }
         sections={sections}

diff --git a/generatedTypes/src/components/chip/index.d.ts b/generatedTypes/src/components/chip/index.d.ts
@@ -2,8 +2,8 @@ import React from 'react';
 import { StyleProp, ViewStyle, ViewProps, ImageStyle, TextStyle, ImageSourcePropType } from 'react-native';
 import { AvatarProps } from '../avatar';
 import { BadgeProps } from '../badge';
-import { ImageProps } from '../image';
 import { TouchableOpacityProps } from '../touchableOpacity';
+import { IconProps } from '../icon';
 export declare type ChipProps = ViewProps & TouchableOpacityProps & {
     /**
      * Chip's size. Number or a width and height object.
@@ -63,7 +63,7 @@ export declare type ChipProps = ViewProps & TouchableOpacityProps & {
     /**
      * Additional icon props
      */
-    iconProps?: Omit<ImageProps, 'source'>;
+    iconProps?: Omit<IconProps, 'source'>;
     /**
      * Icon style
      */
@@ -164,7 +164,7 @@ declare const _default: React.ComponentClass<ViewProps & TouchableOpacityProps &
     /**
      * Additional icon props
      */
-    iconProps?: Omit<ImageProps, "source"> | undefined;
+    iconProps?: Omit<IconProps, "source"> | undefined;
     /**
      * Icon style
      */

diff --git a/generatedTypes/src/components/icon/index.d.ts b/generatedTypes/src/components/icon/index.d.ts
@@ -2,6 +2,14 @@ import React from 'react';
 import { ImageProps } from 'react-native';
 import { BaseComponentInjectedProps, MarginModifiers } from '../../commons/new';
 export declare type IconProps = ImageProps & MarginModifiers & {
+    /**
+     * if provided icon source will be driven from asset name
+     */
+    assetName?: string;
+    /**
+     * the asset group, default is "icons"
+     */
+    assetGroup?: string;
     /**
      * the icon tint
      */
@@ -10,6 +18,10 @@ export declare type IconProps = ImageProps & MarginModifiers & {
      * the icon size
      */
     size?: number;
+    /**
+     * whether the icon should flip horizontally on RTL
+     */
+    supportRTL?: boolean;
 };
 /**
  * @description: Icon component
@@ -19,16 +31,13 @@ export declare type IconProps = ImageProps & MarginModifiers & {
 declare type Props = IconProps & BaseComponentInjectedProps;
 declare const _default: React.ComponentClass<ImageProps & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
     /**
-     * the icon tint
+     * if provided icon source will be driven from asset name
      */
-    tintColor?: string | undefined;
+    assetName?: string | undefined;
     /**
-     * the icon size
+     * the asset group, default is "icons"
      */
-    size?: number | undefined;
-} & {
-    useCustomTheme?: boolean | undefined;
-}, any> & React.NamedExoticComponent<ImageProps & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
+    assetGroup?: string | undefined;
     /**
      * the icon tint
      */
@@ -37,7 +46,17 @@ declare const _default: React.ComponentClass<ImageProps & Partial<Record<"margin
      * the icon size
      */
     size?: number | undefined;
-} & BaseComponentInjectedProps> & {
-    readonly type: (props: Props) => JSX.Element;
+    /**
+     * whether the icon should flip horizontally on RTL
+     */
+    supportRTL?: boolean | undefined;
+} & {
+    useCustomTheme?: boolean | undefined;
+}, any> & {
+    (props: Props): JSX.Element;
+    displayName: string;
+    defaultProps: {
+        assetGroup: string;
+    };
 };
 export default _default;
diff --git a/src/components/card/index.tsx b/src/components/card/index.tsx
@@ -6,7 +6,7 @@ import {Colors, BorderRadiuses} from '../../style';
 import {Constants, asBaseComponent, forwardRef, BaseComponentInjectedProps, ForwardRefInjectedProps} from '../../commons/new';
 import View, {ViewProps} from '../view';
 import TouchableOpacity, {TouchableOpacityProps} from '../touchableOpacity';
-import Image from '../image';
+import Icon from '../icon';
 import CardImage from './CardImage';
 import CardSection, {CardSectionProps} from './CardSection';
 import {BlurViewPackage} from '../../optionalDependencies';
@@ -230,7 +230,7 @@ class Card extends PureComponent<PropTypes, State> {
       >
         {!selectionOptions.hideIndicator && (
           <View style={[this.styles.selectedIndicator, {backgroundColor: selectionColor}]}>
-            <Image
+            <Icon
               style={this.styles.selectedIcon}
               source={_.get(selectionOptions, 'icon', DEFAULT_SELECTION_PROPS.icon)}
             />

diff --git a/src/components/chip/index.tsx b/src/components/chip/index.tsx
@@ -6,10 +6,10 @@ import {asBaseComponent} from '../../commons/new';
 import {BorderRadiuses, Spacings} from 'style';
 import Avatar, {AvatarProps} from '../avatar';
 import Badge, {BadgeProps} from '../badge';
-import Image, {ImageProps} from '../image';
 import Text from '../text';
 import TouchableOpacity, {TouchableOpacityProps} from '../touchableOpacity';
 import View from '../view';
+import Icon, {IconProps} from '../icon';
 
 
 export type ChipProps = ViewProps & TouchableOpacityProps & {
@@ -76,7 +76,7 @@ export type ChipProps = ViewProps & TouchableOpacityProps & {
   /**
    * Additional icon props
    */
-  iconProps?: Omit<ImageProps, 'source'>;
+  iconProps?: Omit<IconProps, 'source'>;
   /**
    * Icon style
    */
@@ -169,8 +169,7 @@ const Chip = ({
     const isLeftIcon = iconPosition === 'left';
 
     return (
-      <Image
-      // @ts-ignore
+      <Icon
         source={isLeftIcon ? iconSource : rightIconSource}
         testID={`${testID}.icon`}
         {...iconProps}
@@ -201,8 +200,7 @@ const Chip = ({
         hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}
         testID={`${testID}.dismiss`}
       >
-        <Image
-        // @ts-ignore
+        <Icon
           source={dismissIcon}
           tintColor={dismissColor}
           style={[dismissIconStyle]}

diff --git a/src/components/chipsInput/index.tsx b/src/components/chipsInput/index.tsx
@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {NativeModules, StyleSheet, ViewStyle, Image, TextInput, NativeSyntheticEvent, TextInputKeyPressEventData, findNodeHandle, ScrollView, ScrollViewProps, TextInputProps as RNTextInputProps} from 'react-native';
+import {NativeModules, StyleSheet, ViewStyle, TextInput, NativeSyntheticEvent, TextInputKeyPressEventData, findNodeHandle, ScrollView, ScrollViewProps, TextInputProps as RNTextInputProps} from 'react-native';
 import {Colors, BorderRadiuses, ThemeManager, Typography, Spacings} from '../../style';
 import Assets from '../../assets';
 import {LogService} from '../../services';
@@ -11,6 +11,7 @@ import View from '../view';
 import TouchableOpacity from '../touchableOpacity';
 import Text from '../text';
 import Chip, {ChipProps} from '../chip';
+import Icon from '../icon';
 import {getValidationBasedColor, getCounterTextColor, getCounterText, getChipDismissColor, isDisabled} from './Presenter';
 import {TextFieldProps} from '../../../typings/components/Inputs';
 
@@ -309,7 +310,7 @@ class ChipsInput extends Component<OwnProps, State> {
     return (
       <View row centerV>
         {shouldMarkTag && (
-          <Image
+          <Icon
             style={[styles.removeIcon, tag.invalid && styles.basicTagStyle && styles.invalidTagRemoveIcon]}
             source={Assets.icons.x}
           />)

diff --git a/src/components/icon/icon.api.json b/src/components/icon/icon.api.json
@@ -7,7 +7,10 @@
   "modifiers": ["margin"],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/IconScreen.tsx",
   "props": [
+    {"name": "assetName", "type": "string", "description": "if provided icon source will be driven from asset name"},
+    {"name": "assetGroup", "type": "string", "description": "the asset group, default is icons"},
     {"name": "tintColor", "type": "string", "description": "The icon tint"},
-    {"name": "size", "type": "number", "description": "The icon size"}
+    {"name": "size", "type": "number", "description": "The icon size"},
+    {"name": "supportRTL", "type": "boolean", "description": "whether the image should flip horizontally on RTL locals"}
   ]
 }