From 297534a9525fa2ffdd7762ce75049fc7d54239cc Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 27 Jun 2018 20:26:18 +0200
Subject: [PATCH] add a component property

---
 .size-limit.js                                |  2 +-
 docs/src/pages/style/icons/SvgIcons.js        | 24 ++++++------
 packages/material-ui/src/SvgIcon/SvgIcon.d.ts |  1 +
 packages/material-ui/src/SvgIcon/SvgIcon.js   | 23 ++++++------
 .../material-ui/src/SvgIcon/SvgIcon.test.js   | 37 +++++++++++++------
 pages/api/svg-icon.md                         |  1 +
 6 files changed, 52 insertions(+), 36 deletions(-)

diff --git a/.size-limit.js b/.size-limit.js
index 16d63b7b2b7444..deb14e53b5ee21 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -27,7 +27,7 @@ module.exports = [
     name: 'The size of all the modules of material-ui.',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '94.8 KB',
+    limit: '94.9 KB',
   },
   {
     name: 'The main bundle of the docs',
diff --git a/docs/src/pages/style/icons/SvgIcons.js b/docs/src/pages/style/icons/SvgIcons.js
index b645c5545b02b9..ec8f3a0579a9e5 100644
--- a/docs/src/pages/style/icons/SvgIcons.js
+++ b/docs/src/pages/style/icons/SvgIcons.js
@@ -25,15 +25,11 @@ const styles = theme => ({
 function HomeIcon(props) {
   return (
     <SvgIcon {...props}>
-      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill={props.fill || undefined} />
+      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
     </SvgIcon>
   );
 }
 
-HomeIcon.propTypes = {
-  fill: PropTypes.string,
-};
-
 function SvgIcons(props) {
   const { classes } = props;
   return (
@@ -48,13 +44,17 @@ function SvgIcons(props) {
         className={classes.icon}
         color="primary"
         style={{ fontSize: 36 }}
-        fill="url(#gradient1)"
-        defs={
-          <linearGradient id="gradient1">
-            <stop offset="20%" stopColor={blue[400]} />
-            <stop offset="90%" stopColor={red.A400} />
-          </linearGradient>
-        }
+        component={svgProps => (
+          <svg {...svgProps}>
+            <defs>
+              <linearGradient id="gradient1">
+                <stop offset="30%" stopColor={blue[400]} />
+                <stop offset="70%" stopColor={red[400]} />
+              </linearGradient>
+            </defs>
+            {React.cloneElement(svgProps.children[0], { fill: 'url(#gradient1)' })}
+          </svg>
+        )}
       />
     </div>
   );
diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.d.ts b/packages/material-ui/src/SvgIcon/SvgIcon.d.ts
index 6b7235727d4b41..39a2b64659fa5c 100644
--- a/packages/material-ui/src/SvgIcon/SvgIcon.d.ts
+++ b/packages/material-ui/src/SvgIcon/SvgIcon.d.ts
@@ -4,6 +4,7 @@ import { StandardProps, PropTypes } from '..';
 export interface SvgIconProps
   extends StandardProps<React.SVGProps<SVGSVGElement>, SvgIconClassKey> {
   color?: PropTypes.Color | 'action' | 'disabled' | 'error';
+  component?: React.ReactType<SvgIconProps>;
   fontSize?: 'inherit' | 'default';
   nativeColor?: string;
   titleAccess?: string;
diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.js b/packages/material-ui/src/SvgIcon/SvgIcon.js
index 5f1eccc28d0359..8dc722701b9ef3 100644
--- a/packages/material-ui/src/SvgIcon/SvgIcon.js
+++ b/packages/material-ui/src/SvgIcon/SvgIcon.js
@@ -43,7 +43,7 @@ function SvgIcon(props) {
     classes,
     className: classNameProp,
     color,
-    defs,
+    component: Component,
     fontSize,
     nativeColor,
     titleAccess,
@@ -61,7 +61,7 @@ function SvgIcon(props) {
   );
 
   return (
-    <svg
+    <Component
       className={className}
       focusable="false"
       viewBox={viewBox}
@@ -69,10 +69,9 @@ function SvgIcon(props) {
       aria-hidden={titleAccess ? 'false' : 'true'}
       {...other}
     >
-      {defs ? <defs>{defs}</defs> : null}
-      {titleAccess ? <title>{titleAccess}</title> : null}
       {children}
-    </svg>
+      {titleAccess ? <title>{titleAccess}</title> : null}
+    </Component>
   );
 }
 
@@ -96,15 +95,14 @@ SvgIcon.propTypes = {
    */
   color: PropTypes.oneOf(['inherit', 'primary', 'secondary', 'action', 'error', 'disabled']),
   /**
-<<<<<<< HEAD
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  /**
    * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
    */
   fontSize: PropTypes.oneOf(['inherit', 'default']),
-=======
-   * Node passed into the top of the SVG element.
-   */
-  defs: PropTypes.node,
->>>>>>> [SvgIcon] Add defs prop, test and demo to SvgIcon
   /**
    * Applies a color attribute to the SVG element.
    */
@@ -126,8 +124,9 @@ SvgIcon.propTypes = {
 
 SvgIcon.defaultProps = {
   color: 'inherit',
-  viewBox: '0 0 24 24',
+  component: 'svg',
   fontSize: 'default',
+  viewBox: '0 0 24 24',
 };
 
 SvgIcon.muiName = 'SvgIcon';
diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.test.js b/packages/material-ui/src/SvgIcon/SvgIcon.test.js
index 4df7ed1bb6cdb5..30829a87b58dae 100644
--- a/packages/material-ui/src/SvgIcon/SvgIcon.test.js
+++ b/packages/material-ui/src/SvgIcon/SvgIcon.test.js
@@ -2,20 +2,26 @@
 
 import React from 'react';
 import { assert } from 'chai';
-import { createShallow, getClasses } from '../test-utils';
+import { createShallow, createMount, getClasses } from '../test-utils';
 import SvgIcon from './SvgIcon';
 
 describe('<SvgIcon />', () => {
   let shallow;
+  let mount;
   let classes;
   let path;
 
   before(() => {
     shallow = createShallow({ dive: true });
+    mount = createMount();
     classes = getClasses(<SvgIcon>foo</SvgIcon>);
     path = <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />;
   });
 
+  after(() => {
+    mount.cleanUp();
+  });
+
   it('renders children by default', () => {
     const wrapper = shallow(<SvgIcon>{path}</SvgIcon>);
     assert.strictEqual(wrapper.contains(path), true, 'should contain the children');
@@ -100,17 +106,26 @@ describe('<SvgIcon />', () => {
     });
   });
 
-  describe('prop: defs', () => {
-    it('should render defs before path', () => {
-      path = <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="url(#gradient1)" />;
-      const defs = (
-        <linearGradient id="gradient1">
-          <stop offset="20%" stopColor="#39F" />
-          <stop offset="90%" stopColor="#F3F" />
-        </linearGradient>
+  describe('prop: component', () => {
+    it('should render component before path', () => {
+      const wrapper = mount(
+        <SvgIcon
+          component={props => (
+            <svg {...props}>
+              <defs>
+                <linearGradient id="gradient1">
+                  <stop offset="20%" stopColor="#39F" />
+                  <stop offset="90%" stopColor="#F3F" />
+                </linearGradient>
+              </defs>
+              {props.children}
+            </svg>
+          )}
+        >
+          {path}
+        </SvgIcon>,
       );
-      const wrapper = shallow(<SvgIcon defs={defs}>{path}</SvgIcon>);
-      assert.strictEqual(wrapper.childAt(0).type(), 'defs');
+      assert.strictEqual(wrapper.find('defs').length, 1);
     });
   });
 });
diff --git a/pages/api/svg-icon.md b/pages/api/svg-icon.md
index d39a18eadee1b3..20aa7cb175436a 100644
--- a/pages/api/svg-icon.md
+++ b/pages/api/svg-icon.md
@@ -18,6 +18,7 @@ title: SvgIcon API
 | <span class="prop-name required">children *</span> | <span class="prop-type">node |   | Node passed into the SVG element. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
 | <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'inherit', 'primary', 'secondary', 'action', 'error', 'disabled'<br> | <span class="prop-default">'inherit'</span> | The color of the component. It supports those theme colors that make sense for this component. You can use the `nativeColor` property to apply a color attribute to the SVG element. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> | <span class="prop-default">'svg'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
 | <span class="prop-name">fontSize</span> | <span class="prop-type">enum:&nbsp;'inherit'&nbsp;&#124;<br>&nbsp;'default'<br> | <span class="prop-default">'default'</span> | The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. |
 | <span class="prop-name">nativeColor</span> | <span class="prop-type">string |   | Applies a color attribute to the SVG element. |
 | <span class="prop-name">titleAccess</span> | <span class="prop-type">string |   | Provides a human-readable title for the element that contains it. https://www.w3.org/TR/SVG-access/#Equivalent |