Skip to content

All exported icon components are now suffixed with the word "Icon" to follow @phosphor-icons/react release 2.1.8 #76

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 25, 2025
Merged

All exported icon components are now suffixed with the word "Icon" to follow @phosphor-icons/react release 2.1.8 #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};
Expand Down Expand Up @@ -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 (
Expand All @@ -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>
);
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion core
Open in desktop
Submodule core updated 2 files
+4 −2 README.md
+2 −2 src/icons.ts
9 changes: 4 additions & 5 deletions example/app/(tabs)/_layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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} />
),
}}
/>
Expand All @@ -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} />
),
}}
/>
Expand All @@ -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} />
),
}}
/>
Expand Down
3 changes: 2 additions & 1 deletion example/components/home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable @typescript-eslint/no-explicit-any */

import { useCallback, useState, useMemo } from 'react';
Expand All @@ -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;

Expand Down
14 changes: 6 additions & 8 deletions example/components/single-imports.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
/* eslint-disable react-native/no-inline-styles */

import { useCallback, useState } from 'react';

import {
Expand All @@ -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);

Expand Down Expand Up @@ -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>
Expand Down
2 changes: 0 additions & 2 deletions example/components/test-lab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
/* eslint-disable react-native/no-inline-styles */

import { useCallback, useState } from 'react';

import {
Expand Down
36 changes: 18 additions & 18 deletions example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading
Loading