@indico-data/design-system 2.1.2 → 2.2.0

package/src/components/icons/Icon.mdx

@@ -0,0 +1,49 @@
+import { Meta, Canvas, Controls, Story } from '@storybook/blocks';
+import * as IconStories from './Icon.stories';
+import { Col, Row } from '../grid/';
+
+<Meta title="Components/Icon" name="Icon" of={IconStories} />
+
+# Icon
+
+The `Icon` component provides unified rendering of both custom SVG icons (Indicons) and FontAwesome icons.
+
+<Canvas
+  of={IconStories.DefaultIcon}
+  source={{
+    code: `<Icon name="indico-o" />`,
+  }}
+/>
+
+## Props
+
+<Controls of={IconStories.DefaultIcon} />
+
+## Sizes
+
+The `Icon` component supports five predefined sizes:
+
+<Story of={IconStories.IconStates} />
+
+## Custom Styling
+
+You can use the `className` prop to apply custom styles to the icons.
+
+<Story of={IconStories.CustomStyledIcon} />
+```tsx // .tsx
+<Icon name="fa-mountain-sun" className="color-primary-600" />
+```
+
+## Indicons (Custom Icons)
+
+Indicons are custom SVG icons created specifically for our design system. Below is a list of all available custom icons.
+
+<Story of={IconStories.Indicons} />
+## Font Awesome Icons
+
+Font Awesome provides a wide range of icons for various purposes. Below is a list
+of FontAwesome icons available in our design system. Use the search bar to find specific icons, and navigate
+through the pages to explore all icons.
+
+<Story of={IconStories.FontAwesomeIcons} />
+```

package/src/components/icons/Icon.stories.tsx

@@ -0,0 +1,248 @@
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import Icon from './Icon';
+import { IconProps, IconSizes } from './types';
+
+import { Row, Col } from '../grid/';
+import { Button } from '../button';
+import { iconNames } from 'build/generated/iconTypes';
+
+const meta: Meta = {
+  title: 'Components/Icon',
+  component: Icon,
+  argTypes: {
+    id: {
+      control: 'text',
+      description: 'Unique identifier for the icon',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    name: {
+      control: 'select',
+      options: iconNames,
+      description: 'The name of the icon',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    ariaLabel: {
+      control: 'text',
+      description: 'Accessible label for the icon',
+      table: {
+        type: { summary: 'string' },
+        category: 'accessibility',
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional custom class names',
+      table: {
+        type: { summary: 'string' },
+        category: 'styling',
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Size of the icon',
+      table: {
+        type: { summary: 'xs | sm | md | lg | xl' },
+        category: 'styling',
+      },
+    },
+    style: {
+      control: 'object',
+      description: 'Inline styles for the icon',
+      table: {
+        type: { summary: 'React.CSSProperties' },
+        category: 'styling',
+      },
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Click event handler',
+      table: {
+        type: { summary: 'MouseEventHandler<SVGElement>' },
+        category: 'callbacks',
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<IconProps>;
+
+export const DefaultIcon: Story = {
+  args: {
+    name: 'indico-o',
+    size: 'md',
+  },
+};
+
+export const IconStates: Story = {
+  render: (args) => {
+    const sizes: IconSizes[] = ['xs', 'sm', 'md', 'lg', 'xl'];
+    const rems = ['0.6rem', '0.75rem', '1rem', '1.5rem', '2rem'];
+    return (
+      <Row>
+        {sizes.map((size, idx) => (
+          <Col xs={2} key={`${args.name}-${size}`}>
+            <div style={{ height: 32 }}>
+              <Icon name={args.name} size={size} />
+            </div>
+            <div className="mt-2 text-body-2">{`${size} (${rems[idx]})`}</div>
+          </Col>
+        ))}
+      </Row>
+    );
+  },
+  args: {
+    name: 'fa-rocket',
+  },
+};
+
+export const CustomStyledIcon: Story = {
+  render: () => {
+    return <Icon name="fa-mountain-sun" className="color-primary-600" />;
+  },
+};
+
+export const Indicons: Story = {
+  render: (args) => {
+    const [searchQuery, setSearchQuery] = useState('');
+
+    // Filter custom icons based on the search query
+    const filteredIcons = iconNames.filter(
+      (iconName) =>
+        !iconName.startsWith('fa') && iconName.toLowerCase().includes(searchQuery.toLowerCase()),
+    );
+
+    const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setSearchQuery(event.target.value);
+    };
+
+    return (
+      <div>
+        <Row className="mb-5 text-align--center">
+          <Col xs={12}>
+            <input
+              type="text"
+              placeholder="Search Indicons..."
+              value={searchQuery}
+              onChange={handleSearchChange}
+              className="border-primary rounded pa-2"
+              style={{
+                width: '80%',
+                maxWidth: '400px',
+              }}
+            />
+          </Col>
+        </Row>
+        <Row>
+          {filteredIcons.map((iconName) => (
+            <Col xs={6} sm={4} md={3} lg={2} key={iconName} className="text-align--center">
+              <div className="pa-3">
+                <Icon name={iconName} size={args.size} />
+                <div className="mt-2 text-body-2">{iconName}</div>
+              </div>
+            </Col>
+          ))}
+        </Row>
+      </div>
+    );
+  },
+  args: {
+    size: 'md',
+  },
+};
+
+export const FontAwesomeIcons: Story = {
+  render: (args) => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const [searchQuery, setSearchQuery] = useState('');
+    const iconsPerPage = 60;
+
+    // Filter FontAwesome icons based on the search query
+    const filteredIcons = iconNames.filter(
+      (iconName) =>
+        iconName.startsWith('fa') && iconName.toLowerCase().includes(searchQuery.toLowerCase()),
+    );
+
+    // Calculate the indexes of the icons to display
+    const indexOfLastIcon = currentPage * iconsPerPage;
+    const indexOfFirstIcon = indexOfLastIcon - iconsPerPage;
+
+    const currentIcons = filteredIcons.slice(indexOfFirstIcon, indexOfLastIcon);
+    const totalPages = Math.ceil(filteredIcons.length / iconsPerPage);
+
+    const handlePageChange = (direction: 'next' | 'prev') => {
+      if (direction === 'next' && currentPage < totalPages) {
+        setCurrentPage(currentPage + 1);
+      } else if (direction === 'prev' && currentPage > 1) {
+        setCurrentPage(currentPage - 1);
+      }
+    };
+
+    const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setSearchQuery(event.target.value);
+      setCurrentPage(1);
+    };
+
+    return (
+      <div>
+        <Row className="mb-5 text-align--center">
+          <Col xs={12}>
+            <input
+              type="text"
+              placeholder="Search Font Awesome Icons..."
+              value={searchQuery}
+              onChange={handleSearchChange}
+              className="border-primary rounded pa-2"
+              style={{
+                width: '80%',
+                maxWidth: '400px',
+              }}
+            />
+          </Col>
+        </Row>
+        <Row>
+          {currentIcons.map((iconName) => (
+            <Col xs={6} sm={4} md={3} lg={2} key={iconName} className="mb-5 text-align--center">
+              <div className="pa-3">
+                <Icon name={iconName} size={args.size} />
+                <div className="mt-2 text-body-2">{iconName}</div>
+              </div>
+            </Col>
+          ))}
+        </Row>
+        <Row className="mb-5  text-align--center">
+          <Col xs={12}>
+            Page {currentPage} of {totalPages} ({filteredIcons.length} icons)
+          </Col>
+          <Col xs={12} className="text-align--center">
+            <Button
+              onClick={() => handlePageChange('prev')}
+              isDisabled={currentPage === 1}
+              ariaLabel="Previous Page"
+              className="mt-1 mr-1"
+            >
+              Previous
+            </Button>
+            <Button
+              onClick={() => handlePageChange('next')}
+              isDisabled={currentPage === totalPages}
+              ariaLabel="Next Page"
+              className="mt-1 ml-1"
+            >
+              Next
+            </Button>
+          </Col>
+        </Row>
+      </div>
+    );
+  },
+  args: {
+    size: 'md',
+  },
+};

package/src/components/icons/Icon.tsx

@@ -0,0 +1,45 @@
+import React, { ReactElement, cloneElement } from 'react';
+import classNames from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import * as solidIcons from '@fortawesome/free-solid-svg-icons';
+import { IconProps } from './types';
+import { indicons } from './indicons';
+
+const kebabToCamel = (str?: string) => {
+  if (!str) return str;
+
+  return str.replace(/-./g, (match) => match.charAt(1).toUpperCase());
+};
+
+const Icon: React.FC<IconProps> = ({ name, size = 'md', className, ariaLabel, ...props }) => {
+  const camelCaseName = kebabToCamel(name);
+  const faIcon = solidIcons[camelCaseName as keyof typeof solidIcons] as IconDefinition | undefined;
+  const customIcon = indicons[name as keyof typeof indicons];
+
+  const label = ariaLabel || `${name} Icon`;
+  if (!faIcon && !customIcon) {
+    console.error(`Icon "${name}" not found`);
+    return null;
+  }
+
+  const iconClasses = classNames(
+    'icon',
+    {
+      [`icon--${size}`]: size,
+    },
+    className,
+  );
+
+  return faIcon ? (
+    <FontAwesomeIcon icon={faIcon} className={iconClasses} aria-label={label} {...props} />
+  ) : (
+    cloneElement(customIcon as ReactElement, {
+      className: iconClasses,
+      'aria-label': label,
+      ...props,
+    })
+  );
+};
+
+export default Icon;

package/src/components/icons/__tests__/Icon.test.tsx

@@ -0,0 +1,104 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Icon from '../Icon';
+
+describe('Icon Component', () => {
+  describe('FontAwesome Icons', () => {
+    const faIconName = 'fa-arrow-down';
+    const labelText = `${faIconName} Icon`;
+
+    test('renders FontAwesome icon', () => {
+      render(<Icon name={faIconName} />);
+      const icon = screen.getByLabelText(labelText);
+      expect(icon).toBeInTheDocument();
+      expect(icon).toHaveClass(faIconName);
+    });
+
+    test('applies size class to FontAwesome icon', () => {
+      render(<Icon name={faIconName} size="lg" />);
+      const icon = screen.getByLabelText(labelText);
+      expect(icon).toHaveClass('icon--lg');
+    });
+
+    test('applies custom className to FontAwesome icon', () => {
+      render(<Icon name={faIconName} className="custom-class" />);
+      const icon = screen.getByLabelText(labelText);
+      expect(icon).toHaveClass('custom-class');
+    });
+
+    test('applies style to FontAwesome icon', () => {
+      render(<Icon name={faIconName} style={{ color: 'red' }} />);
+      const icon = screen.getByLabelText(labelText);
+      expect(icon).toHaveStyle('color: red');
+    });
+
+    test('uses ariaLabel prop for FontAwesome icon', () => {
+      render(<Icon name={faIconName} ariaLabel="custom label" />);
+      const icon = screen.getByLabelText('custom label');
+      expect(icon).toBeInTheDocument();
+    });
+
+    test('applies id to FontAwesome icon', () => {
+      render(<Icon name={faIconName} id="test-id" />);
+      const icon = screen.getByLabelText(labelText);
+      expect(icon).toHaveAttribute('id', 'test-id');
+    });
+
+    test('handles onClick event for FontAwesome icon', async () => {
+      const handleClick = jest.fn();
+      render(<Icon name={faIconName} onClick={handleClick} />);
+      const icon = screen.getByLabelText(labelText);
+      await userEvent.click(icon);
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Custom Icons (Indicons)', () => {
+    const customIconName = 'indico-o';
+    const labelText = `${customIconName} Icon`;
+
+    test('renders custom icon', () => {
+      render(<Icon name={customIconName} />);
+      const icon = screen.getByLabelText(labelText);
+      expect(icon).toBeInTheDocument();
+    });
+
+    test('applies size class to custom icon', () => {
+      render(<Icon name={customIconName} size="lg" />);
+      const icon = screen.getByLabelText(labelText);
+      expect(icon).toHaveClass('icon--lg');
+    });
+
+    test('applies custom className to custom icon', () => {
+      render(<Icon name={customIconName} className="custom-class" />);
+      const icon = screen.getByLabelText(labelText);
+      expect(icon).toHaveClass('custom-class');
+    });
+
+    test('applies style to custom icon', () => {
+      render(<Icon name={customIconName} style={{ color: 'blue' }} />);
+      const icon = screen.getByLabelText(labelText);
+      expect(icon).toHaveStyle('color: blue');
+    });
+
+    test('uses ariaLabel prop for custom icon', () => {
+      render(<Icon name={customIconName} ariaLabel="custom label" />);
+      const icon = screen.getByLabelText('custom label');
+      expect(icon).toBeInTheDocument();
+    });
+
+    test('applies id to custom icon', () => {
+      render(<Icon name={customIconName} id="test-id" />);
+      const icon = screen.getByLabelText(labelText);
+      expect(icon).toHaveAttribute('id', 'test-id');
+    });
+
+    test('handles onClick event for custom icon', async () => {
+      const handleClick = jest.fn();
+      render(<Icon name={customIconName} onClick={handleClick} />);
+      const icon = screen.getByLabelText(labelText);
+      await userEvent.click(icon);
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/components/icons/index.ts

@@ -0,0 +1 @@
+export { default as Icon } from './Icon';

package/src/{legacy/components/Icon → components/icons}/indicons.tsx

@@ -48,22 +48,22 @@ const indicons = {
     </svg>
   ),
   bookmark: (
-    <svg viewBox="0 0 24 24">
+    <svg viewBox="0 0 24 24" fill="currentColor">
       <path d="M20.5 1C20 .5 19.3.2 18.6.2H5.4C4.7.2 4 .5 3.5 1s-.8 1.2-.8 1.8v20.9l9.3-4 9.3 4V2.8c0-.6-.3-1.3-.8-1.8m-1.6 19L12 17l-6.9 3V2.7h13.8z" />
     </svg>
   ),
   bookmarks: (
-    <svg viewBox="0 0 24 24">
+    <svg viewBox="0 0 24 24" fill="currentColor">
       <path d="M15.4 6.5c.1 0 .1 0 .1.1v14l-4.8-2.2-.9-.4-.9.4-4.8 2.2v-14c0-.1 0-.1.1-.1zm0-2.2H4.2C3 4.3 2 5.4 2 6.6V24l7.9-3.6 7.9 3.6V6.6c-.1-1.2-1.1-2.3-2.4-2.3m4.5-2v18.3H22V2.3C22 1 21 0 19.8 0H5.5v2.2h14.3s.1 0 .1.1" />
     </svg>
   ),
   'bookmark-saved': (
-    <svg viewBox="0 0 24 24">
+    <svg viewBox="0 0 24 24" fill="currentColor">
       <path d="m16.8 7.9-3.6-3.6 1.5-1.5 2 2 5-4.8 1.5 1.5zm.2 3.5v8.8l-6.9-2.9-6.9 2.9V2.9h6.7V.5H3.5c-.7 0-1.4.3-1.9.8S.8 2.4.8 3.1V24l9.3-4 9.3 4V11.4z" />
     </svg>
   ),
   branch: (
-    <svg viewBox="0 0 642 514">
+    <svg viewBox="0 0 642 514" fill="currentColor">
       <path
         d="M385 321H257c-17.67 0-32 14.33-32 32v128c0 17.67 14.33 32 32 32h128c17.67 0 32-14.33 32-32V353c0-17.67-14.33-32-32-32zM193 33c0-17.67-14.33-32-32-32H33C15.33 1 1 15.33 1 33v128c0 17.67 14.33 32 32 32h95.72l73.16 128.04C212.98 301.98 233.4 289 257 289h.28L193 176.51V129h224V65H193V33zM609 1H481c-17.67 0-32 14.33-32 32v128c0 17.67 14.33 32 32 32h128c17.67 0 32-14.33 32-32V33c0-17.67-14.33-32-32-32z"
         fill="currentColor"
@@ -71,7 +71,7 @@ const indicons = {
     </svg>
   ),
   calendar: (
-    <svg viewBox="0 0 24 24">
+    <svg viewBox="0 0 24 24" fill="currentColor">
       <path d="M12 12c-.6 0-1 .5-1 1 0 .6.5 1 1 1s1-.5 1-1-.4-1-1-1M12 17c-.6 0-1 .5-1 1 0 .6.5 1 1 1s1-.5 1-1-.4-1-1-1M7.1 12c-.6 0-1 .5-1 1 0 .6.5 1 1 1 .6 0 1-.5 1-1 .1-.5-.4-1-1-1M7.1 17c-.6 0-1 .5-1 1 0 .6.5 1 1 1 .6 0 1-.5 1-1 .1-.5-.4-1-1-1M16.9 17c-.6 0-1 .5-1 1 0 .6.5 1 1 1 .6 0 1-.5 1-1s-.5-1-1-1M16.9 12c-.6 0-1 .5-1 1 0 .6.5 1 1 1 .6 0 1-.5 1-1s-.5-1-1-1" />
       <path d="M19.1 2.4h-1.2V1c0-.6-.4-1-1-1s-1 .4-1 1v1.4H8.1V1c0-.6-.4-1-1-1s-1 .4-1 1v1.4H4.9c-2.1 0-3.7 1.7-3.7 3.7v14.1c0 2.1 1.7 3.7 3.7 3.7h14.3c2.1 0 3.7-1.7 3.7-3.7V6.1c0-2-1.7-3.7-3.8-3.7m-14.2 2h14.3c1 0 1.7.8 1.7 1.7v1.3H3.1V6.1c0-.9.8-1.7 1.8-1.7M19.1 22H4.9c-1 0-1.7-.8-1.7-1.7V9.4h17.7v10.9c0 .9-.8 1.7-1.8 1.7" />
     </svg>
@@ -173,17 +173,17 @@ const indicons = {
     </svg>
   ),
   cog: (
-    <svg viewBox="0 0 24 24">
+    <svg viewBox="0 0 24 24" fill="currentColor">
       <path d="M15.4 23.4c-.5 0-.9-.1-1.3-.3l-1.6-.8q-.45-.15-.9 0l-1.6.8c-1 .5-2 .4-2.9-.1l-2.2-1.3c-.9-.5-1.4-1.4-1.5-2.4l-.1-1.8c0-.3-.2-.6-.4-.8l-1.5-1C.5 15.2 0 14.3 0 13.3v-2.5c0-1 .5-1.9 1.3-2.5l1.5-1c.3-.2.4-.5.4-.8l.1-1.8c.1-1 .6-1.9 1.5-2.4L7.1 1C8 .5 9 .4 9.9.9l1.6.8q.45.15.9 0L14 .9c1-.5 2-.4 2.9.1l2.2 1.3c.9.5 1.4 1.4 1.5 2.4l.1 1.8c0 .3.2.6.4.8l1.5 1c.8.6 1.3 1.5 1.3 2.5v2.5c0 1-.5 1.9-1.3 2.5l-1.5 1c-.3.2-.4.5-.4.8l-.1 1.8c-.1 1-.6 1.9-1.5 2.4L16.9 23c-.5.3-1 .4-1.5.4M12 20.2c.5 0 .9.1 1.3.3l1.6.8q.45.15.9 0L18 20c.3-.2.5-.5.5-.8l.1-1.8c.1-.9.6-1.8 1.3-2.3l1.5-1c.3-.2.4-.5.4-.8v-2.5c0-.3-.2-.6-.4-.8l-1.5-1c-.8-.5-1.3-1.4-1.3-2.3l-.1-1.8c0-.3-.2-.6-.5-.8l-2.2-1.3q-.45-.3-.9 0l-1.6.8c-.8.4-1.8.4-2.7 0L9 2.7c-.3-.2-.6-.1-.9 0L5.9 4c-.3.1-.5.4-.5.8l-.1 1.8c0 .9-.5 1.8-1.3 2.3l-1.5 1c-.3.2-.5.5-.5.8v2.5c0 .3.2.6.4.8l1.5 1c.8.5 1.3 1.4 1.3 2.3l.1 1.8c0 .3.2.6.5.8L8 21.2q.45.3.9 0l1.6-.8c.6-.1 1-.2 1.5-.2m0-2.8c-2.9 0-5.3-2.4-5.3-5.3S9.1 6.8 12 6.8s5.3 2.4 5.3 5.3-2.4 5.3-5.3 5.3m0-8.7c-1.8 0-3.3 1.5-3.3 3.3s1.5 3.3 3.3 3.3 3.3-1.5 3.3-3.3-1.5-3.3-3.3-3.3" />
     </svg>
   ),
   collection: (
-    <svg viewBox="0 0 24 24">
+    <svg viewBox="0 0 24 24" fill="currentColor">
       <path d="M21 24H3c-1.7 0-3-1.4-3-3V11c0-1.7 1.4-3 3-3h18c1.7 0 3 1.4 3 3v10c0 1.6-1.4 3-3 3M3 9.9c-.6 0-1 .5-1 1v10c0 .6.5 1 1 1h18c.6 0 1-.5 1-1v-10c0-.6-.5-1-1-1zM21.6 5c0-.6-.5-1-1-1H3.3c-.6 0-1 .5-1 1s.5 1 1 1h17.3c.5 0 1-.5 1-1m-2.5-4c0-.6-.5-1-1-1H5.9c-.6 0-1 .5-1 1s.5 1 1 1h12.2c.5 0 1-.4 1-1" />
     </svg>
   ),
   compare: (
-    <svg viewBox="0 0 24 24">
+    <svg viewBox="0 0 24 24" fill="currentColor">
       <path d="M24 5.5c0 .6-.4 1-1 1H3.4l2.8 2.8c.4.4.4 1 0 1.4-.2.2-.4.3-.7.3s-.5-.1-.7-.3L.3 6.2c-.4-.4-.4-1 0-1.4L4.8.3c.4-.4 1-.4 1.4 0s.4 1 0 1.4L3.4 4.5H23c.6 0 1 .4 1 1m-23 14h19.6l-2.8 2.8c-.4.4-.4 1 0 1.4s1 .4 1.4 0l4.5-4.5c.4-.4.4-1 0-1.4l-4.5-4.5c-.2-.2-.4-.3-.7-.3s-.5.1-.7.3c-.4.4-.4 1 0 1.4l2.8 2.8H1c-.6 0-1 .4-1 1s.4 1 1 1" />
     </svg>
   ),
@@ -261,7 +261,7 @@ const indicons = {
     </svg>
   ),
   document: (
-    <svg viewBox="0 0 24 24">
+    <svg viewBox="0 0 24 24" fill="currentColor">
       <path d="M15.6.3q-.45-.3-.9-.3H3.9c-.8 0-1.5.9-1.5 1.7v20.6c0 .8.7 1.7 1.5 1.7H20c.8 0 1.5-.9 1.5-1.7V6.8c0-.3-.1-.6-.3-.8zm4.1 21.8H4.3V1.9h10.1V6c0 .7.5 1.2 1.2 1.2h4.1z" />
     </svg>
   ),
@@ -434,7 +434,7 @@ const indicons = {
     </svg>
   ),
   'indico-o': (
-    <svg viewBox="0 0 24 24">
+    <svg viewBox="0 0 24 24" fill="currentColor">
       <path d="M13.8 10.2h-3.6v3.6h3.6zm-8.9 0c.9-3.1 3.7-5.4 7.1-5.4s6.2 2.3 7.1 5.5H24C23.1 4.5 18 0 12 0S.9 4.5.1 10.2zM19 13.8c-.8 3.1-3.6 5.4-7 5.4s-6.2-2.3-7-5.4H.1C1 19.6 6 24 12 24s11-4.4 11.9-10.2z" />
     </svg>
   ),
@@ -455,7 +455,7 @@ const indicons = {
     </svg>
   ),
   key: (
-    <svg viewBox="0 0 24 24">
+    <svg viewBox="0 0 24 24" fill="currentColor">
       <path d="M19.5 7c-.7.7-1.9.7-2.7 0-.8-.8-.8-2 0-2.8.7-.7 1.9-.7 2.7 0 .8.8.8 2 0 2.8m2.8-4.6c-2.7-3-7.4-3.2-10.2-.3-2 1.9-2.5 4.5-1.9 6.9L.6 18.7c-.3.3-.4.6-.4 1l-.2 3c0 .5.4.8.8.8l3.7-.3c.3 0 .6-.2.9-.4v-3.3h3.1v-3.1h3.7c1.6-1.5 2.7-2.6 2.7-2.6 2.5.7 5.4 0 7.2-2.1 2.5-2.6 2.5-6.7.2-9.3" />
     </svg>
   ),
@@ -490,7 +490,7 @@ const indicons = {
     </svg>
   ),
   logout: (
-    <svg viewBox="0 0 24 24">
+    <svg viewBox="0 0 24 24" fill="currentColor">
       <path d="M13.8 24h-10C1.7 24 0 22.3 0 20.2V3.8C0 1.8 1.6.1 3.7 0h10.1c2.1 0 3.8 1.7 3.8 3.8v1.5c0 .6-.4 1-1 1s-1-.4-1-1V3.8c0-1-.8-1.8-1.8-1.8h-10c-1 .1-1.8.9-1.8 1.8v16.4c0 1 .8 1.8 1.8 1.8h10c1 0 1.8-.8 1.8-1.8v-1.5c0-.6.4-1 1-1s1 .4 1 1v1.5c0 2.1-1.7 3.8-3.8 3.8m9.9-12.7-3.9-3.9c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l2.2 2.2H8.2c-.6 0-1 .4-1 1s.4 1 1 1h12.4l-2.2 2.3c-.4.4-.4 1 0 1.4.2.2.4.3.7.3s.5-.1.7-.3l3.9-4c.4-.4.4-1 0-1.4" />
     </svg>
   ),
@@ -567,7 +567,7 @@ const indicons = {
     </svg>
   ),
   'object-detection': (
-    <svg viewBox="0 0 100 100">
+    <svg viewBox="0 0 100 100" fill="currentColor">
       <g>
         <path d="M0,91V66h10v24h24v10H9C4,100,0,96,0,91z" />
         <path d="M90,90H66v10h25c5,0,9-4,9-9V66H90V90z" />
@@ -672,7 +672,7 @@ const indicons = {
     </svg>
   ),
   reset: (
-    <svg viewBox="0 0 24 24">
+    <svg viewBox="0 0 24 24" fill="currentColor">
       <path d="M23 7.3c-.6-1.4-1.5-2.7-2.6-3.8S18 1.5 16.6.9 13.6 0 12 0c-1.8 0-3.4.4-5 1.1-1.5.7-2.8 1.6-3.9 2.8V.1H.8v8h8V5.7H4.6c.9-1 1.9-1.8 3.1-2.4 1.3-.7 2.7-1 4.2-1 2.7 0 5 .9 6.9 2.8s2.8 4.2 2.8 6.9-.9 5-2.8 6.8c-1.9 1.9-4.2 2.8-6.9 2.8q-3.6 0-6.3-2.4c-2.7-2.4-2.9-3.6-3.2-5.9v-.1H0v.2C.4 16.5 1.7 19 4 21s4.9 3 8 3c1.7 0 3.2-.3 4.7-.9 1.4-.6 2.7-1.5 3.8-2.6s2-2.4 2.6-3.8.9-3 .9-4.7-.3-3.2-1-4.7" />
     </svg>
   ),
@@ -692,7 +692,7 @@ const indicons = {
     </svg>
   ),
   'search-thin': (
-    <svg viewBox="0 0 24 24">
+    <svg viewBox="0 0 24 24" fill="currentColor">
       <path d="M23.7 22.3 17 15.6c1.4-1.7 2.2-3.8 2.2-6.1 0-5.3-4.3-9.6-9.6-9.6C4.3 0 0 4.3 0 9.6s4.3 9.6 9.6 9.6c2.3 0 4.3-.8 6-2.1l6.7 6.7c.2.2.5.3.7.3.3 0 .5-.1.7-.3.4-.5.4-1.1 0-1.5M9.6 17.1C5.4 17.1 2 13.7 2 9.6S5.4 2 9.6 2s7.6 3.4 7.6 7.6-3.4 7.5-7.6 7.5" />
     </svg>
   ),
@@ -710,7 +710,7 @@ const indicons = {
     </svg>
   ),
   'sort-down': (
-    <svg viewBox="0 0 24 24">
+    <svg viewBox="0 0 24 24" fill="currentColor">
       <path d="M13.9 17.8h-3.1c-.4 0-.8.3-.8.8v.8c0 .4.3.8.8.8h3.1c.4 0 .8-.3.8-.8v-.8c0-.5-.3-.8-.8-.8m-6.7.4H5V1.9c0-.4-.3-.8-.8-.8h-.7c-.4 0-.8.3-.8.8v16.2H.6c-.3 0-.6.3-.6.6 0 .1 0 .3.2.4l3.3 3.5c.2.2.6.2.8 0l3.3-3.5c.2-.2.2-.6 0-.8-.2-.1-.3-.1-.4-.1m12.9-9.7h-9.3c-.4 0-.8.3-.8.8v.7c0 .4.3.8.8.8h9.3c.4 0 .8-.3.8-.8v-.7c0-.5-.3-.8-.8-.8m3.1-4.7H10.8c-.4 0-.8.3-.8.8v.8c0 .4.3.8.8.8h12.4c.4 0 .8-.3.8-.8v-.8c0-.4-.3-.8-.8-.8M17 13.1h-6.2c-.4 0-.8.3-.8.8v.8c0 .4.3.8.8.8H17c.4 0 .8-.3.8-.8v-.8c0-.4-.4-.8-.8-.8" />
     </svg>
   ),
@@ -749,7 +749,7 @@ const indicons = {
     </svg>
   ),
   text: (
-    <svg viewBox="0 0 24 24">
+    <svg viewBox="0 0 24 24" fill="currentColor">
       <path d="M16 4V2H0v2h7v18h2V4zM24.2 9h-10v2h4v11h2V11h4z" />
     </svg>
   ),

package/src/components/icons/styles/Icon.scss

@@ -0,0 +1,23 @@
+$sizes: (
+  xs: var(--pf-icon-size-xs),
+  sm: var(--pf-icon-size-sm),
+  md: var(--pf-icon-size-md),
+  lg: var(--pf-icon-size-lg),
+  xl: var(--pf-icon-size-xl),
+);
+
+@mixin icon-size($name, $value) {
+  &--#{$name} {
+    width: $value;
+    height: $value;
+    font-size: $value;
+  }
+}
+
+.icon {
+  display: inline-block;
+
+  @each $name, $value in $sizes {
+    @include icon-size($name, $value);
+  }
+}

package/src/components/icons/types.ts

@@ -0,0 +1,12 @@
+import { MouseEventHandler } from 'react';
+import { IconName, PermafrostComponent } from '@/types';
+
+export type IconSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export type IconProps = PermafrostComponent & {
+  name: IconName;
+  ariaLabel?: string;
+  size?: IconSizes;
+  style?: React.CSSProperties;
+  onClick?: MouseEventHandler<SVGElement>;
+};

package/src/components/index.ts

@@ -1,2 +1,3 @@
 export { Container, Col, Row } from './grid';
 export { Button } from './button';
+export { Icon } from './icons';

package/src/index.ts

@@ -1,8 +1,6 @@
 import './styles/index.scss';
 
 export { GlobalStyles } from './legacy/styles/globals/index';
-export { faIcons } from './legacy/components/Icon/faIcons';
-export { indicons } from './legacy/components/Icon/indicons';
 
 export {
   ANIMATION,
@@ -29,7 +27,6 @@ export {
   Drawer,
   DatePicker,
   EditableInput,
-  Icon,
   IconButton,
   ListTable,
   LoadingAwareContainer,
@@ -63,3 +60,4 @@ export { numberUtils, stringUtils, colorUtils } from './legacy/utils';
 // New Components
 export { Container, Row, Col } from './components/grid';
 export { Button } from './components/button';
+export { Icon } from './components/icons';

package/src/legacy/components/Accordion/Accordion.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { Icon } from '@/legacy/components/Icon';
+import { Icon } from '@/components/icons';
 import { PermafrostComponent } from '@/types';
 
 import { StyledAccordion } from './Accordion.styles';
@@ -20,7 +20,7 @@ export const Accordion = (props: Props) => {
     <StyledAccordion className={className} id={id} open={open} data-cy={props['data-cy']}>
       <summary>
         <div className="header-container">
-          <Icon className="toggle-icon" name="chevron-up" size={[14]} />
+          <Icon className="toggle-icon" name="chevron-up" />
           {header ? <h2>{header}</h2> : null}
         </div>
       </summary>