Skip to content

Commit b235b9d

Browse files
KaganYrkKaganYrk
authored
Merge pull request #262 from TRA-Tech/chore/update-example-icons
Chore/update example icons
2 parents 11ee632 + 4ac329a commit b235b9d

10 files changed

Lines changed: 58 additions & 58 deletions

File tree

‎example/src/screens/AccordionList.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ const Data = [
88
{ name: 'Sometimes you want to pack up and leave behind', points: '$3.45' },
99
{ name: 'All of them and their smiles', points: '$3.45' }];
1010

11-
const AccordionListLeftIcon = () => (<Icon type="material-community" name="flower-tulip" size={24} color="white" />);
12-
const AccordionListRightIcon = () => (<Icon type="material-community" name="flower-tulip" size={24} color="white" style={{ marginRight: 10 }} />);
11+
const AccordionListLeftIcon = () => (<Icon name="star" size={24} color="white" />);
12+
const AccordionListRightIcon = () => (<Icon name="star" size={24} color="white" style={{ marginRight: 10 }} />);
1313

1414
const AccordionListScreen = () => (
1515
<Layout>

‎example/src/screens/Avatar.jsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,30 +19,29 @@ const AvatarScreen = () => (
1919
<Avatar variant="rounded" />
2020

2121
<Text style={styles.headerText}>With Icon</Text>
22-
<Avatar avatarIcon={<Icon type="material-community" name="penguin" size={30} />} />
22+
<Avatar avatarIcon={<Icon name="user" size={30} />} />
2323

2424
<Text style={styles.headerText}>With Label</Text>
2525
<Avatar
2626
variant="rounded"
2727
label="John Doe"
28-
avatarIcon={<Icon type="material-community" name="penguin" size={30} />}
28+
avatarIcon={<Icon name="user" size={30} />}
2929
/>
3030

3131
<Text style={styles.headerText}>Sizes S-M</Text>
3232
<View style={{ flexDirection: 'row', columnGap: 10 }}>
3333
<Avatar
3434
size="small"
3535
label="John Doe"
36-
avatarIcon={<Icon type="material-community" name="penguin" size={30} />}
36+
avatarIcon={<Icon name="user" size={30} />}
3737
/>
3838
<Avatar
3939
variant="rounded"
4040
size="medium"
4141
label="John Doe"
4242
avatarIcon={(
4343
<Icon
44-
type="material-community"
45-
name="penguin"
44+
name="user"
4645
size={30}
4746
/>
4847
)}
@@ -53,7 +52,7 @@ const AvatarScreen = () => (
5352
source={{ uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_75gFTnTdEo-gYx6kpjQ7bPkcUH_L4CUXMWRn1jPhBzjgXQp-Z_QGNZ7togU2K03bYwc&usqp=CAU' }}
5453
variant="rounded"
5554
label="John Doe"
56-
avatarIcon={<Icon type="material-community" name="penguin" size={30} />}
55+
avatarIcon={<Icon name="user" size={30} />}
5756
/>
5857

5958
<Text style={styles.headerText}>With Badge and Image</Text>
@@ -62,7 +61,7 @@ const AvatarScreen = () => (
6261
source={{ uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_75gFTnTdEo-gYx6kpjQ7bPkcUH_L4CUXMWRn1jPhBzjgXQp-Z_QGNZ7togU2K03bYwc&usqp=CAU' }}
6362
borderStyle="circular"
6463
label="John Doe"
65-
avatarIcon={<Icon type="material-community" name="penguin" size={30} />}
64+
avatarIcon={<Icon name="user" size={30} />}
6665
/>
6766
</Badge>
6867
</View>

‎example/src/screens/AvatarGroup.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Layout from '../components/Layout';
44
import AppDivider from '../components/Divider';
55

66
const avatars = [{ label: 'John Doe' }, { label: 'Michael' },
7-
{ avatarIcon: <Icon type="material-community" name="penguin" size={15} />, variant: 'rounded' },
7+
{ avatarIcon: <Icon name="user" size={15} />, variant: 'rounded' },
88
{ label: 'ADS' }, { label: 'John Dogus' },
99
{ source: { uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_75gFTnTdEo-gYx6kpjQ7bPkcUH_L4CUXMWRn1jPhBzjgXQp-Z_QGNZ7togU2K03bYwc&usqp=CAU' },
1010
variant: 'rounded' }];

‎example/src/screens/Badge.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const BadgeScreen = () => (
88
<Badge />
99

1010
<Text style={[styles.headerText, { marginTop: 20 }]}>Badge with Icon</Text>
11-
<Badge icon={<Icon type="ant-design" name="minus" />}>
11+
<Badge icon={<Icon name="minus" />}>
1212
<Avatar />
1313
</Badge>
1414

‎example/src/screens/Button.jsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,20 @@ const ButtonScreen = () => (
1414

1515
<Text style={styles.headerText}>Left-Right Elements</Text>
1616
<View style={{ rowGap: 5 }}>
17-
<Button label="Press Me!" left={event => <Icon type="material-community" name={event ? 'penguin' : 'dog'} />} />
18-
<Button label="Press Me!" right={() => <Icon type="material-community" name="penguin" />} />
17+
<Button label="Press Me!" left={event => <Icon name={event ? 'user' : 'user-circle'} />} />
18+
<Button label="Press Me!" right={() => <Icon name="user" />} />
1919
<Button
2020
label="Press Me!"
21-
right={() => <Icon type="material-community" name="penguin" />}
22-
left={() => <Icon type="material-community" name="penguin" />}
21+
right={() => <Icon name="user" />}
22+
left={() => <Icon name="user" />}
2323
/>
2424
</View>
2525

2626
<Text style={styles.headerText}>Size S-M-L</Text>
2727
<View style={{ rowGap: 5 }}>
28-
<Button label="Press Me!" size="small" left={() => <Icon type="material-community" name="penguin" />} />
29-
<Button label="Press Me!" size="medium" left={() => <Icon type="material-community" name="penguin" />} />
30-
<Button label="Press Me!" size="large" left={() => <Icon type="material-community" name="penguin" />} />
28+
<Button label="Press Me!" size="small" left={() => <Icon name="user" />} />
29+
<Button label="Press Me!" size="medium" left={() => <Icon name="user" />} />
30+
<Button label="Press Me!" size="large" left={() => <Icon name="user" />} />
3131
</View>
3232

3333
<Text style={styles.headerText}>Custom Theme</Text>
@@ -39,7 +39,7 @@ const ButtonScreen = () => (
3939
}}
4040
label="Press Me!"
4141
size="small"
42-
left={() => <Icon type="material-community" name="penguin" />}
42+
left={() => <Icon name="user" />}
4343
/>
4444

4545
<Text style={styles.headerText}>Custom Disabled Theme</Text>
@@ -48,7 +48,7 @@ const ButtonScreen = () => (
4848
disabled
4949
label="Press Me!"
5050
size="medium"
51-
left={() => <Icon type="material-community" name="penguin" />}
51+
left={() => <Icon name="user" />}
5252
/>
5353

5454
</View>

‎example/src/screens/Chip.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const ChipScreen = () => (
1616
label="Press Me!"
1717
size="large"
1818
style={{paddingHorizontal: 10}}
19-
left={event => <Icon name={event ? 'cat' : 'dog'} type="font-awesome-5" size={20} />}
19+
left={event => <Icon name={event ? 'user' : 'user-circle'} size={20} />}
2020
/>
2121
</View>
2222

‎example/src/screens/Dropdown.jsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ const DropdownScreen = () => (
7373
displayedButtonValue={x => x.name}
7474
displayedRowValue={x => `${x.name} ${x.activeYears}`}
7575
onSelect={x => console.log(x)}
76-
right={<Icon type="font-awesome-5" color="black" name="guitar" size={18} />}
76+
right={<Icon color="black" name="note" size={18} />}
7777
/>
7878
</View>
7979
<View style={{ zIndex: 7 }}>
@@ -82,7 +82,7 @@ const DropdownScreen = () => (
8282
displayedButtonValue={x => x.name}
8383
displayedRowValue={x => `${x.name} ${x.activeYears}`}
8484
onSelect={x => console.log(x)}
85-
right={<Icon type="ant-design" color="black" name="down" size={10} />}
85+
right={<Icon color="black" name="arrow-down" size={10} />}
8686
/>
8787
</View>
8888
<View style={{ zIndex: 6 }}>
@@ -91,8 +91,8 @@ const DropdownScreen = () => (
9191
displayedButtonValue={x => x.name}
9292
displayedRowValue={x => `${x.name} ${x.activeYears}`}
9393
onSelect={x => console.log(x)}
94-
left={<Icon type="font-awesome-5" color="black" name="guitar" size={18} />}
95-
right={<Icon type="ant-design" color="black" name="down" size={10} />}
94+
left={<Icon color="black" name="note" size={18} />}
95+
right={<Icon color="black" name="arrow-down" size={10} />}
9696
/>
9797
</View>
9898
</View>
@@ -150,7 +150,7 @@ const DropdownScreen = () => (
150150
displayedButtonValue={x => x.name}
151151
displayedRowValue={x => `${x.name} ${x.activeYears}`}
152152
buttonTitle="Select a band"
153-
left={<Icon type="font-awesome-5" color="blue" name="guitar" size={18} />}
153+
left={<Icon color="blue" name="note" size={18} />}
154154
/>
155155

156156
<Text style={styles.headerText}>Multiple Select</Text>
@@ -173,14 +173,14 @@ const DropdownScreen = () => (
173173
multiple
174174
selectall
175175
onComplete={x => console.log(x)}
176-
left={<Icon type="font-awesome-5" color="black" name="guitar" size={18} />}
176+
left={<Icon color="black" name="note" size={18} />}
177177
/>
178178
<Dropdown
179179
data={data}
180180
displayedButtonValue={x => x.name}
181181
displayedRowValue={x => `${x.name} ${x.activeYears}`}
182182
onSelect={x => console.log(x)}
183-
left={<Icon type="font-awesome-5" color="black" name="guitar" size={18} />}
183+
left={<Icon color="black" name="note" size={18} />}
184184
/>
185185
</View>
186186
</View>

‎example/src/screens/Menu.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,24 @@ import Layout from '../components/Layout';
44

55
const data = [
66
{
7-
left: <Icon type="material" name="share" color="white" />,
7+
left: <Icon name="paper-plane-tilt" color="white" />,
88
label: 'Share',
99
onPress: () => console.log('Share'),
1010
},
1111
{
12-
left: <Icon type="material" name="delete" color="white" />,
13-
right: <Icon type="material" name="delete" color="white" />,
12+
left: <Icon name="trash" color="white" />,
13+
right: <Icon name="trash" color="white" />,
1414
label: 'Delete',
1515
onPress: () => console.log('Delete'),
1616
},
1717
];
1818

19-
const MenuIconButton = () => (<Icon type="material" size={20} name="more-vert" />);
19+
const MenuIconButton = () => (<Icon size={20} name="dots-three-vertical" />);
2020
const MenuScreen = () => (
2121
<Layout style={{ rowGap: 15 }}>
2222
<Text style={styles.headerText}>Default</Text>
2323
<Menu
24+
containerStyle={{ alignItems: 'flex-start' }}
2425
button={MenuIconButton}
2526
items={data}
2627
/>

‎example/src/screens/Swipe.jsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,26 @@ import Text from '../components/Text';
55

66
const SwipeScreen = () => (
77
<Layout>
8-
<Swipe
9-
rightActions={[
8+
<Swipe
9+
rightActions={[
1010
{ label: 'Share',
1111
style: { backgroundColor: '#E2D029' },
1212
onPress: ref => { ref.current?.close(); },
1313
labelStyle: { color: 'white' },
14-
icon: <Icon type="feather" name="share" size={15} color="white" /> },
14+
icon: <Icon name="export" size={15} color="white" /> },
1515
{ label: 'More',
1616
style: { backgroundColor: '#00CE5E' },
1717
labelStyle: { color: 'white' },
18-
icon: <Icon type="feather" name="more-vertical" size={15} color="white" /> },
18+
icon: <Icon name="dots-three-vertical" size={15} color="white" /> },
1919
{ label: 'Delete',
2020
style: { backgroundColor: '#FF0000' },
2121
labelStyle: { color: 'white' },
22-
icon: <Icon type="ant-design" name="delete" size={15} color="white" /> },
22+
icon: <Icon name="trash" size={15} color="white" /> },
2323
]}
2424
leftAction={{ label: 'Delete',
2525
style: { backgroundColor: 'red' },
2626
labelStyle: { color: 'white' },
27-
icon: <Icon type="ant-design" name="delete" size={15} color="white" /> }}
27+
icon: <Icon name="trash" size={15} color="white" /> }}
2828
variant="radius"
2929
>
3030
<View
@@ -35,11 +35,11 @@ const SwipeScreen = () => (
3535
borderWidth: 1,
3636
borderColor: '#195CEF' }}
3737
>
38-
<Icon name="left" type="ant-design" size={20} color="#195CEF" />
38+
<Icon name="arrow-left" size={20} color="#195CEF" />
3939
<Text style={{ color: '#195CEF' }}>
4040
Swipe Me
4141
</Text>
42-
<Icon name="right" type="ant-design" size={20} color="#195CEF" />
42+
<Icon name="arrow-right" size={20} color="#195CEF" />
4343
</View>
4444
</Swipe>
4545
</Layout>

‎example/src/screens/TextInput.jsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,42 +18,42 @@ const TextInputScreen = () => {
1818
variant="outlined"
1919
size="small"
2020
label="Label"
21-
left={() => <Icon type="ant-design" color={theme.primary} name="plus" size={18} />}
21+
left={() => <Icon color={theme.primary} name="plus" size={18} />}
2222
/>
2323
<TextInput
2424
variant="outlined"
2525
size="medium"
2626
label="Label"
27-
left={() => <Icon type="ant-design" color={theme.primary} name="plus" size={18} />}
27+
left={() => <Icon color={theme.primary} name="plus" size={18} />}
2828
/>
2929
<TextInput
3030
variant="outlined"
3131
size="large"
3232
label="Label"
33-
left={() => <Icon type="ant-design" color={theme.primary} name="plus" size={18} />}
33+
left={() => <Icon color={theme.primary} name="plus" size={18} />}
3434
/>
3535

3636
<Text style={styles.headerText}>Left - Right Elements</Text>
3737
<View style={{ rowGap: 10 }}>
3838
<TextInput
3939
variant="outlined"
4040
label="Label"
41-
left={() => <Icon type="ant-design" color={theme.primary} name="plus" size={18} />}
41+
left={() => <Icon color={theme.primary} name="plus" size={18} />}
4242
/>
4343
<TextInput
4444
variant="outlined"
4545
label="Label"
4646
right={() => (
4747
<TouchableOpacity>
48-
<Icon type="ant-design" color={theme.primary} name="eye" size={18} />
48+
<Icon color={theme.primary} name="eye" size={18} />
4949
</TouchableOpacity>
5050
)}
5151
/>
5252
<TextInput
5353
variant="outlined"
5454
label="Label"
55-
right={() => <Icon type="ant-design" color={theme.primary} name="plus" size={18} />}
56-
left={() => <Icon type="ant-design" color={theme.primary} name="eye" size={18} />}
55+
right={() => <Icon color={theme.primary} name="plus" size={18} />}
56+
left={() => <Icon color={theme.primary} name="eye" size={18} />}
5757
/>
5858
</View>
5959

@@ -79,42 +79,42 @@ const TextInputScreen = () => {
7979
variant="filled"
8080
size="small"
8181
label="Label"
82-
left={() => <Icon type="ant-design" color={theme.primary} name="plus" size={18} />}
82+
left={() => <Icon color={theme.primary} name="plus" size={18} />}
8383
/>
8484
<TextInput
8585
variant="filled"
8686
size="medium"
8787
label="Label"
88-
left={() => <Icon type="ant-design" color={theme.primary} name="plus" size={18} />}
88+
left={() => <Icon color={theme.primary} name="plus" size={18} />}
8989
/>
9090
<TextInput
9191
variant="filled"
9292
size="large"
9393
label="Label"
94-
left={() => <Icon type="ant-design" color={theme.primary} name="plus" size={18} />}
94+
left={() => <Icon color={theme.primary} name="plus" size={18} />}
9595
/>
9696

9797
<Text style={styles.headerText}>Left - Right Elements</Text>
9898
<View style={{ rowGap: 10 }}>
9999
<TextInput
100100
variant="filled"
101101
label="Label"
102-
left={() => <Icon type="ant-design" color={theme.primary} name="plus" size={18} />}
102+
left={() => <Icon color={theme.primary} name="plus" size={18} />}
103103
/>
104104
<TextInput
105105
variant="filled"
106106
label="Label"
107107
right={() => (
108108
<TouchableOpacity>
109-
<Icon type="ant-design" color={theme.primary} name="eye" size={18} />
109+
<Icon color={theme.primary} name="eye" size={18} />
110110
</TouchableOpacity>
111111
)}
112112
/>
113113
<TextInput
114114
variant="filled"
115115
label="Label"
116-
right={() => <Icon type="ant-design" color={theme.primary} name="plus" size={18} />}
117-
left={() => <Icon type="ant-design" color={theme.primary} name="eye" size={18} />}
116+
right={() => <Icon color={theme.primary} name="plus" size={18} />}
117+
left={() => <Icon color={theme.primary} name="eye" size={18} />}
118118
/>
119119
</View>
120120

@@ -141,8 +141,8 @@ const TextInputScreen = () => {
141141
size="medium"
142142
label="Label"
143143
containerStyle={{ marginBottom: 10 }}
144-
// eslint-disable-next-line react/no-unstable-nested-components
145-
left={event => <Icon type="ant-design" color={event ? 'grey' : '#195CEF'} name="plus" size={18} />}
144+
// eslint-disable-next-line react/no-unstable-nested-components
145+
left={event => <Icon color={event ? 'grey' : '#195CEF'} name="plus" size={18} />}
146146
/>
147147
<TextInput
148148
variant="outlined"
@@ -161,7 +161,7 @@ const TextInputScreen = () => {
161161
size="medium"
162162
label="Label"
163163
containerStyle={{ marginBottom: 10 }}
164-
left={() => <Icon type="ant-design" color="red" name="plus" size={18} />}
164+
left={() => <Icon color="red" name="plus" size={18} />}
165165
/>
166166
<TextInput
167167
variant="outlined"
@@ -180,7 +180,7 @@ const TextInputScreen = () => {
180180
size="medium"
181181
label="Label"
182182
containerStyle={{ marginTop: 10 }}
183-
left={() => <Icon type="ant-design" color={theme.primary} name="plus" size={18} />}
183+
left={() => <Icon color={theme.primary} name="plus" size={18} />}
184184
/>
185185
</View>
186186
</Layout>

0 commit comments

Comments
 (0)