Remove props from Icon

src/components/Icon.stories.tsx

@@ -79,21 +79,3 @@ export const NoLabels = () => (
     ))}
   </List>
 );
-
-export const Inline = () => (
-  <>
-    this is an inline <Icon icon="facehappy" aria-label="Happy face" /> icon (default)
-  </>
-);
-
-export const Block = () => (
-  <>
-    this is a block <Icon icon="facehappy" aria-label="Happy face" block /> icon
-  </>
-);
-
-export const CustomColor = () => (
-  <>
-    this is a colorful <Icon icon="facehappy" aria-label="Pink happy face" color="pink" /> icon
-  </>
-);

src/components/Icon.tsx

@@ -2,17 +2,14 @@ import React, { FunctionComponent } from 'react';
 import { styled } from '@storybook/theming';
 import { icons } from './shared/icons';
 
-const Svg = styled('svg', { shouldForwardProp: (prop) => !['block', 'color'].includes(prop) })<
-  Partial<Props>
->`
-  display: ${(props) => (props.block ? 'block' : 'inline-block')};
-  vertical-align: middle;
-
+const Svg = styled.svg`
+  display: inline-block;
   shape-rendering: inherit;
   transform: translate3d(0, 0, 0);
+  vertical-align: middle;
 
   path {
-    fill: ${(props) => props.color};
+    fill: currentColor;
   }
 `;
 
@@ -23,23 +20,14 @@ const Svg = styled('svg', { shouldForwardProp: (prop) => !['block', 'color'].inc
  * - *decorative only*: for example, it illustrates a label next to it. We must ensure that it is ignored by screen readers, by setting `aria-hidden` attribute (ex: `<Icon icon="check" aria-hidden />`)
  * - *non-decorative*: it means that it delivers information. For example, an icon as only child in a button. The meaning can be obvious visually, but it must have a proper text alternative via `aria-label` for screen readers. (ex: `<Icon icon="print" aria-label="Print this document" />`)
  */
-export const Icon: FunctionComponent<Props> = ({
-  icon,
-  block = false,
-  color = 'currentColor',
-  ...props
-}: Props) => {
+export const Icon: FunctionComponent<Props> = ({ icon, ...props }: Props) => {
   return (
-    <Svg viewBox="0 0 1024 1024" width="20px" height="20px" block={block} color={color} {...props}>
+    <Svg viewBox="0 0 1024 1024" width="20px" height="20px" {...props}>
       <path d={icons[icon]} />
     </Svg>
   );
 };
 
 interface Props {
   icon: keyof typeof icons;
-  /** Pass this prop to add display: block to the Icon */
-  block?: boolean;
-  /** Set a custom color for the Icon */
-  color?: string;
 }

src/components/marketing/Breadcrumb.tsx

@@ -22,14 +22,18 @@ const BreadcrumbInner = styled.div`
   }
 `;
 
+const BreadcrumbIcon = styled(Icon)`
+  color: ${color.mediumdark};
+`;
+
 export const Breadcrumb: FunctionComponent<Props> = ({
   children,
   linkWrapper,
   ...props
 }: Props) => (
   <BreadcrumbInner>
     <BreadcrumbLink tertiary LinkWrapper={linkWrapper} {...props}>
-      <Icon icon="arrowleft" color={color.mediumdark} />
+      <BreadcrumbIcon icon="arrowleft" />
       {children}
     </BreadcrumbLink>
   </BreadcrumbInner>