feat: all exported icon components are now suffixed with "Icon" (#76)

It's to follow @phosphor-icons/react release 2.1.8

Author: mrkpatchaa

README.md

@@ -35,14 +35,14 @@ Simply import the icons you need, and add them anywhere in your render method. P
 ```tsx
 import React from 'react';
 import { View } from 'react-native';
-import { Horse, Heart, Cube } from 'phosphor-react-native';
+import { HorseIcon, HeartIcon, CubeIcon } from 'phosphor-react-native';
 
 const App = () => {
   return (
     <View>
-      <Horse />
-      <Heart color="#AE2983" weight="fill" size={32} />
-      <Cube color="teal" weight="duotone" />
+      <HorseIcon />
+      <HeartIcon color="#AE2983" weight="fill" size={32} />
+      <CubeIcon color="teal" weight="duotone" />
     </View>
   );
 };
@@ -85,7 +85,7 @@ Phosphor takes advantage of React Context to make applying a default style to al
 ```tsx
 import React from 'react';
 import { View } from 'react-native';
-import { IconContext, Horse, Heart, Cube } from 'phosphor-react-native';
+import { IconContext, HorseIcon, HeartIcon, CubeIcon } from 'phosphor-react-native';
 
 const App = () => {
   return (
@@ -97,9 +97,9 @@ const App = () => {
       }}
     >
       <View>
-        <Horse /> {/* I'm lime-green, 32px, and bold! */}
-        <Heart /> {/* Me too! */}
-        <Cube /> {/* Me three :) */}
+        <HorseIcon /> {/* I'm lime-green, 32px, and bold! */}
+        <HeartIcon /> {/* Me too! */}
+        <CubeIcon /> {/* Me three :) */}
       </View>
     </IconContext.Provider>
   );
@@ -115,22 +115,22 @@ You may wish to import all icons at once for use in your project, though dependi
 ```tsx
 import * as Icon from "phosphor-react-native";
 ...
-<Icon.Smiley />
-<Icon.Folder weight="thin" />
-<Icon.BatteryHalf size="24px" />
-<Icon.AirplaneTakeoff size="24px" mirrored={true} />
+<Icon.SmileyIcon />
+<Icon.FolderIcon weight="thin" />
+<Icon.BatteryHalfIcon size="24px" />
+<Icon.AirplaneTakeoffIcon size="24px" mirrored={true} />
 ```
 
 In cases where tree shaking does not work (resulting in large bundle size), you can import icons individually in this format:
 
 ```tsx
 // Javascript
-import Star from "phosphor-react-native/lib/commonjs/icons/Star";
+import { StarIcon } from "phosphor-react-native/lib/commonjs/icons/Star";
 
 // Typescript
-import Star from 'phosphor-react-native/src/icons/Star';
+import { StarIcon } from 'phosphor-react-native/src/icons/Star';
 
-<Star size="24px" />
+<StarIcon size="24px" />
 ```
 
 ## Related Projects

core

@@ -1,8 +1,7 @@
 import { Tabs } from 'expo-router';
 import React from 'react';
 
-import List from '@/components/icons/icons/List';
-import TestTube from '@/components/icons/icons/TestTube';
+import { ListIcon, TestTubeIcon } from '@/components/icons';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 
@@ -21,7 +20,7 @@ export default function TabLayout() {
         options={{
           title: 'All icons',
           tabBarIcon: ({ color, focused }) => (
-            <List weight={focused ? 'fill' : 'light'} color={color} />
+            <ListIcon weight={focused ? 'fill' : 'light'} color={color} />
           ),
         }}
       />
@@ -30,7 +29,7 @@ export default function TabLayout() {
         options={{
           title: 'Test Lab',
           tabBarIcon: ({ color, focused }) => (
-            <TestTube weight={focused ? 'fill' : 'light'} color={color} />
+            <TestTubeIcon weight={focused ? 'fill' : 'light'} color={color} />
           ),
         }}
       />
@@ -39,7 +38,7 @@ export default function TabLayout() {
         options={{
           title: 'Single',
           tabBarIcon: ({ color, focused }) => (
-            <TestTube weight={focused ? 'fill' : 'light'} color={color} />
+            <TestTubeIcon weight={focused ? 'fill' : 'light'} color={color} />
           ),
         }}
       />

example/app/(tabs)/_layout.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-native/no-inline-styles */
 /* eslint-disable  @typescript-eslint/no-explicit-any */
 
 import { useCallback, useState, useMemo } from 'react';
@@ -15,6 +14,8 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import * as IconPack from '@/components/icons';
 import PhosphorLogo from '@/assets/images/phosphor-mark-tight-yellow.png';
 
+console.log(IconPack);
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const { IconContext, ...Icons } = IconPack;
 

example/components/home.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable react-native/no-inline-styles */
-
 import { useCallback, useState } from 'react';
 
 import {
@@ -13,12 +11,12 @@ import {
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import PhosphorLogo from '@/assets/images/phosphor-mark-tight-yellow.png';
-import Swap from '@/components/icons/icons/Swap';
-import Acorn from '@/components/icons/icons/Acorn';
-import Palette from '@/components/icons/icons/Palette';
+import { SwapIcon } from '@/components/icons/icons/Swap';
+import { AcornIcon } from '@/components/icons/icons/Acorn';
+import { PaletteIcon } from '@/components/icons/icons/Palette';
 const weights = ['thin', 'light', 'regular', 'bold', 'fill', 'duotone'];
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const singleIcons = [Acorn, Palette, Swap]
+
+const singleIcons = [AcornIcon, PaletteIcon, SwapIcon];
 export default function SingleImportsScreen() {
   const [toggleActive, setToggleActive] = useState(false);
 
@@ -51,7 +49,7 @@ export default function SingleImportsScreen() {
             </Text>
           </View>
           <TouchableOpacity style={styles.weightSelect} onPress={handleToggle}>
-            <Swap color="#FFF" weight={'regular'} />
+            <SwapIcon color="#FFF" weight={'regular'} />
           </TouchableOpacity>
         </View>
       </SafeAreaView>

example/components/single-imports.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable react-native/no-inline-styles */
-
 import { useCallback, useState } from 'react';
 
 import {

example/components/test-lab.tsx

@@ -13,31 +13,31 @@
     "@react-navigation/bottom-tabs": "^7.2.0",
     "@react-navigation/native": "^7.0.14",
     "@react-navigation/native-stack": "^7.2.0",
-    "expo": "^52.0.27",
-    "expo-constants": "~17.0.4",
-    "expo-linking": "~7.0.4",
-    "expo-router": "~4.0.17",
-    "expo-splash-screen": "~0.29.21",
-    "expo-status-bar": "~2.0.1",
-    "expo-system-ui": "~4.0.7",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-native": "0.76.6",
-    "react-native-gesture-handler": "~2.20.2",
-    "react-native-reanimated": "~3.16.1",
-    "react-native-safe-area-context": "4.12.0",
-    "react-native-screens": "~4.4.0",
-    "react-native-svg": "15.8.0",
-    "react-native-web": "~0.19.13"
+    "expo": "^53.0.0",
+    "expo-constants": "~17.1.6",
+    "expo-linking": "~7.1.5",
+    "expo-router": "~5.1.0",
+    "expo-splash-screen": "~0.30.9",
+    "expo-status-bar": "~2.2.3",
+    "expo-system-ui": "~5.0.9",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-native": "0.79.4",
+    "react-native-gesture-handler": "~2.24.0",
+    "react-native-reanimated": "~3.17.4",
+    "react-native-safe-area-context": "5.4.0",
+    "react-native-screens": "~4.11.1",
+    "react-native-svg": "15.11.2",
+    "react-native-web": "^0.20.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
     "@eslint/js": "^9.9.0",
-    "@types/react": "~18.3.12",
+    "@types/react": "~19.0.10",
     "eslint": "9.x",
     "eslint-plugin-react": "^7.35.0",
     "globals": "^15.9.0",
-    "typescript": "~5.3.3",
+    "typescript": "~5.8.3",
     "typescript-eslint": "^8.0.1"
   },
   "private": true