add a component property

mui · Jun 27, 2018 · 128a8a0 · 128a8a0
1 parent b193ec5
commit 128a8a0
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 35 deletions.
diff --git 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
@@ -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
@@ -43,7 +43,7 @@ function SvgIcon(props) {
     classes,
     className: classNameProp,
     color,
-    defs,
+    component: Component,
     fontSize,
     nativeColor,
     titleAccess,
@@ -61,18 +61,17 @@ function SvgIcon(props) {
   );
 
   return (
-    <svg
+    <Component
       className={className}
       focusable="false"
       viewBox={viewBox}
       color={nativeColor}
       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
@@ -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);
     });
   });
 });