Skip to content

Commit 8a99669

Browse files
oliviertassinarioliviertassinari
committed
[docs] Improve the SvgIcon documentation
1 parent 73fb52a commit 8a99669

File tree

11 files changed

+202
-191
lines changed

11 files changed

+202
-191
lines changed

‎docs/src/pages/components/icons/FontAwesome.js‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
2-
import clsx from 'clsx';
2+
33
import { loadCSS } from 'fg-loadcss';
44
import { makeStyles } from '@material-ui/core/styles';
5-
import { red } from '@material-ui/core/colors';
5+
import { green } from '@material-ui/core/colors';
66
import Icon from '@material-ui/core/Icon';
77

88
const useStyles = makeStyles(theme => ({
@@ -11,12 +11,6 @@ const useStyles = makeStyles(theme => ({
1111
margin: theme.spacing(2),
1212
},
1313
},
14-
iconHover: {
15-
margin: theme.spacing(2),
16-
'&:hover': {
17-
color: red[800],
18-
},
19-
},
2014
}));
2115

2216
export default function FontAwesome() {
@@ -34,13 +28,9 @@ export default function FontAwesome() {
3428
<Icon className="fa fa-plus-circle" />
3529
<Icon className="fa fa-plus-circle" color="primary" />
3630
<Icon className="fa fa-plus-circle" color="secondary" />
37-
<Icon className="fa fa-plus-circle" color="action" />
38-
<Icon
39-
className={clsx(classes.iconHover, 'fa fa-plus-circle')}
40-
color="error"
41-
style={{ fontSize: 30 }}
42-
/>
43-
<Icon className="fa fa-plus-circle" color="disabled" fontSize="large" />
31+
<Icon className="fa fa-plus-circle" style={{ color: green[500] }} />
32+
<Icon className="fa fa-plus-circle" fontSize="small" />
33+
<Icon className="fa fa-plus-circle" style={{ fontSize: 30 }} />
4434
</div>
4535
);
4636
}

‎docs/src/pages/components/icons/FontAwesome.tsx‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import clsx from 'clsx';
33
import { loadCSS } from 'fg-loadcss';
44
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
5-
import { red } from '@material-ui/core/colors';
5+
import { green } from '@material-ui/core/colors';
66
import Icon from '@material-ui/core/Icon';
77

88
const useStyles = makeStyles((theme: Theme) =>
@@ -12,12 +12,6 @@ const useStyles = makeStyles((theme: Theme) =>
1212
margin: theme.spacing(2),
1313
},
1414
},
15-
iconHover: {
16-
margin: theme.spacing(2),
17-
'&:hover': {
18-
color: red[800],
19-
},
20-
},
2115
}),
2216
);
2317

@@ -36,13 +30,9 @@ export default function FontAwesome() {
3630
<Icon className="fa fa-plus-circle" />
3731
<Icon className="fa fa-plus-circle" color="primary" />
3832
<Icon className="fa fa-plus-circle" color="secondary" />
39-
<Icon className="fa fa-plus-circle" color="action" />
40-
<Icon
41-
className={clsx(classes.iconHover, 'fa fa-plus-circle')}
42-
color="error"
43-
style={{ fontSize: 30 }}
44-
/>
45-
<Icon className="fa fa-plus-circle" color="disabled" fontSize="large" />
33+
<Icon className="fa fa-plus-circle" style={{ color: green[500] }} />
34+
<Icon className="fa fa-plus-circle" fontSize="small" />
35+
<Icon className="fa fa-plus-circle" style={{ fontSize: 30 }} />
4636
</div>
4737
);
4838
}

‎docs/src/pages/components/icons/Icons.js‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { makeStyles } from '@material-ui/core/styles';
3-
import { red } from '@material-ui/core/colors';
3+
import { green } from '@material-ui/core/colors';
44
import Icon from '@material-ui/core/Icon';
55

66
const useStyles = makeStyles(theme => ({
@@ -9,11 +9,6 @@ const useStyles = makeStyles(theme => ({
99
margin: theme.spacing(2),
1010
},
1111
},
12-
iconHover: {
13-
'&:hover': {
14-
color: red[800],
15-
},
16-
},
1712
}));
1813

1914
export default function Icons() {
@@ -24,13 +19,9 @@ export default function Icons() {
2419
<Icon>add_circle</Icon>
2520
<Icon color="primary">add_circle</Icon>
2621
<Icon color="secondary">add_circle</Icon>
27-
<Icon color="action">add_circle</Icon>
28-
<Icon className={classes.iconHover} color="error" style={{ fontSize: 30 }}>
29-
add_circle
30-
</Icon>
31-
<Icon color="disabled" fontSize="large">
32-
add_circle
33-
</Icon>
22+
<Icon style={{ color: green[500] }}>add_circle</Icon>
23+
<Icon fontSize="small">add_circle</Icon>
24+
<Icon style={{ fontSize: 30 }}>add_circle</Icon>
3425
</div>
3526
);
3627
}

‎docs/src/pages/components/icons/Icons.tsx‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
3-
import { red } from '@material-ui/core/colors';
3+
import { green } from '@material-ui/core/colors';
44
import Icon from '@material-ui/core/Icon';
55

66
const useStyles = makeStyles((theme: Theme) =>
@@ -10,11 +10,6 @@ const useStyles = makeStyles((theme: Theme) =>
1010
margin: theme.spacing(2),
1111
},
1212
},
13-
iconHover: {
14-
'&:hover': {
15-
color: red[800],
16-
},
17-
},
1813
}),
1914
);
2015

@@ -26,13 +21,9 @@ export default function Icons() {
2621
<Icon>add_circle</Icon>
2722
<Icon color="primary">add_circle</Icon>
2823
<Icon color="secondary">add_circle</Icon>
29-
<Icon color="action">add_circle</Icon>
30-
<Icon className={classes.iconHover} color="error" style={{ fontSize: 30 }}>
31-
add_circle
32-
</Icon>
33-
<Icon color="disabled" fontSize="large">
34-
add_circle
35-
</Icon>
24+
<Icon style={{ color: green[500] }}>add_circle</Icon>
25+
<Icon fontSize="small">add_circle</Icon>
26+
<Icon style={{ fontSize: 30 }}>add_circle</Icon>
3627
</div>
3728
);
3829
}

‎docs/src/pages/components/icons/SvgIcons.js‎

Lines changed: 0 additions & 59 deletions
This file was deleted.

‎docs/src/pages/components/icons/SvgIcons.tsx‎

Lines changed: 0 additions & 64 deletions
This file was deleted.

‎docs/src/pages/components/icons/SvgIconsColor.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import { green } from '@material-ui/core/colors';
4+
import SvgIcon from '@material-ui/core/SvgIcon';
5+
6+
const useStyles = makeStyles(theme => ({
7+
root: {
8+
'& > svg': {
9+
margin: theme.spacing(2),
10+
},
11+
},
12+
}));
13+
14+
function HomeIcon(props) {
15+
return (
16+
<SvgIcon {...props}>
17+
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
18+
</SvgIcon>
19+
);
20+
}
21+
22+
export default function SvgIconsColor() {
23+
const classes = useStyles();
24+
25+
return (
26+
<div className={classes.root}>
27+
<HomeIcon />
28+
<HomeIcon color="primary" />
29+
<HomeIcon color="secondary" />
30+
<HomeIcon color="action" />
31+
<HomeIcon color="disabled" />
32+
<HomeIcon style={{ color: green[500] }} />
33+
</div>
34+
);
35+
}

‎docs/src/pages/components/icons/SvgIconsColor.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
3+
import { green } from '@material-ui/core/colors';
4+
import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
5+
6+
const useStyles = makeStyles((theme: Theme) =>
7+
createStyles({
8+
root: {
9+
'& > svg': {
10+
margin: theme.spacing(2),
11+
},
12+
},
13+
}),
14+
);
15+
16+
function HomeIcon(props: SvgIconProps) {
17+
return (
18+
<SvgIcon {...props}>
19+
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
20+
</SvgIcon>
21+
);
22+
}
23+
24+
export default function SvgIconsColor() {
25+
const classes = useStyles();
26+
27+
return (
28+
<div className={classes.root}>
29+
<HomeIcon />
30+
<HomeIcon color="primary" />
31+
<HomeIcon color="secondary" />
32+
<HomeIcon color="action" />
33+
<HomeIcon color="disabled" />
34+
<HomeIcon style={{ color: green[500] }} />
35+
</div>
36+
);
37+
}

‎docs/src/pages/components/icons/SvgIconsSize.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import SvgIcon from '@material-ui/core/SvgIcon';
4+
5+
const useStyles = makeStyles(theme => ({
6+
root: {
7+
'& > svg': {
8+
margin: theme.spacing(2),
9+
},
10+
},
11+
}));
12+
13+
function HomeIcon(props) {
14+
return (
15+
<SvgIcon {...props}>
16+
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
17+
</SvgIcon>
18+
);
19+
}
20+
21+
export default function SvgIconsSize() {
22+
const classes = useStyles();
23+
24+
return (
25+
<div className={classes.root}>
26+
<HomeIcon fontSize="small" />
27+
<HomeIcon />
28+
<HomeIcon fontSize="large" />
29+
<HomeIcon style={{ fontSize: 40 }} />
30+
</div>
31+
);
32+
}

0 commit comments

Comments
 (0)