Merge pull request #98 from Synthetixio/feat/icon-pack

feat: Synthetix icon component added

src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,18 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { Icon } from './Icon';
+
+export default {
+  title: 'Icon',
+  component: Icon,
+  decorators: [(Story) => <Story />]
+} as ComponentMeta<typeof Icon>;
+
+const Template: ComponentStory<typeof Icon> = (args) => <Icon {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  name: 'Archive',
+  className: 'ui-text-2xl dark:ui-text-white'
+};

src/components/Icon/Icon.tsx

@@ -0,0 +1,87 @@
+import clsx from 'clsx';
+
+export interface IconProps {
+  name: SynthetixIcon;
+  className?: string;
+  cursorPointer?: boolean;
+  onClick?: () => void;
+}
+
+export const Icon: React.FC<IconProps> = ({
+  name,
+  cursorPointer = false,
+  className = 'text-lg',
+  onClick
+}) => {
+  return (
+    <i
+      aria-hidden='true'
+      className={clsx(
+        `synthetix-${name}`,
+        {
+          'ui-cursor-pointer': cursorPointer || !!onClick
+        },
+        className
+      )}
+      onClick={onClick}
+    />
+  );
+};
+
+export type SynthetixIcon =
+  | 'Archive'
+  | 'Bell'
+  | 'Bin'
+  | 'Bottom-2'
+  | 'Bottom-3'
+  | 'Bottom'
+  | 'Burger-indent'
+  | 'Burger'
+  | 'Burn'
+  | 'Caution'
+  | 'Chart'
+  | 'Clock'
+  | 'Collapse'
+  | 'Comment'
+  | 'Copy'
+  | 'Dashboard'
+  | 'Earn'
+  | 'Edit'
+  | 'Exit'
+  | 'Expand'
+  | 'Filter'
+  | 'Governance'
+  | 'Grid'
+  | 'Heart'
+  | 'Horizontal'
+  | 'Image'
+  | 'Left-2'
+  | 'Left-3'
+  | 'Left-4'
+  | 'Left'
+  | 'Link-off'
+  | 'List'
+  | 'Megaphone'
+  | 'Mint'
+  | 'Minus'
+  | 'Open-in-new'
+  | 'Plus'
+  | 'Right-2'
+  | 'Right-3'
+  | 'Right-4'
+  | 'Right'
+  | 'rocket'
+  | 'Search'
+  | 'Settings'
+  | 'Small-Cross'
+  | 'Small-Plus'
+  | 'Sort'
+  | 'Stake'
+  | 'Switch'
+  | 'Tick'
+  | 'Top-2'
+  | 'Top-3'
+  | 'Top'
+  | 'Vertical'
+  | 'Vote'
+  | 'Wallet';

src/components/index.ts

@@ -16,6 +16,7 @@ import { Dialog, DialogProps } from './Dialog/Dialog';
 import { Dropdown, DropdownProps } from './Dropdown/Dropdown';
 import { ExternalLink, ExternalLinkProps } from './ExternalLink/ExternalLink';
 import { FieldAttributesProps } from './FieldAttributes/FieldAttributes';
+import { Icon, IconProps } from './Icon/Icon';
 import { IconButton, IconButtonProps } from './IconButton/IconButton';
 import { Pagination, PaginationProps } from './Pagination/Pagination';
 import { Radio, RadioProps } from './Radio/Radio';
@@ -37,6 +38,7 @@ export {
   Dialog,
   Dropdown,
   ExternalLink,
+  Icon,
   IconButton,
   Pagination,
   Radio,
@@ -61,6 +63,7 @@ export type {
   ExternalLinkProps,
   FieldAttributesProps,
   IconButtonProps,
+  IconProps,
   PaginationProps,
   RadioProps,
   SelectorProps,