Skip to content

Commit

Permalink
fix: fixes #41, add duotone color to override black
Browse files Browse the repository at this point in the history
  • Loading branch information
mrkpatchaa committed Aug 17, 2024
1 parent f1ab54c commit 6d509eb
Show file tree
Hide file tree
Showing 13 changed files with 1,367 additions and 1,602 deletions.
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,8 @@ Icon components accept all props that you can pass to a normal SVG element, incl
- **mirrored?**: `boolean` – Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.
- **title?**: `string` – Accessibility label
- **titleId?**: `string` – Accessibility label ID
- **duotoneColor?**: `string` – Duotone fill color. Can be any CSS color string, including `hex`, `rgb`, `rgba`, `hsl`, `hsla`, named colors. Default value to black.
- **duotoneOpacity?**: `number` – The opacity of the duotoneColor. Default value to 0.2.

### Context

Expand Down
13 changes: 5 additions & 8 deletions example/app/(tabs)/_layout.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { Tabs } from 'expo-router';
import React from 'react';

import { TabBarIcon } from '@/components/navigation/TabBarIcon';
import List from 'phosphor-react-native/src/icons/List';
import List from '@/components/icons/icons/List';
import TestTube from '@/components/icons/icons/TestTube';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

Expand All @@ -26,14 +26,11 @@ export default function TabLayout() {
}}
/>
<Tabs.Screen
name="duotone"
name="test-lab"
options={{
title: 'Duotone',
title: 'Test Lab',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon
name={focused ? 'code-slash' : 'code-slash-outline'}
color={color}
/>
<TestTube weight={focused ? 'fill' : 'light'} color={color} />
),
}}
/>
Expand Down
10 changes: 0 additions & 10 deletions example/app/(tabs)/duotone.tsx

This file was deleted.

21 changes: 10 additions & 11 deletions example/app/(tabs)/index.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable @typescript-eslint/no-explicit-any */

import * as React from 'react';

import { useCallback, useState, useMemo } from 'react';
import {
StyleSheet,
View,
Expand All @@ -13,33 +12,33 @@ import {
Image,
TouchableOpacity,
} from 'react-native';
import * as IconPack from 'phosphor-react-native';
import * as IconPack from '@/components/icons';
import PhosphorLogo from '@/assets/images/phosphor-mark-tight-yellow.png';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { IconContext, ...Icons } = IconPack;

const weights = ['thin', 'light', 'regular', 'bold', 'fill', 'duotone'];

export default function App() {
const [weightIdx, setWeightIdx] = React.useState(2);
const [iconColor, setIconColor] = React.useState(undefined);
const [mirrorActive, setMirrorActive] = React.useState(false);
export default function HomeScreen() {
const [weightIdx, setWeightIdx] = useState(2);
const [iconColor, setIconColor] = useState(undefined);
const [mirrorActive, setMirrorActive] = useState(false);

const weight: IconPack.IconWeight = React.useMemo(
const weight: IconPack.IconWeight = useMemo(
() => weights[weightIdx] as any,
[weightIdx]
);

const handleChangeWeight = React.useCallback(() => {
const handleChangeWeight = useCallback(() => {
setWeightIdx((weightIdx + 1) % weights.length);
}, [weightIdx]);

const handleChangeIconColor = React.useCallback(() => {
const handleChangeIconColor = useCallback(() => {
setIconColor(`#${Math.floor(Math.random() * 16777215).toString(16)}`);
}, []);

const handleToggleMirror = React.useCallback(() => {
const handleToggleMirror = useCallback(() => {
setMirrorActive(!mirrorActive);
}, [mirrorActive]);

Expand Down
131 changes: 131 additions & 0 deletions example/app/(tabs)/test-lab.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
/* eslint-disable react-native/no-inline-styles */

import { useCallback, useState } from 'react';

import {
StyleSheet,
View,
Text,
SafeAreaView,
StatusBar,
Image,
FlatList,
TouchableOpacity,
} from 'react-native';
import PhosphorLogo from '@/assets/images/phosphor-mark-tight-yellow.png';
import * as IconPack from '@/components/icons';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { IconContext, ...Icons } = IconPack;

export default function TestLabScreen() {
const [toggleActive, setToggleActive] = useState(false);

const handleToggle = useCallback(() => {
setToggleActive(!toggleActive);
}, [toggleActive]);
return (
<View style={styles.rootView}>
<StatusBar barStyle="light-content" />
<SafeAreaView style={styles.headerContainer}>
<View style={styles.header}>
<Image source={PhosphorLogo} style={styles.logoImage} />
<View
style={{
flex: 1,
alignItems: 'flex-start',
justifyContent: 'center',
paddingStart: 10,
}}
>
<Text style={styles.headerText}>Phosphor React Native</Text>
<Text
style={{
color: '#fff',
opacity: 0.8,
textTransform: 'capitalize',
}}
>
Duotone test lab
</Text>
</View>
<TouchableOpacity style={styles.weightSelect} onPress={handleToggle}>
<IconPack.Swap color="#FFF" weight={'regular'} />
</TouchableOpacity>
</View>
</SafeAreaView>
<FlatList
style={styles.scrollView}
contentContainerStyle={styles.main}
data={Object.entries(Icons).filter(([, Icon]) => !!Icon) as any[]}
keyExtractor={(item) => item[0]}
numColumns={3}
renderItem={({ item: [name, Icon] }) => (
<View style={styles.iconItem}>
<Icon
size={48}
weight={'duotone'}
color={`#${Math.floor(Math.random() * 16777215).toString(16)}`}
duotoneColor={`#${Math.floor(Math.random() * 16777215).toString(16)}`}
duotoneOpacity={Math.random()}
/>
<Text style={styles.iconName}>{name}</Text>
</View>
)}
/>
</View>
);
}

const styles = StyleSheet.create({
rootView: {
flex: 1,
backgroundColor: '#FFF',
},
headerContainer: {
backgroundColor: '#e76f51',
},
header: {
backgroundColor: '#e76f51',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
paddingBottom: 16,
paddingHorizontal: 16,
},
logoImage: {
width: 40,
height: 40,
borderRadius: 20,
},
headerText: {
color: '#FFF',
fontSize: 18,
fontWeight: 'bold',
flex: 1,
textAlign: 'center',
},
weightSelect: {
width: 35,
},
scrollView: {
flex: 1,
},
main: {
backgroundColor: 'white',
paddingHorizontal: 8,
paddingBottom: 16,
},
iconItem: {
width: '33%',
height: 100,
alignItems: 'center',
justifyContent: 'center',
padding: 8,
},
iconName: {
textAlign: 'center',
opacity: 0.8,
marginTop: 4,
},
});
1 change: 1 addition & 0 deletions example/components/icons
12 changes: 0 additions & 12 deletions example/components/navigation/TabBarIcon.tsx

This file was deleted.

5 changes: 4 additions & 1 deletion example/eslint.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ export default [
pluginJs.configs.recommended,
...tseslint.configs.recommended,
pluginReact.configs.flat.recommended,
{ ignores: ['node_modules/'], rules: { 'react/react-in-jsx-scope': 'off' } },
{
ignores: ['node_modules/', 'components/icons/'],
rules: { 'react/react-in-jsx-scope': 'off' },
},
eslintPluginPrettierRecommended,
];
8 changes: 3 additions & 5 deletions example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
"lint": "eslint . --fix"
},
"dependencies": {
"@expo/vector-icons": "^14.0.2",
"@react-navigation/native": "^6.0.2",
"expo": "~51.0.28",
"expo-constants": "~16.0.2",
Expand All @@ -19,11 +18,10 @@
"expo-splash-screen": "~0.27.5",
"expo-status-bar": "~1.12.1",
"expo-system-ui": "~3.0.7",
"react-native-gesture-handler": "~2.16.1",
"react-native-reanimated": "~3.10.1",
"phosphor-react-native": "file:..",
"react": "18.2.0",
"react-native": "0.74.5",
"react-native-gesture-handler": "~2.16.1",
"react-native-reanimated": "~3.10.1",
"react-native-safe-area-context": "4.10.5",
"react-native-screens": "3.31.1",
"react-native-svg": "15.2.0"
Expand All @@ -39,4 +37,4 @@
"typescript-eslint": "^8.0.1"
},
"private": true
}
}
Loading

0 comments on commit 6d509eb

Please sign in to comment.