Skip to content

Commit bb3d429

Browse files
nolimits4webnolimits4web
committed
Phenome Kitchen Sink: simplify icon props
1 parent ac4d097 commit bb3d429

20 files changed

Lines changed: 128 additions & 128 deletions

‎kitchen-sink/react/src/pages/badge.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,27 @@ export default () => (
66
<Navbar sliding backLink="Back" title="Badge">
77
<NavRight>
88
<Link iconOnly>
9-
<Icon ifIos="f7:person_fill" ifMd="material:person" className="icon Icons ios-only">
9+
<Icon ios="f7:person_fill" md="material:person" className="icon Icons ios-only">
1010
<Badge color="red">5</Badge>
1111
</Icon>
1212
</Link>
1313
</NavRight>
1414
</Navbar>
1515
<Toolbar tabbar labels>
1616
<Link tabLink="#tab-1" tabLinkActive>
17-
<Icon className="icon-fill" ifIos="f7:email_fill" ifMd="material:email">
17+
<Icon className="icon-fill" ios="f7:email_fill" md="material:email">
1818
<Badge color="green">5</Badge>
1919
</Icon>
2020
<span className="tabbar-label">Inbox</span>
2121
</Link>
2222
<Link tabLink="#tab-2">
23-
<Icon ifIos="f7:today" ifMd="material:today">
23+
<Icon ios="f7:today" md="material:today">
2424
<Badge color="red">7</Badge>
2525
</Icon>
2626
<span className="tabbar-label">Calendar</span>
2727
</Link>
2828
<Link tabLink="#tab-3">
29-
<Icon ifIos="f7:cloud" ifMd="material:file_upload">
29+
<Icon ios="f7:cloud" md="material:file_upload">
3030
<Badge color="red">1</Badge>
3131
</Icon>
3232
<span className="tabbar-label">Upload</span>

‎kitchen-sink/react/src/pages/chips.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,13 @@ export default class extends React.Component {
2121
<BlockTitle>Icon Chips</BlockTitle>
2222
<Block strong>
2323
<Chip text="Add Contact" mediaBgColor={this.$theme.md ? 'blue' : undefined}>
24-
<Icon slot="media" ifIos="f7:add_round" ifMd="material:add_circle"></Icon>
24+
<Icon slot="media" ios="f7:add_round" md="material:add_circle"></Icon>
2525
</Chip>
2626
<Chip text="London" mediaBgColor={this.$theme.md ? 'green' : undefined}>
27-
<Icon slot="media" ifIos="f7:compass" ifMd="material:location_on"></Icon>
27+
<Icon slot="media" ios="f7:compass" md="material:location_on"></Icon>
2828
</Chip>
2929
<Chip text="John Doe" mediaBgColor={this.$theme.md ? 'red' : undefined}>
30-
<Icon slot="media" ifIos="f7:person" ifMd="material:person"></Icon>
30+
<Icon slot="media" ios="f7:person" md="material:person"></Icon>
3131
</Chip>
3232
</Block>
3333
<BlockTitle>Contact Chips</BlockTitle>

‎kitchen-sink/react/src/pages/data-table.jsx‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ export default () => (
184184
<th className="numeric-cell">Fat (g)</th>
185185
<th className="numeric-cell">Carbs</th>
186186
<th className="numeric-cell">Protein (g)</th>
187-
<th className="tablet-only"><Icon ifIos="f7:chat_fill" ifMd="material:message"></Icon> Comments</th>
187+
<th className="tablet-only"><Icon ios="f7:chat_fill" md="material:message"></Icon> Comments</th>
188188
</tr>
189189
</thead>
190190
<tbody>
@@ -305,8 +305,8 @@ export default () => (
305305
<CardHeader>
306306
<div className="data-table-title">Nutrition</div>
307307
<div className="data-table-actions">
308-
<Link iconIfIos="f7:sort" iconIfMd="material:sort"></Link>
309-
<Link iconIfIos="f7:more_vertical_round" iconIfMd="material:more_vert"></Link>
308+
<Link iconIos="f7:sort" iconMd="material:sort"></Link>
309+
<Link iconIos="f7:more_vertical_round" iconMd="material:more_vert"></Link>
310310
</div>
311311
</CardHeader>
312312
<CardContent padding={false}>
@@ -321,7 +321,7 @@ export default () => (
321321
<th className="numeric-cell">Fat (g)</th>
322322
<th className="numeric-cell">Carbs</th>
323323
<th className="numeric-cell">Protein (g)</th>
324-
<th className="tablet-only"><Icon ifIos="f7:chat_fill" ifMd="material:message"></Icon> Comments</th>
324+
<th className="tablet-only"><Icon ios="f7:chat_fill" md="material:message"></Icon> Comments</th>
325325
</tr>
326326
</thead>
327327
<tbody>
@@ -379,8 +379,8 @@ export default () => (
379379
<CardHeader>
380380
<div className="data-table-title">Nutrition</div>
381381
<div className="data-table-actions">
382-
<Link iconIfIos="f7:sort" iconIfMd="material:sort"></Link>
383-
<Link iconIfIos="f7:more_vertical_round" iconIfMd="material:more_vert"></Link>
382+
<Link iconIos="f7:sort" iconMd="material:sort"></Link>
383+
<Link iconIos="f7:more_vertical_round" iconMd="material:more_vert"></Link>
384384
</div>
385385
</CardHeader>
386386
<CardContent padding={false}>
@@ -395,7 +395,7 @@ export default () => (
395395
<th className="numeric-cell sortable-cell">Fat (g)</th>
396396
<th className="numeric-cell sortable-cell">Carbs</th>
397397
<th className="numeric-cell sortable-cell">Protein (g)</th>
398-
<th className="tablet-only"><Icon ifIos="f7:chat_fill" ifMd="material:message"></Icon> Comments</th>
398+
<th className="tablet-only"><Icon ios="f7:chat_fill" md="material:message"></Icon> Comments</th>
399399
</tr>
400400
</thead>
401401
<tbody>
@@ -453,15 +453,15 @@ export default () => (
453453
<div className="data-table-header">
454454
<div className="data-table-title">Nutrition</div>
455455
<div className="data-table-actions">
456-
<Link iconIfIos="f7:sort" iconIfMd="material:sort"></Link>
457-
<Link iconIfIos="f7:more_vertical_round" iconIfMd="material:more_vert"></Link>
456+
<Link iconIos="f7:sort" iconMd="material:sort"></Link>
457+
<Link iconIos="f7:more_vertical_round" iconMd="material:more_vert"></Link>
458458
</div>
459459
</div>
460460
<div className="data-table-header-selected">
461461
<div className="data-table-title-selected"><span className="data-table-selected-count"></span> items selected</div>
462462
<div className="data-table-actions">
463-
<Link iconIfIos="f7:trash" iconIfMd="material:delete"></Link>
464-
<Link iconIfIos="f7:more_vertical_round" iconIfMd="material:more_vert"></Link>
463+
<Link iconIos="f7:trash" iconMd="material:delete"></Link>
464+
<Link iconIos="f7:more_vertical_round" iconMd="material:more_vert"></Link>
465465
</div>
466466
</div>
467467
</CardHeader>
@@ -477,7 +477,7 @@ export default () => (
477477
<th className="numeric-cell">Fat (g)</th>
478478
<th className="numeric-cell">Carbs</th>
479479
<th className="numeric-cell">Protein (g)</th>
480-
<th className="tablet-only"><Icon ifIos="f7:chat_fill" ifMd="material:message"></Icon> Comments</th>
480+
<th className="tablet-only"><Icon ios="f7:chat_fill" md="material:message"></Icon> Comments</th>
481481
</tr>
482482
</thead>
483483
<tbody>
@@ -535,8 +535,8 @@ export default () => (
535535
<CardHeader>
536536
<div className="data-table-links"><a className="link">Add</a><a className="link">Remove</a></div>
537537
<div className="data-table-actions">
538-
<Link iconIfIos="f7:sort" iconIfMd="material:sort"></Link>
539-
<Link iconIfIos="f7:more_vertical_round" iconIfMd="material:more_vert"></Link>
538+
<Link iconIos="f7:sort" iconMd="material:sort"></Link>
539+
<Link iconIos="f7:more_vertical_round" iconMd="material:more_vert"></Link>
540540
</div>
541541
</CardHeader>
542542
<CardContent padding={false}>
@@ -551,7 +551,7 @@ export default () => (
551551
<th className="numeric-cell">Fat (g)</th>
552552
<th className="numeric-cell">Carbs</th>
553553
<th className="numeric-cell">Protein (g)</th>
554-
<th className="tablet-only"><Icon ifIos="f7:chat_fill" ifMd="material:message"></Icon> Comments</th>
554+
<th className="tablet-only"><Icon ios="f7:chat_fill" md="material:message"></Icon> Comments</th>
555555
<th></th>
556556
</tr>
557557
</thead>
@@ -567,8 +567,8 @@ export default () => (
567567
<td className="numeric-cell">4.0</td>
568568
<td className="tablet-only">I like frozen yogurt</td>
569569
<td className="actions-cell">
570-
<Link iconIfIos="f7:compose" iconIfMd="material:edit"></Link>
571-
<Link iconIfIos="f7:trash" iconIfMd="material:delete"></Link>
570+
<Link iconIos="f7:compose" iconMd="material:edit"></Link>
571+
<Link iconIos="f7:trash" iconMd="material:delete"></Link>
572572
</td>
573573
</tr>
574574
<tr>
@@ -582,8 +582,8 @@ export default () => (
582582
<td className="numeric-cell">4.4</td>
583583
<td className="tablet-only">But like ice cream more</td>
584584
<td className="actions-cell">
585-
<Link iconIfIos="f7:compose" iconIfMd="material:edit"></Link>
586-
<Link iconIfIos="f7:trash" iconIfMd="material:delete"></Link>
585+
<Link iconIos="f7:compose" iconMd="material:edit"></Link>
586+
<Link iconIos="f7:trash" iconMd="material:delete"></Link>
587587
</td>
588588
</tr>
589589
<tr>
@@ -597,8 +597,8 @@ export default () => (
597597
<td className="numeric-cell">6.0</td>
598598
<td className="tablet-only">Super tasty</td>
599599
<td className="actions-cell">
600-
<Link iconIfIos="f7:compose" iconIfMd="material:edit"></Link>
601-
<Link iconIfIos="f7:trash" iconIfMd="material:delete"></Link>
600+
<Link iconIos="f7:compose" iconMd="material:edit"></Link>
601+
<Link iconIos="f7:trash" iconMd="material:delete"></Link>
602602
</td>
603603
</tr>
604604
<tr>
@@ -612,8 +612,8 @@ export default () => (
612612
<td className="numeric-cell">4.3</td>
613613
<td className="tablet-only">Don't like it</td>
614614
<td className="actions-cell">
615-
<Link iconIfIos="f7:compose" iconIfMd="material:edit"></Link>
616-
<Link iconIfIos="f7:trash" iconIfMd="material:delete"></Link>
615+
<Link iconIos="f7:compose" iconMd="material:edit"></Link>
616+
<Link iconIos="f7:trash" iconMd="material:delete"></Link>
617617
</td>
618618
</tr>
619619
</tbody>
@@ -629,8 +629,8 @@ export default () => (
629629
<CardHeader>
630630
<div className="data-table-title">Nutrition</div>
631631
<div className="data-table-actions">
632-
<Link iconIfIos="f7:sort" iconIfMd="material:sort"></Link>
633-
<Link iconIfIos="f7:more_vertical_round" iconIfMd="material:more_vert"></Link>
632+
<Link iconIos="f7:sort" iconMd="material:sort"></Link>
633+
<Link iconIos="f7:more_vertical_round" iconMd="material:more_vert"></Link>
634634
</div>
635635
</CardHeader>
636636
<CardContent padding={false}>

‎kitchen-sink/react/src/pages/fab-morph.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,18 @@ export default () => (
55
<Page>
66
<Navbar title="Floating Action Button Morph" backLink="Back"></Navbar>
77
<Toolbar tabbar labels bottomMd className="fab-morph-target">
8-
<Link tabLink tabLinkActive iconIfIos="f7:email_fill" iconIfMd="material:email" text="Inbox"/>
9-
<Link tabLink iconIfIos="f7:today" iconIfMd="material:today" text="Calendar"/>
10-
<Link tabLink iconIfIos="f7:cloud" iconIfMd="material:file_upload" text="Upload"/>
8+
<Link tabLink tabLinkActive iconIos="f7:email_fill" iconMd="material:email" text="Inbox"/>
9+
<Link tabLink iconIos="f7:today" iconMd="material:today" text="Calendar"/>
10+
<Link tabLink iconIos="f7:cloud" iconMd="material:file_upload" text="Upload"/>
1111
</Toolbar>
1212
<Fab position="right-bottom" morphTo=".toolbar.fab-morph-target">
13-
<Icon ifIos="f7:add" ifMd="material:add"></Icon>
13+
<Icon ios="f7:add" md="material:add"></Icon>
1414
</Fab>
1515
<Fab position="left-bottom" morphTo=".demo-fab-sheet.fab-morph-target">
16-
<Icon ifIos="f7:add" ifMd="material:add"></Icon>
16+
<Icon ios="f7:add" md="material:add"></Icon>
1717
</Fab>
1818
<Fab position="center-bottom" morphTo=".demo-fab-fullscreen-sheet.fab-morph-target">
19-
<Icon ifIos="f7:add" ifMd="material:add"></Icon>
19+
<Icon ios="f7:add" md="material:add"></Icon>
2020
</Fab>
2121
<div className="list links-list demo-fab-sheet fab-morph-target" slot="fixed">
2222
<ul>

‎kitchen-sink/react/src/pages/fab.jsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ export default () => (
66
<Navbar title="Floating Action Button" backLink="Back"></Navbar>
77

88
<Fab position="right-top" slot="fixed">
9-
<Icon ifIos="f7:add" ifMd="material:add"></Icon>
10-
<Icon ifIos="f7:close" ifMd="material:close"></Icon>
9+
<Icon ios="f7:add" md="material:add"></Icon>
10+
<Icon ios="f7:close" md="material:close"></Icon>
1111
<FabButtons position="left">
1212
<FabButton>1</FabButton>
1313
<FabButton>2</FabButton>
@@ -16,8 +16,8 @@ export default () => (
1616
</Fab>
1717

1818
<Fab position="right-bottom" slot="fixed">
19-
<Icon ifIos="f7:add" ifMd="material:add"></Icon>
20-
<Icon ifIos="f7:close" ifMd="material:close"></Icon>
19+
<Icon ios="f7:add" md="material:add"></Icon>
20+
<Icon ios="f7:close" md="material:close"></Icon>
2121
<FabButtons position="top">
2222
<FabButton label="Action 1">1</FabButton>
2323
<FabButton label="Action 2">2</FabButton>
@@ -26,8 +26,8 @@ export default () => (
2626
</Fab>
2727

2828
<Fab position="left-bottom" slot="fixed">
29-
<Icon ifIos="f7:add" ifMd="material:add"></Icon>
30-
<Icon ifIos="f7:close" ifMd="material:close"></Icon>
29+
<Icon ios="f7:add" md="material:add"></Icon>
30+
<Icon ios="f7:close" md="material:close"></Icon>
3131
<FabButtons position="top">
3232
<FabButton>1</FabButton>
3333
<FabButton>2</FabButton>
@@ -36,8 +36,8 @@ export default () => (
3636
</Fab>
3737

3838
<Fab position="left-top" slot="fixed">
39-
<Icon ifIos="f7:add" ifMd="material:add"></Icon>
40-
<Icon ifIos="f7:close" ifMd="material:close"></Icon>
39+
<Icon ios="f7:add" md="material:add"></Icon>
40+
<Icon ios="f7:close" md="material:close"></Icon>
4141
<FabButtons position="bottom">
4242
<FabButton>1</FabButton>
4343
<FabButton>2</FabButton>
@@ -46,8 +46,8 @@ export default () => (
4646
</Fab>
4747

4848
<Fab position="center-center" slot="fixed">
49-
<Icon ifIos="f7:add" ifMd="material:add"></Icon>
50-
<Icon ifIos="f7:close" ifMd="material:close"></Icon>
49+
<Icon ios="f7:add" md="material:add"></Icon>
50+
<Icon ios="f7:close" md="material:close"></Icon>
5151
<FabButtons position="center">
5252
<FabButton>1</FabButton>
5353
<FabButton>2</FabButton>

‎kitchen-sink/react/src/pages/home.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ export default () => (
55
<Page>
66
<Navbar>
77
<NavLeft>
8-
<Link panelOpen="left" iconIfIos="f7:menu" iconIfMd="material:menu"></Link>
8+
<Link panelOpen="left" iconIos="f7:menu" iconMd="material:menu"></Link>
99
</NavLeft>
1010
<NavTitle>Framework7</NavTitle>
1111
<NavRight>
12-
<Link searchbarEnable=".searchbar-components" iconIfIos="f7:search_strong" iconIfMd="material:search"></Link>
12+
<Link searchbarEnable=".searchbar-components" iconIos="f7:search_strong" iconMd="material:search"></Link>
1313
</NavRight>
1414
<Searchbar className="searchbar-components" searchContainer=".components-list" searchIn="a" expandable></Searchbar>
1515
</Navbar>

‎kitchen-sink/react/src/pages/messages.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -113,14 +113,14 @@ export default class extends React.Component {
113113
sheetVisible={this.state.sheetVisible}
114114
>
115115
<Link
116-
iconIfIos="f7:camera_fill"
117-
iconIfMd="material:camera_alt"
116+
iconIos="f7:camera_fill"
117+
iconMd="material:camera_alt"
118118
slot="inner-start"
119119
onClick={() => {this.setState({sheetVisible: !this.state.sheetVisible})}}
120120
></Link>
121121
<Link
122-
iconIfIos="f7:arrow_up_fill"
123-
iconIfMd="material:send"
122+
iconIos="f7:arrow_up_fill"
123+
iconMd="material:send"
124124
slot="inner-end"
125125
onClick={this.sendMessage.bind(this)}
126126
></Link>

‎kitchen-sink/react/src/pages/range.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default class extends React.Component {
1919
<List simpleList>
2020
<ListItem>
2121
<ListItemCell className="width-auto flex-shrink-0">
22-
<Icon ifIos="f7:volume_mute_fill" ifMd="material:volume_mute"></Icon>
22+
<Icon ios="f7:volume_mute_fill" md="material:volume_mute"></Icon>
2323
</ListItemCell>
2424
<ListItemCell className="flex-shrink-3">
2525
<Range
@@ -30,7 +30,7 @@ export default class extends React.Component {
3030
></Range>
3131
</ListItemCell>
3232
<ListItemCell className="width-auto flex-shrink-0">
33-
<Icon ifIos="f7:volume_fill" ifMd="material:volume_up"></Icon>
33+
<Icon ios="f7:volume_fill" md="material:volume_up"></Icon>
3434
</ListItemCell>
3535
</ListItem>
3636
</List>
@@ -39,7 +39,7 @@ export default class extends React.Component {
3939
<List simpleList>
4040
<ListItem>
4141
<ListItemCell className="width-auto flex-shrink-0">
42-
<Icon ifIos="f7:circle" ifMd="material:brightness_low"></Icon>
42+
<Icon ios="f7:circle" md="material:brightness_low"></Icon>
4343
</ListItemCell>
4444
<ListItemCell className="flex-shrink-3">
4545
<Range
@@ -52,7 +52,7 @@ export default class extends React.Component {
5252
></Range>
5353
</ListItemCell>
5454
<ListItemCell className="width-auto flex-shrink-0">
55-
<Icon ifIos="f7:circle_half" ifMd="material:brightness_high"></Icon>
55+
<Icon ios="f7:circle_half" md="material:brightness_high"></Icon>
5656
</ListItemCell>
5757
</ListItem>
5858
</List>
@@ -61,7 +61,7 @@ export default class extends React.Component {
6161
<List simpleList>
6262
<ListItem>
6363
<ListItemCell className="width-auto flex-shrink-0">
64-
<Icon ifIos="f7:circle" ifMd="material:brightness_low"></Icon>
64+
<Icon ios="f7:circle" md="material:brightness_low"></Icon>
6565
</ListItemCell>
6666
<ListItemCell className="flex-shrink-3">
6767
<Range
@@ -76,7 +76,7 @@ export default class extends React.Component {
7676
></Range>
7777
</ListItemCell>
7878
<ListItemCell className="width-auto flex-shrink-0">
79-
<Icon ifIos="f7:circle_half" ifMd="material:brightness_high"></Icon>
79+
<Icon ios="f7:circle_half" md="material:brightness_high"></Icon>
8080
</ListItemCell>
8181
</ListItem>
8282
</List>

‎kitchen-sink/react/src/pages/searchbar-expandable.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default () => (
55
<Page>
66
<Navbar backLink="Back" title="Searchbar">
77
<NavRight>
8-
<Link searchbarEnable=".searchbar-demo" iconIfIos="f7:search_strong" iconIfMd="material:search"></Link>
8+
<Link searchbarEnable=".searchbar-demo" iconIos="f7:search_strong" iconMd="material:search"></Link>
99
</NavRight>
1010
<Searchbar
1111
className="searchbar-demo"

‎kitchen-sink/react/src/pages/tabbar-labels.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@ export default class extends React.Component {
1919
</NavRight>
2020
</Navbar>
2121
<Toolbar tabbar labels bottomMd={this.state.toolbarBottom}>
22-
<Link tabLink="#tab-1" tabLinkActive text="Tab 1" iconIfIos="f7:email_fill" iconIfMd="material:email"></Link>
23-
<Link tabLink="#tab-2" text="Tab 2" iconIfIos="f7:today_fill" iconIfMd="material:today"></Link>
24-
<Link tabLink="#tab-3" text="Tab 3" iconIfIos="f7:cloud_fill" iconIfMd="material:file_upload"></Link>
22+
<Link tabLink="#tab-1" tabLinkActive text="Tab 1" iconIos="f7:email_fill" iconMd="material:email"></Link>
23+
<Link tabLink="#tab-2" text="Tab 2" iconIos="f7:today_fill" iconMd="material:today"></Link>
24+
<Link tabLink="#tab-3" text="Tab 3" iconIos="f7:cloud_fill" iconMd="material:file_upload"></Link>
2525
</Toolbar>
2626

2727
<Tabs>

0 commit comments

Comments
 (0)