[docs] Migrate Icons demos to emotion

docs/pages/_document.js

@@ -153,6 +153,8 @@ MyDocument.getInitialProps = async (ctx) => {
       userLanguage: ctx.query.userLanguage || 'en',
       // Styles fragment is rendered after the app and page rendering finish.
       styles: [
+        <style id="material-icon-font" key="material-icon-font" />,
+        <style id="font-awesome-css" key="font-awesome-css" />,
         styledComponentsSheet.getStyleElement(),
         <style
           id="emotion-server-side"
@@ -167,8 +169,6 @@ MyDocument.getInitialProps = async (ctx) => {
           // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{ __html: css }}
         />,
-        <style id="material-icon-font" key="material-icon-font" />,
-        <style id="font-awesome-css" key="font-awesome-css" />,
         <style id="app-search" key="app-search" />,
         <style id="prismjs" key="prismjs" />,
         <style id="insertion-point-jss" key="insertion-point-jss" />,

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

@@ -1,27 +1,23 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import { createSvgIcon } from '@material-ui/core/utils';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& > svg': {
-      margin: theme.spacing(2),
-    },
-  },
-}));
-
 const HomeIcon = createSvgIcon(
   <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />,
   'Home',
 );
 
 export default function CreateSvgIcon() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > :not(style)': {
+          m: 2,
+        },
+      }}
+    >
       <HomeIcon />
       <HomeIcon color="primary" />
-    </div>
+    </Box>
   );
 }

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

@@ -1,29 +1,23 @@
 import * as React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import { createSvgIcon } from '@material-ui/core/utils';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      '& > svg': {
-        margin: theme.spacing(2),
-      },
-    },
-  }),
-);
-
 const HomeIcon = createSvgIcon(
   <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />,
   'Home',
 );
 
 export default function CreateSvgIcon() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > :not(style)': {
+          m: 2,
+        },
+      }}
+    >
       <HomeIcon />
       <HomeIcon color="primary" />
-    </div>
+    </Box>
   );
 }

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

@@ -1,20 +1,10 @@
 import * as React from 'react';
 import { loadCSS } from 'fg-loadcss';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import { green } from '@material-ui/core/colors';
 import Icon from '@material-ui/core/Icon';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& > *': {
-      margin: theme.spacing(2),
-    },
-  },
-}));
-
 export default function FontAwesomeIcon() {
-  const classes = useStyles();
-
   React.useEffect(() => {
     const node = loadCSS(
       'https://use.fontawesome.com/releases/v5.14.0/css/all.css',
@@ -28,20 +18,22 @@ export default function FontAwesomeIcon() {
   }, []);
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > :not(style)': {
+          m: 2,
+        },
+      }}
+    >
       <Icon baseClassName="fas" className="fa-plus-circle" />
       <Icon baseClassName="fas" className="fa-plus-circle" color="primary" />
       <Icon
         baseClassName="fas"
         className="fa-plus-circle"
-        style={{ color: green[500] }}
+        sx={{ color: green[500] }}
       />
       <Icon baseClassName="fas" className="fa-plus-circle" fontSize="small" />
-      <Icon
-        baseClassName="fas"
-        className="fa-plus-circle"
-        style={{ fontSize: 30 }}
-      />
-    </div>
+      <Icon baseClassName="fas" className="fa-plus-circle" sx={{ fontSize: 30 }} />
+    </Box>
   );
 }

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

@@ -1,22 +1,10 @@
 import * as React from 'react';
 import { loadCSS } from 'fg-loadcss';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import { green } from '@material-ui/core/colors';
 import Icon from '@material-ui/core/Icon';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      '& > *': {
-        margin: theme.spacing(2),
-      },
-    },
-  }),
-);
-
 export default function FontAwesomeIcon() {
-  const classes = useStyles();
-
   React.useEffect(() => {
     const node = loadCSS(
       'https://use.fontawesome.com/releases/v5.14.0/css/all.css',
@@ -30,20 +18,22 @@ export default function FontAwesomeIcon() {
   }, []);
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > :not(style)': {
+          m: 2,
+        },
+      }}
+    >
       <Icon baseClassName="fas" className="fa-plus-circle" />
       <Icon baseClassName="fas" className="fa-plus-circle" color="primary" />
       <Icon
         baseClassName="fas"
         className="fa-plus-circle"
-        style={{ color: green[500] }}
+        sx={{ color: green[500] }}
       />
       <Icon baseClassName="fas" className="fa-plus-circle" fontSize="small" />
-      <Icon
-        baseClassName="fas"
-        className="fa-plus-circle"
-        style={{ fontSize: 30 }}
-      />
-    </div>
+      <Icon baseClassName="fas" className="fa-plus-circle" sx={{ fontSize: 30 }} />
+    </Box>
   );
 }

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

@@ -1,18 +1,11 @@
 import * as React from 'react';
 import { loadCSS } from 'fg-loadcss';
-import { ThemeProvider, createMuiTheme, makeStyles } from '@material-ui/core/styles';
+import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Icon from '@material-ui/core/Icon';
 import MdPhone from '@material-ui/icons/Phone';
 import Chip from '@material-ui/core/Chip';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& > *': {
-      margin: theme.spacing(1),
-    },
-  },
-}));
-
 const theme = createMuiTheme({
   components: {
     MuiIcon: {
@@ -29,8 +22,6 @@ const theme = createMuiTheme({
 });
 
 export default function FontAwesomeIconSize() {
-  const classes = useStyles();
-
   React.useEffect(() => {
     const node = loadCSS(
       'https://use.fontawesome.com/releases/v5.14.0/css/all.css',
@@ -44,11 +35,17 @@ export default function FontAwesomeIconSize() {
   }, []);
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > :not(style)': {
+          m: 1,
+        },
+      }}
+    >
       <ThemeProvider theme={theme}>
         <Chip icon={<MdPhone />} label="Call me" />
         <Chip icon={<Icon className="fas fa-phone-alt" />} label="Call me" />
       </ThemeProvider>
-    </div>
+    </Box>
   );
 }

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

@@ -1,26 +1,11 @@
 import * as React from 'react';
 import { loadCSS } from 'fg-loadcss';
-import {
-  ThemeProvider,
-  createMuiTheme,
-  makeStyles,
-  createStyles,
-  Theme,
-} from '@material-ui/core/styles';
+import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Icon from '@material-ui/core/Icon';
 import MdPhone from '@material-ui/icons/Phone';
 import Chip from '@material-ui/core/Chip';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      '& > *': {
-        margin: theme.spacing(1),
-      },
-    },
-  }),
-);
-
 const theme = createMuiTheme({
   components: {
     MuiIcon: {
@@ -37,8 +22,6 @@ const theme = createMuiTheme({
 });
 
 export default function FontAwesomeIconSize() {
-  const classes = useStyles();
-
   React.useEffect(() => {
     const node = loadCSS(
       'https://use.fontawesome.com/releases/v5.14.0/css/all.css',
@@ -52,11 +35,17 @@ export default function FontAwesomeIconSize() {
   }, []);
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > :not(style)': {
+          m: 1,
+        },
+      }}
+    >
       <ThemeProvider theme={theme}>
         <Chip icon={<MdPhone />} label="Call me" />
         <Chip icon={<Icon className="fas fa-phone-alt" />} label="Call me" />
       </ThemeProvider>
-    </div>
+    </Box>
   );
 }

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { faEllipsisV } from '@fortawesome/free-solid-svg-icons/faEllipsisV';
 import { faInfo } from '@fortawesome/free-solid-svg-icons/faInfo';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import SvgIcon from '@material-ui/core/SvgIcon';
@@ -39,19 +39,15 @@ FontAwesomeSvgIcon.propTypes = {
   icon: PropTypes.any.isRequired,
 };
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& > *': {
-      margin: theme.spacing(1),
-    },
-  },
-}));
-
 export default function FontAwesomeSvgIconDemo() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > :not(style)': {
+          m: 1,
+        },
+      }}
+    >
       <IconButton aria-label="Example">
         <FontAwesomeIcon icon={faEllipsisV} />
       </IconButton>
@@ -64,6 +60,6 @@ export default function FontAwesomeSvgIconDemo() {
       <Button variant="contained" startIcon={<FontAwesomeSvgIcon icon={faInfo} />}>
         Example
       </Button>
-    </div>
+    </Box>
   );
 }

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { faEllipsisV } from '@fortawesome/free-solid-svg-icons/faEllipsisV';
 import { faInfo } from '@fortawesome/free-solid-svg-icons/faInfo';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import SvgIcon from '@material-ui/core/SvgIcon';
@@ -40,21 +40,15 @@ const FontAwesomeSvgIcon = React.forwardRef<SVGSVGElement, FontAwesomeSvgIconPro
   },
 );
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      '& > *': {
-        margin: theme.spacing(1),
-      },
-    },
-  }),
-);
-
 export default function FontAwesomeSvgIconDemo() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > :not(style)': {
+          m: 1,
+        },
+      }}
+    >
       <IconButton aria-label="Example">
         <FontAwesomeIcon icon={faEllipsisV} />
       </IconButton>
@@ -67,6 +61,6 @@ export default function FontAwesomeSvgIconDemo() {
       <Button variant="contained" startIcon={<FontAwesomeSvgIcon icon={faInfo} />}>
         Example
       </Button>
-    </div>
+    </Box>
   );
 }