[docs] Improve the SvgIcon documentation

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

@@ -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 => ({
@@ -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() {
@@ -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>
   );
 }

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

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

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

@@ -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 => ({
@@ -9,11 +9,6 @@ const useStyles = makeStyles(theme => ({
       margin: theme.spacing(2),
     },
   },
-  iconHover: {
-    '&:hover': {
-      color: red[800],
-    },
-  },
 }));
 
 export default function Icons() {
@@ -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>
   );
 }

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

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

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

@@ -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>
+  );
+}

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

@@ -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>
+  );
+}

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

@@ -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>
+  );
+}