From 8c34fb88cd4de9f00046c9a5f44175fd01eaae3e Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 25 Nov 2019 15:12:17 +0100 Subject: [PATCH 01/11] [docs] Improve the SvgIcon documentation --- .../src/pages/components/icons/FontAwesome.js | 19 ++---- .../pages/components/icons/FontAwesome.tsx | 19 ++---- docs/src/pages/components/icons/Icons.js | 17 ++--- docs/src/pages/components/icons/Icons.tsx | 17 ++--- docs/src/pages/components/icons/SvgIcons.js | 59 ----------------- docs/src/pages/components/icons/SvgIcons.tsx | 64 ------------------- .../pages/components/icons/SvgIconsColor.js | 35 ++++++++++ .../pages/components/icons/SvgIconsColor.tsx | 37 +++++++++++ .../pages/components/icons/SvgIconsSize.js | 32 ++++++++++ .../pages/components/icons/SvgIconsSize.tsx | 34 ++++++++++ docs/src/pages/components/icons/icons.md | 60 +++++++++++++---- 11 files changed, 201 insertions(+), 192 deletions(-) delete mode 100644 docs/src/pages/components/icons/SvgIcons.js delete mode 100644 docs/src/pages/components/icons/SvgIcons.tsx create mode 100644 docs/src/pages/components/icons/SvgIconsColor.js create mode 100644 docs/src/pages/components/icons/SvgIconsColor.tsx create mode 100644 docs/src/pages/components/icons/SvgIconsSize.js create mode 100644 docs/src/pages/components/icons/SvgIconsSize.tsx diff --git a/docs/src/pages/components/icons/FontAwesome.js b/docs/src/pages/components/icons/FontAwesome.js index 813809db8c77fb..6cda13ae1aa36b 100644 --- a/docs/src/pages/components/icons/FontAwesome.js +++ b/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() { - - - + + + ); } diff --git a/docs/src/pages/components/icons/FontAwesome.tsx b/docs/src/pages/components/icons/FontAwesome.tsx index 94b4f7cfe6e3fb..c1a48a7c274738 100644 --- a/docs/src/pages/components/icons/FontAwesome.tsx +++ b/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() { - - - + + + ); } diff --git a/docs/src/pages/components/icons/Icons.js b/docs/src/pages/components/icons/Icons.js index bef05ee10c9e44..9415d93b4dd751 100644 --- a/docs/src/pages/components/icons/Icons.js +++ b/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() { add_circle add_circle add_circle - add_circle - - add_circle - - - add_circle - + add_circle + add_circle + add_circle ); } diff --git a/docs/src/pages/components/icons/Icons.tsx b/docs/src/pages/components/icons/Icons.tsx index d6a18120a0ac8b..9fa7e8f7338f7b 100644 --- a/docs/src/pages/components/icons/Icons.tsx +++ b/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() { add_circle add_circle add_circle - add_circle - - add_circle - - - add_circle - + add_circle + add_circle + add_circle ); } diff --git a/docs/src/pages/components/icons/SvgIcons.js b/docs/src/pages/components/icons/SvgIcons.js deleted file mode 100644 index 113a2a86abaf6b..00000000000000 --- a/docs/src/pages/components/icons/SvgIcons.js +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import { blue, red } from '@material-ui/core/colors'; -import SvgIcon from '@material-ui/core/SvgIcon'; - -const useStyles = makeStyles(theme => ({ - root: { - '& > svg': { - margin: theme.spacing(2), - }, - }, - iconHover: { - '&:hover': { - color: red[800], - }, - }, -})); - -function HomeIcon(props) { - return ( - - - - ); -} - -export default function SvgIcons() { - const classes = useStyles(); - - return ( -
- - - - - - - { - return ( - - - - - - - - {React.cloneElement(svgProps.children[0], { - fill: 'url(#gradient1)', - })} - - ); - }} - /> -
- ); -} diff --git a/docs/src/pages/components/icons/SvgIcons.tsx b/docs/src/pages/components/icons/SvgIcons.tsx deleted file mode 100644 index c1c48d2d8cae98..00000000000000 --- a/docs/src/pages/components/icons/SvgIcons.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react'; -import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; -import { blue, red } 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), - }, - }, - iconHover: { - '&:hover': { - color: red[800], - }, - }, - }), -); - -function HomeIcon(props: SvgIconProps) { - return ( - - - - ); -} - -export default function SvgIcons() { - const classes = useStyles(); - - return ( -
- - - - - - - { - return ( - - - - - - - - {React.cloneElement( - (svgProps.children as React.ReactNodeArray)[0] as React.ReactElement, - { - fill: 'url(#gradient1)', - }, - )} - - ); - }} - /> -
- ); -} diff --git a/docs/src/pages/components/icons/SvgIconsColor.js b/docs/src/pages/components/icons/SvgIconsColor.js new file mode 100644 index 00000000000000..e54e1e0e37df3a --- /dev/null +++ b/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 ( + + + + ); +} + +export default function SvgIconsColor() { + const classes = useStyles(); + + return ( +
+ + + + + + +
+ ); +} diff --git a/docs/src/pages/components/icons/SvgIconsColor.tsx b/docs/src/pages/components/icons/SvgIconsColor.tsx new file mode 100644 index 00000000000000..1cd02d0fa8717b --- /dev/null +++ b/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 ( + + + + ); +} + +export default function SvgIconsColor() { + const classes = useStyles(); + + return ( +
+ + + + + + +
+ ); +} diff --git a/docs/src/pages/components/icons/SvgIconsSize.js b/docs/src/pages/components/icons/SvgIconsSize.js new file mode 100644 index 00000000000000..d5d78711bc457f --- /dev/null +++ b/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 ( + + + + ); +} + +export default function SvgIconsSize() { + const classes = useStyles(); + + return ( +
+ + + + +
+ ); +} diff --git a/docs/src/pages/components/icons/SvgIconsSize.tsx b/docs/src/pages/components/icons/SvgIconsSize.tsx new file mode 100644 index 00000000000000..9c946bf381e647 --- /dev/null +++ b/docs/src/pages/components/icons/SvgIconsSize.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; +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 ( + + + + ); +} + +export default function SvgIconsSize() { + const classes = useStyles(); + + return ( +
+ + + + +
+ ); +} diff --git a/docs/src/pages/components/icons/icons.md b/docs/src/pages/components/icons/icons.md index b5fef3f966b2c8..8ac98c09a89087 100644 --- a/docs/src/pages/components/icons/icons.md +++ b/docs/src/pages/components/icons/icons.md @@ -40,11 +40,11 @@ The configuration of a Babel plugin is encouraged. Each icon also has a "theme": `Filled` (default), `Outlined`, `Rounded`, `Two tone` and `Sharp`. If you want to import the icon component with a "theme" different than default, append the "theme" name to the icon name. For example `@material-ui/icons/Delete` icon with: -- `Filled` "theme" (default) is exported as `@material-ui/icons/Delete`, -- `Outlined` "theme" is exported as `@material-ui/icons/DeleteOutlined`, -- `Rounded` "theme" is exported as `@material-ui/icons/DeleteRounded`, -- `Two tone` "theme" is exported as `@material-ui/icons/DeleteTwoTone`, -- `Sharp` "theme" is exported as `@material-ui/icons/DeleteSharp`. +- `Filled` "theme" (default) is exported as *@material-ui/icons/Delete*, +- `Outlined` "theme" is exported as *@material-ui/icons/DeleteOutlined*, +- `Rounded` "theme" is exported as *@material-ui/icons/DeleteRounded*, +- `Two tone` "theme" is exported as *@material-ui/icons/DeleteTwoTone*, +- `Sharp` "theme" is exported as *@material-ui/icons/DeleteSharp*. Note: The Material Design specification names the icons using "snake_case" naming (for example `delete_forever`, `add_a_photo`), while `@material-ui/icons` exports the respective icons using "PascalCase" naming (for example `DeleteForever`, `AddAPhoto`). There are three exceptions to this naming rule: `3d_rotation` exported as `ThreeDRotation`, `4k` exported as `FourK`, and `360` exported as `ThreeSixty`. @@ -52,16 +52,50 @@ Note: The Material Design specification names the icons using "snake_case" namin ## SvgIcon -If you need a custom SVG icon (not available in Material Icons) you should use the `SvgIcon` wrapper. -The `SvgIcon` component takes the SVG `path` element as its child and converts it to a React component that displays this SVG icon, and allows the icon to be styled and respond to mouse events. -SVG elements should be scaled for a 24x24px viewport. +If you need a custom SVG icon (not available in the Material Icons [default set](/components/material-icons/)) you can use the `SvgIcon` wrapper. +The component extends the native `` element: -The resulting icon can be used as is, -or included as a child for other Material-UI components that use icons. -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`. +- It comes with built-in accessibility. +- SVG elements should be scaled for a 24x24px viewport, so the resulting icon can be used as is, or included as a child for other Material-UI components that use icons (can be customized with the `viewBox` attribute). +- By default, the component inherits the current color. +Optionally, you can set the icon color using one of the theme color prop. + +```jsx +function HomeIcon(props) { + return ( + + + + ); +} +``` + +### Color + +{{"demo": "pages/components/icons/SvgIconsColor.js"}} + +### Size -{{"demo": "pages/components/icons/SvgIcons.js"}} +{{"demo": "pages/components/icons/SvgIconsSize.js"}} + +### Component prop + +You can use the `SvgIcon` wrapper even if your icons are saved the `.svg` format. +[svgr](https://github.com/smooth-code/svgr) has loaders to import svg files and use them as React components. For instance, with webpack: + +**webpack.config.js** +```js +{ + test: /\.svg$/, + use: ['@svgr/webpack'], +} +``` + +```jsx +import StarIcon from './star.svg'; + + +``` ### Libraries From 09ce5a0354795f09b608d255586aa683aa775d14 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 25 Nov 2019 17:55:41 +0100 Subject: [PATCH 02/11] Matt review --- docs/src/pages/components/icons/icons.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/src/pages/components/icons/icons.md b/docs/src/pages/components/icons/icons.md index 8ac98c09a89087..0a018e3d80b26d 100644 --- a/docs/src/pages/components/icons/icons.md +++ b/docs/src/pages/components/icons/icons.md @@ -15,11 +15,11 @@ Material-UI provides icons support in three ways: ## Material Icons -Material Design has standardized over 1,000 official icons, each in five different "themes" (see below). For each SVG icon, we export the respective React component from the `@material-ui/icons` package. You can search the full list of these icons in our [built-in search page](/components/material-icons/). +Material Design has standardized over 1,000 official icons, each in five different "themes" (see below). For each SVG icon, we export the respective React component from the @material-ui/icons package. You can search the full list of these icons in our [built-in search page](/components/material-icons/). ### Usage -Install `@material-ui/icons`. Import icons using one of these two options: +Install @material-ui/icons. Import icons using one of these two options: - Option 1: @@ -38,15 +38,15 @@ The safest is Option 1 but Option 2 can yield the best developer experience. Make sure you follow the [minimizing bundle size guide](/guides/minimizing-bundle-size/#option-2) before using the second approach. The configuration of a Babel plugin is encouraged. -Each icon also has a "theme": `Filled` (default), `Outlined`, `Rounded`, `Two tone` and `Sharp`. If you want to import the icon component with a "theme" different than default, append the "theme" name to the icon name. For example `@material-ui/icons/Delete` icon with: +Each icon also has a theme: Filled (default), Outlined, Rounded, Two tone and Sharp. If you want to import the icon component with a theme different than default, append the theme name to the icon name. For example `@material-ui/icons/Delete` icon with: -- `Filled` "theme" (default) is exported as *@material-ui/icons/Delete*, -- `Outlined` "theme" is exported as *@material-ui/icons/DeleteOutlined*, -- `Rounded` "theme" is exported as *@material-ui/icons/DeleteRounded*, -- `Two tone` "theme" is exported as *@material-ui/icons/DeleteTwoTone*, -- `Sharp` "theme" is exported as *@material-ui/icons/DeleteSharp*. +- Filled theme (default) is exported as `@material-ui/icons/Delete`, +- Outlined theme is exported as `@material-ui/icons/DeleteOutlined`, +- Rounded theme is exported as `@material-ui/icons/DeleteRounded`, +- Twotone theme is exported as `@material-ui/icons/DeleteTwoTone`, +- Sharp theme is exported as `@material-ui/icons/DeleteSharp`. -Note: The Material Design specification names the icons using "snake_case" naming (for example `delete_forever`, `add_a_photo`), while `@material-ui/icons` exports the respective icons using "PascalCase" naming (for example `DeleteForever`, `AddAPhoto`). There are three exceptions to this naming rule: `3d_rotation` exported as `ThreeDRotation`, `4k` exported as `FourK`, and `360` exported as `ThreeSixty`. +Note: The Material Design specification names the icons using "snake_case" naming (for example `delete_forever`, `add_a_photo`), while @material-ui/icons exports the respective icons using "PascalCase" naming (for example `DeleteForever`, `AddAPhoto`). There are three exceptions to this naming rule: `3d_rotation` exported as `ThreeDRotation`, `4k` exported as `FourK`, and `360` exported as `ThreeSixty`. {{"demo": "pages/components/icons/SvgMaterialIcons.js"}} From 7f232e608ff7f67f9feefa9115c673a9edb9cff7 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 25 Nov 2019 22:40:01 +0100 Subject: [PATCH 03/11] Update docs/src/pages/components/icons/icons.md Co-Authored-By: Matt --- docs/src/pages/components/icons/icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/icons/icons.md b/docs/src/pages/components/icons/icons.md index 0a018e3d80b26d..1db3549b5d4474 100644 --- a/docs/src/pages/components/icons/icons.md +++ b/docs/src/pages/components/icons/icons.md @@ -38,7 +38,7 @@ The safest is Option 1 but Option 2 can yield the best developer experience. Make sure you follow the [minimizing bundle size guide](/guides/minimizing-bundle-size/#option-2) before using the second approach. The configuration of a Babel plugin is encouraged. -Each icon also has a theme: Filled (default), Outlined, Rounded, Two tone and Sharp. If you want to import the icon component with a theme different than default, append the theme name to the icon name. For example `@material-ui/icons/Delete` icon with: +Each icon also has a "theme": Filled (default), Outlined, Rounded, Two tone and Sharp. If you want to import the icon component with a theme different than default, append the theme name to the icon name. For example `@material-ui/icons/Delete` icon with: - Filled theme (default) is exported as `@material-ui/icons/Delete`, - Outlined theme is exported as `@material-ui/icons/DeleteOutlined`, From 844f3a52f4b4a7030c30d68e92bf010a218a8406 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 25 Nov 2019 22:40:10 +0100 Subject: [PATCH 04/11] Update docs/src/pages/components/icons/icons.md Co-Authored-By: Matt --- docs/src/pages/components/icons/icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/icons/icons.md b/docs/src/pages/components/icons/icons.md index 1db3549b5d4474..ec00c53984986c 100644 --- a/docs/src/pages/components/icons/icons.md +++ b/docs/src/pages/components/icons/icons.md @@ -58,7 +58,7 @@ The component extends the native `` element: - It comes with built-in accessibility. - SVG elements should be scaled for a 24x24px viewport, so the resulting icon can be used as is, or included as a child for other Material-UI components that use icons (can be customized with the `viewBox` attribute). - By default, the component inherits the current color. -Optionally, you can set the icon color using one of the theme color prop. +Optionally, you can apply one of the theme colors using the `coior` prop. ```jsx function HomeIcon(props) { From d9c6eabcc441a4ec95b504dce91e8b55ac2e0c24 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 27 Nov 2019 13:20:38 +0100 Subject: [PATCH 05/11] Fix typo --- docs/src/pages/components/icons/icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/icons/icons.md b/docs/src/pages/components/icons/icons.md index ec00c53984986c..af39188ad4048c 100644 --- a/docs/src/pages/components/icons/icons.md +++ b/docs/src/pages/components/icons/icons.md @@ -58,7 +58,7 @@ The component extends the native `` element: - It comes with built-in accessibility. - SVG elements should be scaled for a 24x24px viewport, so the resulting icon can be used as is, or included as a child for other Material-UI components that use icons (can be customized with the `viewBox` attribute). - By default, the component inherits the current color. -Optionally, you can apply one of the theme colors using the `coior` prop. +Optionally, you can apply one of the theme colors using the `color` prop. ```jsx function HomeIcon(props) { From f62792d88da19b04872082d993e37103a784e2f4 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 27 Nov 2019 18:32:12 +0100 Subject: [PATCH 06/11] Update docs/src/pages/components/icons/icons.md Co-Authored-By: Matt --- docs/src/pages/components/icons/icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/icons/icons.md b/docs/src/pages/components/icons/icons.md index af39188ad4048c..4e36fc9f715541 100644 --- a/docs/src/pages/components/icons/icons.md +++ b/docs/src/pages/components/icons/icons.md @@ -15,7 +15,7 @@ Material-UI provides icons support in three ways: ## Material Icons -Material Design has standardized over 1,000 official icons, each in five different "themes" (see below). For each SVG icon, we export the respective React component from the @material-ui/icons package. You can search the full list of these icons in our [built-in search page](/components/material-icons/). +Material Design has standardized over 1,000 official icons, each in five different "themes" (see below). For each SVG icon, we export the respective React component from the @material-ui/icons package. You can [search the full list of these icons](/components/material-icons/). ### Usage From 4b1973a4f47cedc8cf44d0fbe4aafc303191cc8a Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 27 Nov 2019 18:32:22 +0100 Subject: [PATCH 07/11] Update docs/src/pages/components/icons/icons.md Co-Authored-By: Matt --- docs/src/pages/components/icons/icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/icons/icons.md b/docs/src/pages/components/icons/icons.md index 4e36fc9f715541..198e57347128e8 100644 --- a/docs/src/pages/components/icons/icons.md +++ b/docs/src/pages/components/icons/icons.md @@ -19,7 +19,7 @@ Material Design has standardized over 1,000 official icons, each in five differe ### Usage -Install @material-ui/icons. Import icons using one of these two options: +Install `@material-ui/icons`. Import icons using one of these two options: - Option 1: From 1eb699679154540b4433239d40dc7aeebbaf9c1e Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 27 Nov 2019 18:32:32 +0100 Subject: [PATCH 08/11] Update docs/src/pages/components/icons/icons.md Co-Authored-By: Matt --- docs/src/pages/components/icons/icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/icons/icons.md b/docs/src/pages/components/icons/icons.md index 198e57347128e8..42c02697fa4169 100644 --- a/docs/src/pages/components/icons/icons.md +++ b/docs/src/pages/components/icons/icons.md @@ -38,7 +38,7 @@ The safest is Option 1 but Option 2 can yield the best developer experience. Make sure you follow the [minimizing bundle size guide](/guides/minimizing-bundle-size/#option-2) before using the second approach. The configuration of a Babel plugin is encouraged. -Each icon also has a "theme": Filled (default), Outlined, Rounded, Two tone and Sharp. If you want to import the icon component with a theme different than default, append the theme name to the icon name. For example `@material-ui/icons/Delete` icon with: +Each icon also has a "theme": Filled (default), Outlined, Rounded, Two tone and Sharp. If you want to import the icon component with a theme other than default, append the theme name to the icon name. For example `@material-ui/icons/Delete` icon with: - Filled theme (default) is exported as `@material-ui/icons/Delete`, - Outlined theme is exported as `@material-ui/icons/DeleteOutlined`, From 8163c77b0dc4031d89833683df3a5225623ae15a Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 27 Nov 2019 18:33:02 +0100 Subject: [PATCH 09/11] Update docs/src/pages/components/icons/icons.md Co-Authored-By: Matt --- docs/src/pages/components/icons/icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/icons/icons.md b/docs/src/pages/components/icons/icons.md index 42c02697fa4169..738e42587ee836 100644 --- a/docs/src/pages/components/icons/icons.md +++ b/docs/src/pages/components/icons/icons.md @@ -53,7 +53,7 @@ Note: The Material Design specification names the icons using "snake_case" namin ## SvgIcon If you need a custom SVG icon (not available in the Material Icons [default set](/components/material-icons/)) you can use the `SvgIcon` wrapper. -The component extends the native `` element: +This component extends the native `` element: - It comes with built-in accessibility. - SVG elements should be scaled for a 24x24px viewport, so the resulting icon can be used as is, or included as a child for other Material-UI components that use icons (can be customized with the `viewBox` attribute). From 2df0c461b0d2cfe534f4e7309453349e44d092ed Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 27 Nov 2019 18:33:11 +0100 Subject: [PATCH 10/11] Update docs/src/pages/components/icons/icons.md Co-Authored-By: Matt --- docs/src/pages/components/icons/icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/icons/icons.md b/docs/src/pages/components/icons/icons.md index 738e42587ee836..3f3ac46359cb6b 100644 --- a/docs/src/pages/components/icons/icons.md +++ b/docs/src/pages/components/icons/icons.md @@ -56,7 +56,7 @@ If you need a custom SVG icon (not available in the Material Icons [default set] This component extends the native `` element: - It comes with built-in accessibility. -- SVG elements should be scaled for a 24x24px viewport, so the resulting icon can be used as is, or included as a child for other Material-UI components that use icons (can be customized with the `viewBox` attribute). +- SVG elements should be scaled for a 24x24px viewport, so the resulting icon can be used as is, or included as a child for other Material-UI components that use icons. (This can be customized with the `viewBox` attribute). - By default, the component inherits the current color. Optionally, you can apply one of the theme colors using the `color` prop. From b6f88b948a93d0f9e0a97a3ba2e5e5ccf833b29a Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 27 Nov 2019 18:35:20 +0100 Subject: [PATCH 11/11] Update docs/src/pages/components/icons/icons.md Co-Authored-By: Matt --- docs/src/pages/components/icons/icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/icons/icons.md b/docs/src/pages/components/icons/icons.md index 3f3ac46359cb6b..bc02e572d2ed6a 100644 --- a/docs/src/pages/components/icons/icons.md +++ b/docs/src/pages/components/icons/icons.md @@ -46,7 +46,7 @@ Each icon also has a "theme": Filled (default), Outlined, Rounded, Two tone and - Twotone theme is exported as `@material-ui/icons/DeleteTwoTone`, - Sharp theme is exported as `@material-ui/icons/DeleteSharp`. -Note: The Material Design specification names the icons using "snake_case" naming (for example `delete_forever`, `add_a_photo`), while @material-ui/icons exports the respective icons using "PascalCase" naming (for example `DeleteForever`, `AddAPhoto`). There are three exceptions to this naming rule: `3d_rotation` exported as `ThreeDRotation`, `4k` exported as `FourK`, and `360` exported as `ThreeSixty`. +> Note: The Material Design specification names the icons using "snake_case" naming (for example `delete_forever`, `add_a_photo`), while `@material-ui/icons` exports the respective icons using "PascalCase" naming (for example `DeleteForever`, `AddAPhoto`). There are three exceptions to this naming rule: `3d_rotation` exported as `ThreeDRotation`, `4k` exported as `FourK`, and `360` exported as `ThreeSixty`. {{"demo": "pages/components/icons/SvgMaterialIcons.js"}}