Refactor icons to not use `React.FC`
Opened this issue · 2 comments
nebula-aac commented
See previous open issue here: #224
Needed to open another ticket to track towards making this change for v0.16.0
.
React has changes it type definitions which means React.FC
will no longer be available to use.
- Update each of the icons to use the appropriate props
- [ ] Consider usingSvgIcon
from@mui/material
as it has other properties we can benefit from using - Widen the
IconProps
to acceptsx
props from MUI in order to utilize the theme object inline
- 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
senthil-athiban commented
@nebula-aac Should I refactor all the SVG icons to use the SvgIcon
component from mui
?
import { SVGProps } from 'react';
import { CARIBBEAN_GREEN_FILL, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
import { SvgIcon } from '@mui/material';
const ColumnIcon = ({
width = DEFAULT_WIDTH,
height = DEFAULT_HEIGHT,
fill = CARIBBEAN_GREEN_FILL,
...props
}: SVGProps<SVGSVGElement>) => {
return (
<SvgIcon>
<svg
width={width}
height={height}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 -960 960 960"
fill={fill}
{...props}
>
<path d="M120-200v-560h220v560H120Zm250 0v-560h220v560H370Zm250 0v-560h220v560H620Z" />
</svg>
</SvgIcon>
);
};
export default ColumnIcon;
nebula-aac commented
@senthil-k8s Hello thank you for your question
Initially I considered doing this, because when I was testing it in the open PR I had for testing new changes to move to Next.js 14, there are underlying issues with using the MUI svg api to replace ours, which can't be done all at once, but rather needs to be one by one. So this issue needs to be changed to reflect the possible blockers.