From be29a1b22de19566b9db838ef481fe545ad09996 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 2 Jul 2018 00:45:27 +0200 Subject: [PATCH] [docs] Add a demo with Font Awesome --- docs/src/modules/components/Link.js | 30 +-- docs/src/pages/style/icons/FontAwesome.js | 62 +++++ docs/src/pages/style/icons/icons.md | 7 + pages/style/icons.js | 21 +- yarn.lock | 267 ++++++++++------------ 5 files changed, 205 insertions(+), 182 deletions(-) create mode 100644 docs/src/pages/style/icons/FontAwesome.js diff --git a/docs/src/modules/components/Link.js b/docs/src/modules/components/Link.js index f2c99e515cecb6..6a7c494435bf65 100644 --- 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 ; - } -} - -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 = ( - {children} - + ); } else { ComponentRoot = 'a'; diff --git a/docs/src/pages/style/icons/FontAwesome.js b/docs/src/pages/style/icons/FontAwesome.js new file mode 100644 index 00000000000000..bfee234c76e4c6 --- /dev/null +++ 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 ( +
+ + + + + + +
+ ); + } +} + +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 index a21792fa8710e2..2a571c5af2abc8 100644 --- 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 index 61103c466ef789..0ac9c9d83a8ed3 100644 --- a/pages/style/icons.js +++ b/pages/style/icons.js @@ -8,13 +8,6 @@ function Page() {