1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | import * as React from 'react';
|
4 | import PropTypes from 'prop-types';
|
5 | import clsx from 'clsx';
|
6 | import { chainPropTypes } from '@material-ui/utils';
|
7 | import withStyles from '../styles/withStyles';
|
8 | import capitalize from '../utils/capitalize';
|
9 | export const styles = theme => ({
|
10 |
|
11 | root: {
|
12 | userSelect: 'none',
|
13 | fontSize: theme.typography.pxToRem(24),
|
14 | width: '1em',
|
15 | height: '1em',
|
16 |
|
17 |
|
18 | overflow: 'hidden',
|
19 | flexShrink: 0
|
20 | },
|
21 |
|
22 |
|
23 | colorPrimary: {
|
24 | color: theme.palette.primary.main
|
25 | },
|
26 |
|
27 |
|
28 | colorSecondary: {
|
29 | color: theme.palette.secondary.main
|
30 | },
|
31 |
|
32 |
|
33 | colorAction: {
|
34 | color: theme.palette.action.active
|
35 | },
|
36 |
|
37 |
|
38 | colorError: {
|
39 | color: theme.palette.error.main
|
40 | },
|
41 |
|
42 |
|
43 | colorDisabled: {
|
44 | color: theme.palette.action.disabled
|
45 | },
|
46 |
|
47 |
|
48 | fontSizeInherit: {
|
49 | fontSize: 'inherit'
|
50 | },
|
51 |
|
52 |
|
53 | fontSizeSmall: {
|
54 | fontSize: theme.typography.pxToRem(20)
|
55 | },
|
56 |
|
57 |
|
58 | fontSizeLarge: {
|
59 | fontSize: theme.typography.pxToRem(36)
|
60 | }
|
61 | });
|
62 | const Icon = React.forwardRef(function Icon(props, ref) {
|
63 | const {
|
64 | classes,
|
65 | className,
|
66 | color = 'inherit',
|
67 | component: Component = 'span',
|
68 | fontSize = 'medium'
|
69 | } = props,
|
70 | other = _objectWithoutPropertiesLoose(props, ["classes", "className", "color", "component", "fontSize"]);
|
71 |
|
72 | return React.createElement(Component, _extends({
|
73 | className: clsx('material-icons', classes.root, className, color !== 'inherit' && classes[`color${capitalize(color)}`], fontSize !== 'default' && fontSize !== 'medium' && classes[`fontSize${capitalize(fontSize)}`]),
|
74 | "aria-hidden": true,
|
75 | ref: ref
|
76 | }, other));
|
77 | });
|
78 | process.env.NODE_ENV !== "production" ? Icon.propTypes = {
|
79 | |
80 |
|
81 |
|
82 | children: PropTypes.node,
|
83 |
|
84 | |
85 |
|
86 |
|
87 |
|
88 | classes: PropTypes.object.isRequired,
|
89 |
|
90 | |
91 |
|
92 |
|
93 | className: PropTypes.string,
|
94 |
|
95 | |
96 |
|
97 |
|
98 | color: PropTypes.oneOf(['inherit', 'primary', 'secondary', 'action', 'error', 'disabled']),
|
99 |
|
100 | |
101 |
|
102 |
|
103 |
|
104 | component: PropTypes
|
105 |
|
106 | .elementType,
|
107 |
|
108 | |
109 |
|
110 |
|
111 | fontSize: chainPropTypes(PropTypes.oneOf(['default', 'inherit', 'large', 'medium', 'small']), props => {
|
112 | const {
|
113 | fontSize
|
114 | } = props;
|
115 |
|
116 | if (fontSize === 'default') {
|
117 | throw new Error('Material-UI: `fontSize="default"` is deprecated. Use `fontSize="medium"` instead.');
|
118 | }
|
119 |
|
120 | return null;
|
121 | })
|
122 | } : void 0;
|
123 | Icon.muiName = 'Icon';
|
124 | export default withStyles(styles, {
|
125 | name: 'MuiIcon'
|
126 | })(Icon); |
\ | No newline at end of file |