[docs] Add a demo with Font Awesome

mui · Jul 1, 2018 · be29a1b · be29a1b
1 parent 1a83577
commit be29a1b
Show file tree

Hide file tree

Showing 5 changed files with 205 additions and 182 deletions.
diff --git a/docs/src/modules/components/Link.js b/docs/src/modules/components/Link.js
@@ -29,29 +29,6 @@ const styles = theme => ({
   },
 });
 
-class OnClick extends React.Component {
-  handleClick = event => {
-    if (this.props.onClick) {
-      this.props.onClick(event);
-    }
-
-    if (this.props.onCustomClick) {
-      this.props.onCustomClick(event);
-    }
-  };
-
-  render() {
-    const { component: ComponentProp, onCustomClick, ...props } = this.props;
-    return <ComponentProp {...props} onClick={this.handleClick} />;
-  }
-}
-
-OnClick.propTypes = {
-  component: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
-  onCustomClick: PropTypes.func,
-};
-
 function Link(props) {
   const {
     activeClassName,
@@ -86,16 +63,15 @@ function Link(props) {
       passHref: true,
     };
     children = (
-      <OnClick
-        component="a"
+      <a
         className={classNames(className, {
           [activeClassName]: router.pathname === href && activeClassName,
         })}
-        onCustomClick={onClick}
+        onClick={onClick}
         {...other}
       >
         {children}
-      </OnClick>
+      </a>
     );
   } else {
     ComponentRoot = 'a';

diff --git a/docs/src/pages/style/icons/FontAwesome.js b/docs/src/pages/style/icons/FontAwesome.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { loadCSS } from 'fg-loadcss/src/loadCSS';
+import { withStyles } from '@material-ui/core/styles';
+import red from '@material-ui/core/colors/red';
+import Icon from '@material-ui/core/Icon';
+
+const styles = theme => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  icon: {
+    margin: theme.spacing.unit * 2,
+  },
+  iconHover: {
+    margin: theme.spacing.unit * 2,
+    '&:hover': {
+      color: red[800],
+    },
+  },
+});
+
+class FontAwesome extends React.Component {
+  componentDidMount() {
+    loadCSS(
+      'https://use.fontawesome.com/releases/v5.1.0/css/all.css',
+      document.querySelector('#insertion-point-jss'),
+    );
+  }
+
+  render() {
+    const { classes } = this.props;
+
+    return (
+      <div className={classes.root}>
+        <Icon className={classNames(classes.icon, 'fa fa-plus-circle')} />
+        <Icon className={classNames(classes.icon, 'fa fa-plus-circle')} color="primary" />
+        <Icon className={classNames(classes.icon, 'fa fa-plus-circle')} color="secondary" />
+        <Icon className={classNames(classes.icon, 'fa fa-plus-circle')} color="action" />
+        <Icon
+          className={classNames(classes.iconHover, 'fa fa-plus-circle')}
+          color="error"
+          style={{ fontSize: 30 }}
+        />
+        <Icon
+          className={classNames(classes.icon, 'fa fa-plus-circle')}
+          color="disabled"
+          style={{ fontSize: 36 }}
+        />
+      </div>
+    );
+  }
+}
+
+FontAwesome.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(FontAwesome);
diff --git a/docs/src/pages/style/icons/icons.md b/docs/src/pages/style/icons/icons.md
@@ -58,6 +58,7 @@ There are three exceptions to this rule:
 {{"demo": "pages/style/icons/SvgMaterialIcons.js"}}
 
 #### More SVG icons
+
 Looking for even more SVG icons? There are a lot of projects out there,
 but [https://materialdesignicons.com](https://materialdesignicons.com/) provides over 2,000 official and community provided icons.
 [mdi-material-ui](https://github.com/TeamWertarbyte/mdi-material-ui) packages these icons as Material-UI SvgIcons in much the same way as [@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons) does for the official icons.
@@ -83,4 +84,10 @@ for example:
 By default, an Icon will inherit the current text color.
 Optionally, you can set the icon color using one of the theme color properties: `primary`, `secondary`, `action`, `error` & `disabled`.
 
+#### Font Material icons
+
 {{"demo": "pages/style/icons/Icons.js"}}
+
+#### [Font Awesome](https://fontawesome.com/icons)
+
+{{"demo": "pages/style/icons/FontAwesome.js", "hideEditButton": true}}
diff --git a/pages/style/icons.js b/pages/style/icons.js
@@ -8,13 +8,6 @@ function Page() {
     <MarkdownDocs
       markdown={markdown}
       demos={{
-        'pages/style/icons/Icons.js': {
-          js: require('docs/src/pages/style/icons/Icons').default,
-          raw: preval`
-module.exports = require('fs')
-  .readFileSync(require.resolve('docs/src/pages/style/icons/Icons'), 'utf8')
-`,
-        },
         'pages/style/icons/SvgIcons.js': {
           js: require('docs/src/pages/style/icons/SvgIcons').default,
           raw: preval`
@@ -27,6 +20,20 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/style/icons/SvgMaterialIcons'), 'utf8')
+`,
+        },
+        'pages/style/icons/Icons.js': {
+          js: require('docs/src/pages/style/icons/Icons').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/style/icons/Icons'), 'utf8')
+`,
+        },
+        'pages/style/icons/FontAwesome.js': {
+          js: require('docs/src/pages/style/icons/FontAwesome').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/style/icons/FontAwesome'), 'utf8')
 `,
         },
       }}