-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[docs] Improve the SvgIcon documentation (#18560)
- Loading branch information
1 parent
ac5c1c1
commit ab490b8
Showing
11 changed files
with
204 additions
and
195 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
| ); | ||
| } |
Oops, something went wrong.