Skip to content

Commit b6750f9

Browse files
mrkpatchaamrkpatchaa
authored
Release 2.2.1 (#60)
* fix: fixes #48, currentColor for duotone and fill * chore: upgrade example app to add more screens * fix: fixes #41, add duotone color to override black * chore: bump npm version * fix: props.color * fix: fix test app safearea * chore: update docs * fix: types export from index file * chore: bump npm version to 2.2.1
1 parent 116ec42 commit b6750f9

30 files changed

Lines changed: 2373 additions & 1515 deletions

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,9 @@ Icon components accept all props that you can pass to a normal SVG element, incl
7474
- **mirrored?**: `boolean` – Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.
7575
- **title?**: `string` – Accessibility label
7676
- **titleId?**: `string` – Accessibility label ID
77+
- **testID?**: `string` – testID for tests
78+
- **duotoneColor?**: `string` – Duotone fill color. Can be any CSS color string, including `hex`, `rgb`, `rgba`, `hsl`, `hsla`, named colors. Default value to black.
79+
- **duotoneOpacity?**: `number` – The opacity of the duotoneColor. Default value to 0.2.
7780

7881
### Context
7982

‎example/.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,9 @@ yarn-error.*
3333

3434
# typescript
3535
*.tsbuildinfo
36+
37+
# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
38+
# The following patterns were generated by expo-cli
39+
40+
expo-env.d.ts
41+
# @end expo-cli

‎example/app.json‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,33 @@
44
"slug": "phosphor-react-native-example",
55
"version": "1.0.0",
66
"orientation": "portrait",
7-
"icon": "./assets/icon.png",
7+
"icon": "./assets/images/icon.png",
8+
"scheme": "phosphor-react-native-example",
89
"userInterfaceStyle": "light",
910
"splash": {
10-
"image": "./assets/splash.png",
11+
"image": "./assets/images/splash.png",
1112
"resizeMode": "contain",
1213
"backgroundColor": "#ffffff"
1314
},
14-
"assetBundlePatterns": [
15-
"**/*"
16-
],
1715
"ios": {
1816
"supportsTablet": true
1917
},
2018
"android": {
2119
"adaptiveIcon": {
22-
"foregroundImage": "./assets/adaptive-icon.png",
20+
"foregroundImage": "./assets/images/adaptive-icon.png",
2321
"backgroundColor": "#ffffff"
2422
}
2523
},
2624
"web": {
27-
"favicon": "./assets/favicon.png"
25+
"bundler": "metro",
26+
"output": "static",
27+
"favicon": "./assets/images/favicon.png"
28+
},
29+
"plugins": [
30+
"expo-router"
31+
],
32+
"experiments": {
33+
"typedRoutes": true
2834
}
2935
}
3036
}

‎example/app/(tabs)/_layout.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Tabs } from 'expo-router';
2+
import React from 'react';
3+
4+
import List from '@/components/icons/icons/List';
5+
import TestTube from '@/components/icons/icons/TestTube';
6+
import { Colors } from '@/constants/Colors';
7+
import { useColorScheme } from '@/hooks/useColorScheme';
8+
9+
export default function TabLayout() {
10+
const colorScheme = useColorScheme();
11+
12+
return (
13+
<Tabs
14+
screenOptions={{
15+
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
16+
headerShown: false,
17+
}}
18+
>
19+
<Tabs.Screen
20+
name="index"
21+
options={{
22+
title: 'All icons',
23+
tabBarIcon: ({ color, focused }) => (
24+
<List weight={focused ? 'fill' : 'light'} color={color} />
25+
),
26+
}}
27+
/>
28+
<Tabs.Screen
29+
name="test-lab"
30+
options={{
31+
title: 'Test Lab',
32+
tabBarIcon: ({ color, focused }) => (
33+
<TestTube weight={focused ? 'fill' : 'light'} color={color} />
34+
),
35+
}}
36+
/>
37+
</Tabs>
38+
);
39+
}

‎example/app/(tabs)/index.tsx‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
/* eslint-disable react-native/no-inline-styles */
2+
/* eslint-disable @typescript-eslint/no-explicit-any */
3+
4+
import { useCallback, useState, useMemo } from 'react';
5+
import {
6+
StyleSheet,
7+
View,
8+
Text,
9+
FlatList,
10+
StatusBar,
11+
Image,
12+
TouchableOpacity,
13+
} from 'react-native';
14+
import { SafeAreaView } from 'react-native-safe-area-context';
15+
import * as IconPack from '@/components/icons';
16+
import PhosphorLogo from '@/assets/images/phosphor-mark-tight-yellow.png';
17+
18+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
19+
const { IconContext, ...Icons } = IconPack;
20+
21+
const weights = ['thin', 'light', 'regular', 'bold', 'fill', 'duotone'];
22+
23+
export default function HomeScreen() {
24+
const [weightIdx, setWeightIdx] = useState(2);
25+
const [iconColor, setIconColor] = useState(undefined);
26+
const [mirrorActive, setMirrorActive] = useState(false);
27+
28+
const weight: IconPack.IconWeight = useMemo(
29+
() => weights[weightIdx] as any,
30+
[weightIdx]
31+
);
32+
33+
const handleChangeWeight = useCallback(() => {
34+
setWeightIdx((weightIdx + 1) % weights.length);
35+
}, [weightIdx]);
36+
37+
const handleChangeIconColor = useCallback(() => {
38+
setIconColor(`#${Math.floor(Math.random() * 16777215).toString(16)}`);
39+
}, []);
40+
41+
const handleToggleMirror = useCallback(() => {
42+
setMirrorActive(!mirrorActive);
43+
}, [mirrorActive]);
44+
45+
return (
46+
<View style={styles.rootView}>
47+
<StatusBar barStyle="light-content" />
48+
49+
<SafeAreaView style={styles.headerContainer}>
50+
<View style={styles.header}>
51+
<Image source={PhosphorLogo} style={styles.logoImage} />
52+
<View
53+
style={{
54+
flex: 1,
55+
alignItems: 'flex-start',
56+
justifyContent: 'center',
57+
paddingStart: 10,
58+
}}
59+
>
60+
<Text style={styles.headerText}>Phosphor React Native</Text>
61+
<Text
62+
style={{
63+
color: '#fff',
64+
opacity: 0.8,
65+
textTransform: 'capitalize',
66+
}}
67+
>
68+
{weight}
69+
</Text>
70+
</View>
71+
<TouchableOpacity
72+
style={styles.weightSelect}
73+
onPress={handleChangeIconColor}
74+
>
75+
<IconPack.Palette color="#FFF" weight={weight} />
76+
</TouchableOpacity>
77+
<TouchableOpacity
78+
style={styles.weightSelect}
79+
onPress={handleChangeWeight}
80+
>
81+
<IconPack.PencilLine color="#FFF" weight={weight} />
82+
</TouchableOpacity>
83+
<TouchableOpacity
84+
style={styles.weightSelect}
85+
onPress={handleToggleMirror}
86+
>
87+
<IconPack.Swap color="#FFF" weight={weight} />
88+
</TouchableOpacity>
89+
</View>
90+
</SafeAreaView>
91+
<FlatList
92+
style={styles.scrollView}
93+
contentContainerStyle={styles.main}
94+
data={Object.entries(Icons).filter(([, Icon]) => !!Icon) as any[]}
95+
keyExtractor={(item) => item[0]}
96+
numColumns={3}
97+
renderItem={({ item: [name, Icon] }) => (
98+
<View style={styles.iconItem}>
99+
<Icon
100+
size={48}
101+
weight={weight}
102+
mirrored={mirrorActive}
103+
color={iconColor}
104+
/>
105+
<Text style={styles.iconName}>{name}</Text>
106+
</View>
107+
)}
108+
/>
109+
</View>
110+
);
111+
}
112+
113+
const styles = StyleSheet.create({
114+
rootView: {
115+
flex: 1,
116+
backgroundColor: '#FFF',
117+
},
118+
headerContainer: {
119+
backgroundColor: '#e76f51',
120+
},
121+
header: {
122+
backgroundColor: '#e76f51',
123+
alignItems: 'center',
124+
justifyContent: 'center',
125+
flexDirection: 'row',
126+
paddingBottom: 16,
127+
paddingHorizontal: 16,
128+
},
129+
logoImage: {
130+
width: 40,
131+
height: 40,
132+
borderRadius: 20,
133+
},
134+
headerText: {
135+
color: '#FFF',
136+
fontSize: 18,
137+
fontWeight: 'bold',
138+
flex: 1,
139+
textAlign: 'center',
140+
},
141+
weightSelect: {
142+
width: 35,
143+
},
144+
scrollView: {
145+
flex: 1,
146+
},
147+
main: {
148+
backgroundColor: 'white',
149+
paddingHorizontal: 8,
150+
paddingBottom: 16,
151+
},
152+
iconItem: {
153+
width: '33%',
154+
height: 100,
155+
alignItems: 'center',
156+
justifyContent: 'center',
157+
padding: 8,
158+
},
159+
iconName: {
160+
textAlign: 'center',
161+
opacity: 0.8,
162+
marginTop: 4,
163+
},
164+
});

0 commit comments

Comments
 (0)