Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SvgIcon] Add component property #11987

Merged
merged 2 commits into from
Jun 27, 2018
Merged

[SvgIcon] Add component property #11987

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b193ec5
[SvgIcon] Add defs prop, test and demo to SvgIcon
stephenway Jun 26, 2018
297534a
add a component property
oliviertassinari Jun 27, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .size-limit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
17 changes: 17 additions & 0 deletions docs/src/pages/style/icons/SvgIcons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import red from '@material-ui/core/colors/red';
import blue from '@material-ui/core/colors/blue';
import SvgIcon from '@material-ui/core/SvgIcon';

const styles = theme => ({
Expand Down Expand Up @@ -39,6 +40,22 @@ function SvgIcons(props) {
<HomeIcon className={classes.icon} color="action" />
<HomeIcon className={classes.iconHover} color="error" style={{ fontSize: 30 }} />
<HomeIcon color="disabled" className={classes.icon} style={{ fontSize: 36 }} />
<HomeIcon
className={classes.icon}
color="primary"
style={{ fontSize: 36 }}
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>
);
}
Expand Down
1 change: 1 addition & 0 deletions packages/material-ui/src/SvgIcon/SvgIcon.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
15 changes: 11 additions & 4 deletions packages/material-ui/src/SvgIcon/SvgIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ function SvgIcon(props) {
classes,
className: classNameProp,
color,
component: Component,
fontSize,
nativeColor,
titleAccess,
Expand All @@ -60,17 +61,17 @@ function SvgIcon(props) {
);

return (
<svg
<Component
className={className}
focusable="false"
viewBox={viewBox}
color={nativeColor}
aria-hidden={titleAccess ? 'false' : 'true'}
{...other}
>
{titleAccess ? <title>{titleAccess}</title> : null}
{children}
</svg>
{titleAccess ? <title>{titleAccess}</title> : null}
</Component>
);
}

Expand All @@ -93,6 +94,11 @@ SvgIcon.propTypes = {
* You can use the `nativeColor` property to apply a color attribute to the SVG element.
*/
color: PropTypes.oneOf(['inherit', 'primary', 'secondary', 'action', 'error', 'disabled']),
/**
* 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.
*/
Expand All @@ -118,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';
Expand Down
31 changes: 30 additions & 1 deletion packages/material-ui/src/SvgIcon/SvgIcon.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -99,4 +105,27 @@ describe('<SvgIcon />', () => {
);
});
});

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>,
);
assert.strictEqual(wrapper.find('defs').length, 1);
});
});
});
1 change: 1 addition & 0 deletions pages/api/svg-icon.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down