Skip to content

Commit

Permalink
[material-ui][SvgIcon] Convert to support CSS extraction (#41779)
Browse files Browse the repository at this point in the history
  • Loading branch information
@aarongarciah
aarongarciah committed Apr 25, 2024
1 parent ca6b5b4 commit c9bef2c
Show file tree
Hide file tree
Showing 3 changed files with 197 additions and 21 deletions.
72 changes: 72 additions & 0 deletions apps/pigment-css-next-app/src/app/material-ui/icons/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
'use client';
import * as React from 'react';
import CreateSvgIcon from '../../../../../../docs/data/material/components/icons/CreateSvgIcon';
import FontAwesomeIcon from '../../../../../../docs/data/material/components/icons/FontAwesomeIcon';
import FontAwesomeIconSize from '../../../../../../docs/data/material/components/icons/FontAwesomeIconSize';
import FontAwesomeSvgIconDemo from '../../../../../../docs/data/material/components/icons/FontAwesomeSvgIconDemo';
import Icons from '../../../../../../docs/data/material/components/icons/Icons';
import SvgIconChildren from '../../../../../../docs/data/material/components/icons/SvgIconChildren';
import SvgIconsColor from '../../../../../../docs/data/material/components/icons/SvgIconsColor';
import SvgIconsSize from '../../../../../../docs/data/material/components/icons/SvgIconsSize';
import SvgMaterialIcons from '../../../../../../docs/data/material/components/icons/SvgMaterialIcons';

export default function IconsPage() {
return (
<React.Fragment>
<section>
<h2> Create Svg Icon</h2>
<div className="demo-container">
<CreateSvgIcon />
</div>
</section>
<section>
<h2> Font Awesome Icon</h2>
<div className="demo-container">
<FontAwesomeIcon />
</div>
</section>
<section>
<h2> Font Awesome Icon Size</h2>
<div className="demo-container">
<FontAwesomeIconSize />
</div>
</section>
<section>
<h2> Font Awesome Svg Icon Demo</h2>
<div className="demo-container">
<FontAwesomeSvgIconDemo />
</div>
</section>
<section>
<h2> Icons</h2>
<div className="demo-container">
<Icons />
</div>
</section>
<section>
<h2> Svg Icon Children</h2>
<div className="demo-container">
<SvgIconChildren />
</div>
</section>
<section>
<h2> Svg Icons Color</h2>
<div className="demo-container">
<SvgIconsColor />
</div>
</section>
<section>
<h2> Svg Icons Size</h2>
<div className="demo-container">
<SvgIconsSize />
</div>
</section>
<section>
<h2> Svg Material Icons</h2>
<div className="demo-container">
<SvgMaterialIcons />
</div>
</section>
</React.Fragment>
);
}
73 changes: 73 additions & 0 deletions apps/pigment-css-vite-app/src/pages/material-ui/icons.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import * as React from 'react';
import MaterialUILayout from '../../Layout';
import CreateSvgIcon from '../../../../../docs/data/material/components/icons/CreateSvgIcon.tsx';
import FontAwesomeIcon from '../../../../../docs/data/material/components/icons/FontAwesomeIcon.tsx';
import FontAwesomeIconSize from '../../../../../docs/data/material/components/icons/FontAwesomeIconSize.tsx';
import FontAwesomeSvgIconDemo from '../../../../../docs/data/material/components/icons/FontAwesomeSvgIconDemo.tsx';
import Icons from '../../../../../docs/data/material/components/icons/Icons.tsx';
import SvgIconChildren from '../../../../../docs/data/material/components/icons/SvgIconChildren.tsx';
import SvgIconsColor from '../../../../../docs/data/material/components/icons/SvgIconsColor.tsx';
import SvgIconsSize from '../../../../../docs/data/material/components/icons/SvgIconsSize.tsx';
import SvgMaterialIcons from '../../../../../docs/data/material/components/icons/SvgMaterialIcons.tsx';

export default function IconsPage() {
return (
<MaterialUILayout>
<h1>Icons</h1>
<section>
<h2> Create Svg Icon</h2>
<div className="demo-container">
<CreateSvgIcon />
</div>
</section>
<section>
<h2> Font Awesome Icon</h2>
<div className="demo-container">
<FontAwesomeIcon />
</div>
</section>
<section>
<h2> Font Awesome Icon Size</h2>
<div className="demo-container">
<FontAwesomeIconSize />
</div>
</section>
<section>
<h2> Font Awesome Svg Icon Demo</h2>
<div className="demo-container">
<FontAwesomeSvgIconDemo />
</div>
</section>
<section>
<h2> Icons</h2>
<div className="demo-container">
<Icons />
</div>
</section>
<section>
<h2> Svg Icon Children</h2>
<div className="demo-container">
<SvgIconChildren />
</div>
</section>
<section>
<h2> Svg Icons Color</h2>
<div className="demo-container">
<SvgIconsColor />
</div>
</section>
<section>
<h2> Svg Icons Size</h2>
<div className="demo-container">
<SvgIconsSize />
</div>
</section>
<section>
<h2> Svg Material Icons</h2>
<div className="demo-container">
<SvgMaterialIcons />
</div>
</section>
</MaterialUILayout>
);
}
73 changes: 52 additions & 21 deletions packages/mui-material/src/SvgIcon/SvgIcon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@ import PropTypes from 'prop-types';
import clsx from 'clsx';
import composeClasses from '@mui/utils/composeClasses';
import capitalize from '../utils/capitalize';
import useThemeProps from '../styles/useThemeProps';
import styled from '../styles/styled';
import { styled, createUseThemeProps } from '../zero-styled';
import { getSvgIconUtilityClass } from './svgIconClasses';

const useThemeProps = createUseThemeProps('MuiSvgIcon');

const useUtilityClasses = (ownerState) => {
const { color, fontSize, classes } = ownerState;

Expand All @@ -34,32 +35,60 @@ const SvgIconRoot = styled('svg', {
styles[`fontSize${capitalize(ownerState.fontSize)}`],
];
},
})(({ theme, ownerState }) => ({
})(({ theme }) => ({
userSelect: 'none',
width: '1em',
height: '1em',
display: 'inline-block',
// the <svg> will define the property that has `currentColor`
// for example heroicons uses fill="none" and stroke="currentColor"
fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
flexShrink: 0,
transition: theme.transitions?.create?.('fill', {
duration: theme.transitions?.duration?.shorter,
duration: (theme.vars ?? theme).transitions?.duration?.shorter,
}),
fontSize: {
inherit: 'inherit',
small: theme.typography?.pxToRem?.(20) || '1.25rem',
medium: theme.typography?.pxToRem?.(24) || '1.5rem',
large: theme.typography?.pxToRem?.(35) || '2.1875rem',
}[ownerState.fontSize],
// TODO v5 deprecate, v6 remove for sx
color:
(theme.vars || theme).palette?.[ownerState.color]?.main ??
variants: [
{
props: (props) => !props.hasSvgAsChild,
style: {
// the <svg> will define the property that has `currentColor`
// for example heroicons uses fill="none" and stroke="currentColor"
fill: 'currentColor',
},
},
{
props: { fontSize: 'inherit' },
style: { fontSize: 'inherit' },
},
{
props: { fontSize: 'small' },
style: { fontSize: theme.typography?.pxToRem?.(20) || '1.25rem' },
},
{
props: { fontSize: 'medium' },
style: { fontSize: theme.typography?.pxToRem?.(24) || '1.5rem' },
},
{
props: { fontSize: 'large' },
style: { fontSize: theme.typography?.pxToRem?.(35) || '2.1875rem' },
},
// TODO v5 deprecate color prop, v6 remove for sx
...Object.entries((theme.vars ?? theme).palette)
.filter(([, value]) => value.main)
.map(([color]) => ({
props: { color },
style: { color: (theme.vars ?? theme).palette?.[color]?.main },
})),
{
props: { color: 'action' },
style: { color: (theme.vars ?? theme).palette?.action?.active },
},
{
props: { color: 'disabled' },
style: { color: (theme.vars ?? theme).palette?.action?.disabled },
},
{
action: (theme.vars || theme).palette?.action?.active,
disabled: (theme.vars || theme).palette?.action?.disabled,
inherit: undefined,
}[ownerState.color],
props: { color: 'inherit' },
style: { color: undefined },
},
],
}));

const SvgIcon = React.forwardRef(function SvgIcon(inProps, ref) {
Expand Down Expand Up @@ -211,6 +240,8 @@ SvgIcon.propTypes /* remove-proptypes */ = {
viewBox: PropTypes.string,
};

SvgIcon.muiName = 'SvgIcon';
if (SvgIcon) {
SvgIcon.muiName = 'SvgIcon';
}

export default SvgIcon;

0 comments on commit c9bef2c

Please sign in to comment.