Skip to content

Refactor icons to not use React.FC #499

Open
@nebula-aac

Description

@nebula-aac
Contributor

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 using SvgIcon from @mui/material as it has other properties we can benefit from using
    Widen the IconProps to accept sx props from MUI in order to utilize the theme object inline

Contributor Guide

Activity

changed the title [-]Refactor icons to not use`React.FC`[/-] [+]Refactor icons to not use `React.FC`[/+] on Feb 9, 2024
senthil-athiban

senthil-athiban commented on Apr 8, 2024

@senthil-athiban
Contributor

@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

nebula-aac commented on Apr 9, 2024

@nebula-aac
ContributorAuthor

@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.

self-assigned this
on Apr 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    Participants

    @senthil-athiban@nebula-aac

    Issue actions

      Refactor icons to not use `React.FC` · Issue #499 · layer5io/sistent