feat: exported Icon component (#4014)

docs/docusaurus.config.js

@@ -129,6 +129,7 @@ const config = {
           IconButton: {
             IconButton: 'IconButton/IconButton',
           },
+          Icon: 'Icon',
           List: {
             ListAccordion: 'List/ListAccordion',
             ListAccordionGroup: 'List/ListAccordionGroup',

docs/src/data/screenshots.js

@@ -80,6 +80,7 @@ const screenshots = {
   AnimatedFAB: 'screenshots/animated-fab.gif',
   'FAB.Group': 'screenshots/fab-group.gif',
   HelperText: 'screenshots/helper-text.gif',
+  Icon: 'screenshots/icon.png',
   IconButton: {
     default: 'screenshots/icon-button-1.png',
     outlined: 'screenshots/icon-button-4.png',

example/src/ExampleList.tsx

@@ -23,6 +23,7 @@ import DialogExample from './Examples/DialogExample';
 import DividerExample from './Examples/DividerExample';
 import FABExample from './Examples/FABExample';
 import IconButtonExample from './Examples/IconButtonExample';
+import IconExample from './Examples/IconExample';
 import ListAccordionExample from './Examples/ListAccordionExample';
 import ListAccordionExampleGroup from './Examples/ListAccordionGroupExample';
 import ListItemExample from './Examples/ListItemExample';
@@ -74,6 +75,7 @@ export const mainExamples: Record<
   divider: DividerExample,
   fab: FABExample,
   iconButton: IconButtonExample,
+  icon: IconExample,
   listAccordion: ListAccordionExample,
   listAccordionGroup: ListAccordionExampleGroup,
   listSection: ListSectionExample,

example/src/Examples/IconExample.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { Icon, List, MD2Colors } from 'react-native-paper';
+
+import ScreenWrapper from '../ScreenWrapper';
+
+const IconExample = () => {
+  return (
+    <ScreenWrapper>
+      <List.Section title="Default color">
+        <View style={styles.row}>
+          <Icon source="camera" size={24} />
+        </View>
+      </List.Section>
+      <List.Section title="Custom color">
+        <View style={styles.row}>
+          <Icon source="camera" color={MD2Colors.green500} size={24} />
+        </View>
+      </List.Section>
+      <List.Section title="Custom Size">
+        <View style={styles.row}>
+          <Icon source="heart" color={MD2Colors.pink300} size={50} />
+        </View>
+      </List.Section>
+    </ScreenWrapper>
+  );
+};
+
+IconExample.title = 'Icon';
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    marginLeft: 16,
+  },
+});
+
+export default IconExample;

src/components/Icon.tsx

@@ -19,17 +19,11 @@ export type IconSource =
   | ((props: IconProps & { color: string }) => React.ReactNode);
 
 type IconProps = {
-  size: number;
-  allowFontScaling?: boolean;
-};
-
-type Props = IconProps & {
-  color?: string;
-  source: any;
   /**
-   * @optional
+   * Size of icon.
    */
-  theme?: ThemeProp;
+  size: number;
+  allowFontScaling?: boolean;
 };
 
 const isImageSource = (source: any) =>
@@ -67,6 +61,42 @@ export const isValidIcon = (source: any) =>
 export const isEqualIcon = (a: any, b: any) =>
   a === b || getIconId(a) === getIconId(b);
 
+export type Props = IconProps & {
+  /**
+   * Icon to display.
+   */
+  source: any;
+  /**
+   *
+   * Color of the icon.
+   */
+  color?: string;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+};
+
+/**
+ * An icon component which renders icon from vector library.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Icon, MD3Colors } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <Icon
+ *     source="camera"
+ *     color={MD3Colors.error50}
+ *     size={20}
+ *   />
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+
 const Icon = ({
   source,
   color,

src/index.tsx

@@ -40,6 +40,7 @@ export { default as Divider } from './components/Divider';
 export { default as FAB } from './components/FAB';
 export { default as AnimatedFAB } from './components/FAB/AnimatedFAB';
 export { default as HelperText } from './components/HelperText/HelperText';
+export { default as Icon } from './components/Icon';
 export { default as IconButton } from './components/IconButton/IconButton';
 export { default as Menu } from './components/Menu/Menu';
 export { default as Modal } from './components/Modal';