Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs] Improve the SvgIcon documentation #18560

Merged
merged 11 commits into from
Nov 29, 2019
Merged

[docs] Improve the SvgIcon documentation #18560

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
8c34fb8
[docs] Improve the SvgIcon documentation
oliviertassinari Nov 25, 2019
09ce5a0
Matt review
oliviertassinari Nov 25, 2019
7f232e6
Update docs/src/pages/components/icons/icons.md
oliviertassinari Nov 25, 2019
844f3a5
Update docs/src/pages/components/icons/icons.md
oliviertassinari Nov 25, 2019
d9c6eab
Fix typo
oliviertassinari Nov 27, 2019
f62792d
Update docs/src/pages/components/icons/icons.md
oliviertassinari Nov 27, 2019
4b1973a
Update docs/src/pages/components/icons/icons.md
oliviertassinari Nov 27, 2019
1eb6996
Update docs/src/pages/components/icons/icons.md
oliviertassinari Nov 27, 2019
8163c77
Update docs/src/pages/components/icons/icons.md
oliviertassinari Nov 27, 2019
2df0c46
Update docs/src/pages/components/icons/icons.md
oliviertassinari Nov 27, 2019
b6f88b9
Update docs/src/pages/components/icons/icons.md
oliviertassinari Nov 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 4 additions & 15 deletions docs/src/pages/components/icons/FontAwesome.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React from 'react';
import clsx from 'clsx';
import { loadCSS } from 'fg-loadcss';
import { makeStyles } from '@material-ui/core/styles';
import { red } from '@material-ui/core/colors';
import { green } from '@material-ui/core/colors';
import Icon from '@material-ui/core/Icon';

const useStyles = makeStyles(theme => ({
Expand All @@ -11,12 +10,6 @@ const useStyles = makeStyles(theme => ({
margin: theme.spacing(2),
},
},
iconHover: {
margin: theme.spacing(2),
'&:hover': {
color: red[800],
},
},
}));

export default function FontAwesome() {
Expand All @@ -34,13 +27,9 @@ export default function FontAwesome() {
<Icon className="fa fa-plus-circle" />
<Icon className="fa fa-plus-circle" color="primary" />
<Icon className="fa fa-plus-circle" color="secondary" />
<Icon className="fa fa-plus-circle" color="action" />
<Icon
className={clsx(classes.iconHover, 'fa fa-plus-circle')}
color="error"
style={{ fontSize: 30 }}
/>
<Icon className="fa fa-plus-circle" color="disabled" fontSize="large" />
<Icon className="fa fa-plus-circle" style={{ color: green[500] }} />
<Icon className="fa fa-plus-circle" fontSize="small" />
<Icon className="fa fa-plus-circle" style={{ fontSize: 30 }} />
</div>
);
}
19 changes: 4 additions & 15 deletions docs/src/pages/components/icons/FontAwesome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React from 'react';
import clsx from 'clsx';
import { loadCSS } from 'fg-loadcss';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import { red } from '@material-ui/core/colors';
import { green } from '@material-ui/core/colors';
import Icon from '@material-ui/core/Icon';

const useStyles = makeStyles((theme: Theme) =>
Expand All @@ -12,12 +11,6 @@ const useStyles = makeStyles((theme: Theme) =>
margin: theme.spacing(2),
},
},
iconHover: {
margin: theme.spacing(2),
'&:hover': {
color: red[800],
},
},
}),
);

Expand All @@ -36,13 +29,9 @@ export default function FontAwesome() {
<Icon className="fa fa-plus-circle" />
<Icon className="fa fa-plus-circle" color="primary" />
<Icon className="fa fa-plus-circle" color="secondary" />
<Icon className="fa fa-plus-circle" color="action" />
<Icon
className={clsx(classes.iconHover, 'fa fa-plus-circle')}
color="error"
style={{ fontSize: 30 }}
/>
<Icon className="fa fa-plus-circle" color="disabled" fontSize="large" />
<Icon className="fa fa-plus-circle" style={{ color: green[500] }} />
<Icon className="fa fa-plus-circle" fontSize="small" />
<Icon className="fa fa-plus-circle" style={{ fontSize: 30 }} />
</div>
);
}
17 changes: 4 additions & 13 deletions docs/src/pages/components/icons/Icons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { red } from '@material-ui/core/colors';
import { green } from '@material-ui/core/colors';
import Icon from '@material-ui/core/Icon';

const useStyles = makeStyles(theme => ({
Expand All @@ -9,11 +9,6 @@ const useStyles = makeStyles(theme => ({
margin: theme.spacing(2),
},
},
iconHover: {
'&:hover': {
color: red[800],
},
},
}));

export default function Icons() {
Expand All @@ -24,13 +19,9 @@ export default function Icons() {
<Icon>add_circle</Icon>
<Icon color="primary">add_circle</Icon>
<Icon color="secondary">add_circle</Icon>
<Icon color="action">add_circle</Icon>
<Icon className={classes.iconHover} color="error" style={{ fontSize: 30 }}>
add_circle
</Icon>
<Icon color="disabled" fontSize="large">
add_circle
</Icon>
<Icon style={{ color: green[500] }}>add_circle</Icon>
<Icon fontSize="small">add_circle</Icon>
<Icon style={{ fontSize: 30 }}>add_circle</Icon>
</div>
);
}
17 changes: 4 additions & 13 deletions docs/src/pages/components/icons/Icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import { red } from '@material-ui/core/colors';
import { green } from '@material-ui/core/colors';
import Icon from '@material-ui/core/Icon';

const useStyles = makeStyles((theme: Theme) =>
Expand All @@ -10,11 +10,6 @@ const useStyles = makeStyles((theme: Theme) =>
margin: theme.spacing(2),
},
},
iconHover: {
'&:hover': {
color: red[800],
},
},
}),
);

Expand All @@ -26,13 +21,9 @@ export default function Icons() {
<Icon>add_circle</Icon>
<Icon color="primary">add_circle</Icon>
<Icon color="secondary">add_circle</Icon>
<Icon color="action">add_circle</Icon>
<Icon className={classes.iconHover} color="error" style={{ fontSize: 30 }}>
add_circle
</Icon>
<Icon color="disabled" fontSize="large">
add_circle
</Icon>
<Icon style={{ color: green[500] }}>add_circle</Icon>
<Icon fontSize="small">add_circle</Icon>
<Icon style={{ fontSize: 30 }}>add_circle</Icon>
</div>
);
}
59 changes: 0 additions & 59 deletions docs/src/pages/components/icons/SvgIcons.js
View file
Open in desktop

This file was deleted.

64 changes: 0 additions & 64 deletions docs/src/pages/components/icons/SvgIcons.tsx
View file
Open in desktop

This file was deleted.

35 changes: 35 additions & 0 deletions docs/src/pages/components/icons/SvgIconsColor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { green } from '@material-ui/core/colors';
import SvgIcon from '@material-ui/core/SvgIcon';

const useStyles = makeStyles(theme => ({
root: {
'& > svg': {
margin: theme.spacing(2),
},
},
}));

function HomeIcon(props) {
return (
<SvgIcon {...props}>
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
</SvgIcon>
);
}

export default function SvgIconsColor() {
const classes = useStyles();

return (
<div className={classes.root}>
<HomeIcon />
<HomeIcon color="primary" />
<HomeIcon color="secondary" />
<HomeIcon color="action" />
<HomeIcon color="disabled" />
<HomeIcon style={{ color: green[500] }} />
</div>
);
}
37 changes: 37 additions & 0 deletions docs/src/pages/components/icons/SvgIconsColor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React from 'react';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import { green } from '@material-ui/core/colors';
import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';

const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
'& > svg': {
margin: theme.spacing(2),
},
},
}),
);

function HomeIcon(props: SvgIconProps) {
return (
<SvgIcon {...props}>
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
</SvgIcon>
);
}

export default function SvgIconsColor() {
const classes = useStyles();

return (
<div className={classes.root}>
<HomeIcon />
<HomeIcon color="primary" />
<HomeIcon color="secondary" />
<HomeIcon color="action" />
<HomeIcon color="disabled" />
<HomeIcon style={{ color: green[500] }} />
</div>
);
}
32 changes: 32 additions & 0 deletions docs/src/pages/components/icons/SvgIconsSize.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import SvgIcon from '@material-ui/core/SvgIcon';

const useStyles = makeStyles(theme => ({
root: {
'& > svg': {
margin: theme.spacing(2),
},
},
}));

function HomeIcon(props) {
return (
<SvgIcon {...props}>
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
</SvgIcon>
);
}

export default function SvgIconsSize() {
const classes = useStyles();

return (
<div className={classes.root}>
<HomeIcon fontSize="small" />
<HomeIcon />
<HomeIcon fontSize="large" />
<HomeIcon style={{ fontSize: 40 }} />
</div>
);
}
Loading