Component/4221 icon (#4499)

* [WIP] Push up icon changes

* Introduce assets

* Create script to generate Icon types based on icons in assets directory

* Change Icon component to use SVGs. Create script to auto generate SVG types. Use an svg transformer to allow for importing SVGs as components

* Update ignores on Icon.assets

* Update generate-assets script to add ignores

* Remove icon test - SVG mock issue. Update Icon docs with color prop

* Fix useStyles for other components

* Update Icon README

* Correct read me

* Reintroduce react-native-svg-asset-plugin

* Provide better typing for svg

app/component-library/components/BaseAvatar/BaseAvatar.tsx

@@ -6,7 +6,7 @@ import { BaseAvatarProps } from './BaseAvatar.types';
 import styleSheet from './BaseAvatar.styles';
 
 const BaseAvatar: React.FC<BaseAvatarProps> = ({ size, style, children }) => {
-  const styles = useStyles(styleSheet, {
+  const { styles } = useStyles(styleSheet, {
     size,
     style,
   });

app/component-library/components/BaseText/BaseText.tsx

@@ -11,7 +11,7 @@ const BaseText: React.FC<BaseTextProps> = ({
   children,
   ...props
 }) => {
-  const styles = useStyles(styleSheet, { variant, style });
+  const { styles } = useStyles(styleSheet, { variant, style });
   return (
     <Text {...props} style={styles.base}>
       {children}

app/component-library/components/Icon/Icon.assets.ts

@@ -0,0 +1,268 @@
+/* eslint-disable import/prefer-default-export */
+///////////////////////////////////////////////////////
+// This is a generated file
+// DO NOT EDIT - Use generate-assets.js
+///////////////////////////////////////////////////////
+import { AssetByIconName, IconName } from './Icon.types';
+import AddOutline from './assets/add-outline.svg';
+import AddSquareFilled from './assets/add-square-filled.svg';
+import Arrow2DownOutline from './assets/arrow-2-down-outline.svg';
+import Arrow2LeftOutline from './assets/arrow-2-left-outline.svg';
+import Arrow2RightOutline from './assets/arrow-2-right-outline.svg';
+import Arrow2UpOutline from './assets/arrow-2-up-outline.svg';
+import ArrowDownOutline from './assets/arrow-down-outline.svg';
+import ArrowLeftOutline from './assets/arrow-left-outline.svg';
+import ArrowRightOutline from './assets/arrow-right-outline.svg';
+import ArrowUpOutline from './assets/arrow-up-outline.svg';
+import BankFilled from './assets/bank-filled.svg';
+import BankTokenFilled from './assets/bank-token-filled.svg';
+import BookFilled from './assets/book-filled.svg';
+import BookmarkFilled from './assets/bookmark-filled.svg';
+import CalculatorFilled from './assets/calculator-filled.svg';
+import CardFilled from './assets/card-filled.svg';
+import CardPosFilled from './assets/card-pos-filled.svg';
+import CardTokenFilled from './assets/card-token-filled.svg';
+import CategoryFilled from './assets/category-filled.svg';
+import ChartFilled1 from './assets/chart-filled-1.svg';
+import ChartFilled from './assets/chart-filled.svg';
+import CheckOutline from './assets/check-outline.svg';
+import ClockFilled from './assets/clock-filled.svg';
+import CloseOutline from './assets/close-outline.svg';
+import CodeCircleFilled from './assets/code-circle-filled.svg';
+import CoinFilled from './assets/coin-filled.svg';
+import ConnectFilled from './assets/connect-filled.svg';
+import CopyFilled from './assets/copy-filled.svg';
+import CopySuccessFilled from './assets/copy-success-filled.svg';
+import DangerFilled from './assets/danger-filled.svg';
+import DarkFilled from './assets/dark-filled.svg';
+import DataFilled from './assets/data-filled.svg';
+import DiagramOutline from './assets/diagram-outline.svg';
+import DocumentCodeFilled from './assets/document-code-filled.svg';
+import EditFilled from './assets/edit-filled.svg';
+import EraserFilled from './assets/eraser-filled.svg';
+import ExpandOutline from './assets/expand-outline.svg';
+import ExploreFilled from './assets/explore-filled.svg';
+import ExportOutline from './assets/export-outline.svg';
+import EyeFilled from './assets/eye-filled.svg';
+import EyeSlashFilled from './assets/eye-slash-filled.svg';
+import FilterOutline from './assets/filter-outline.svg';
+import FlagFilled from './assets/flag-filled.svg';
+import FlashFilled from './assets/flash-filled.svg';
+import FlashSlashFilled from './assets/flash-slash-filled.svg';
+import FullCircleFilled from './assets/full-circle-filled.svg';
+import GasFilled from './assets/gas-filled.svg';
+import GlobalFilled from './assets/global-filled.svg';
+import GlobalSearchFilled from './assets/global-search-filled.svg';
+import GraphFilled from './assets/graph-filled.svg';
+import HeartFilled from './assets/heart-filled.svg';
+import HierarchyFilled from './assets/hierarchy-filled.svg';
+import HomeFilled from './assets/home-filled.svg';
+import ImportOutline from './assets/import-outline.svg';
+import InfoFilled from './assets/info-filled.svg';
+import KeyFilled from './assets/key-filled.svg';
+import LightFilled from './assets/light-filled.svg';
+import Link2Outline from './assets/link-2-outline.svg';
+import LinkOutline from './assets/link-outline.svg';
+import LoadingFilled from './assets/loading-filled.svg';
+import LockCircleFilled from './assets/lock-circle-filled.svg';
+import LockFilled from './assets/lock-filled.svg';
+import LockSlashFilled from './assets/lock-slash-filled.svg';
+import LoginOutline from './assets/login-outline.svg';
+import LogoutOutline from './assets/logout-outline.svg';
+import MenuOutline from './assets/menu-outline.svg';
+import MessageQuestionFilled from './assets/message-question-filled.svg';
+import MessagesFilled from './assets/messages-filled.svg';
+import MinusOutine from './assets/minus-outine.svg';
+import MinusSquareFilled from './assets/minus-square-filled.svg';
+import MobileFilled from './assets/mobile-filled.svg';
+import MoneyFilled from './assets/money-filled.svg';
+import MonitorFilled from './assets/monitor-filled.svg';
+import MoreHorizontalOutline from './assets/more-horizontal-outline.svg';
+import MoreVerticalOutline from './assets/more-vertical-outline.svg';
+import NotificationCircleFilled from './assets/notification-circle-filled.svg';
+import NotificationFilled from './assets/notification-filled.svg';
+import PasswordCheckFilled from './assets/password-check-filled.svg';
+import PeopleFilled from './assets/people-filled.svg';
+import ProgrammingArrowsFilled from './assets/programming-arrows-filled.svg';
+import QuestionFilled from './assets/question-filled.svg';
+import ReceivedOutline from './assets/received-outline.svg';
+import RefreshOutline from './assets/refresh-outline.svg';
+import SaveFilled from './assets/save-filled.svg';
+import ScanBarcodeFilled from './assets/scan-barcode-filled.svg';
+import ScanFilled from './assets/scan-filled.svg';
+import ScanFocusOutline from './assets/scan-focus-outline.svg';
+import ScrollFilled from './assets/scroll-filled.svg';
+import SearchFilled from './assets/search-filled.svg';
+import SecurityCardFilled from './assets/security-card-filled.svg';
+import SecurityCrossFilled from './assets/security-cross-filled.svg';
+import SecurityFilled from './assets/security-filled.svg';
+import SecurityKeyFilled from './assets/security-key-filled.svg';
+import SecuritySearchFilled from './assets/security-search-filled.svg';
+import SecuritySlashFilled from './assets/security-slash-filled.svg';
+import SecurityTickFilled from './assets/security-tick-filled.svg';
+import SecurityTimeFilled from './assets/security-time-filled.svg';
+import SecurityUserFilled from './assets/security-user-filled.svg';
+import Send1Filled from './assets/send-1-filled.svg';
+import Send2Outline from './assets/send-2-outline.svg';
+import SettingFilled from './assets/setting-filled.svg';
+import SlashFilled from './assets/slash-filled.svg';
+import SnapsFilled from './assets/snaps-filled.svg';
+import SnapsMobileFilled from './assets/snaps-mobile-filled.svg';
+import SnapsPlusFilled from './assets/snaps-plus-filled.svg';
+import SpeedometerFilled from './assets/speedometer-filled.svg';
+import StarFilled from './assets/star-filled.svg';
+import StudentFilled from './assets/student-filled.svg';
+import SwapHorizontalOutline from './assets/swap-horizontal-outline.svg';
+import SwapVertivalFilled from './assets/swap-vertival-filled.svg';
+import TagFilled from './assets/tag-filled.svg';
+import TimerTimer from './assets/timer-timer.svg';
+import TrashFilled from './assets/trash-filled.svg';
+import TrendDownFilled from './assets/trend-down-filled.svg';
+import TrendUpFilled from './assets/trend-up-filled.svg';
+import UserAddFilled1 from './assets/user-add-filled-1.svg';
+import UserAddFilled from './assets/user-add-filled.svg';
+import UserCircleAddFilled from './assets/user-circle-add-filled.svg';
+import UserCircleFilled from './assets/user-circle-filled.svg';
+import UserFilled from './assets/user-filled.svg';
+import UserMinusFilled from './assets/user-minus-filled.svg';
+import UserRemoveFilled from './assets/user-remove-filled.svg';
+import UserSearchFilled from './assets/user-search-filled.svg';
+import UserTickFilled from './assets/user-tick-filled.svg';
+import WalletCardFilled from './assets/wallet-card-filled.svg';
+import WalletFilled from './assets/wallet-filled.svg';
+import WalletMoneyFilled from './assets/wallet-money-filled.svg';
+import WarningFilled from './assets/warning-filled.svg';
+
+/**
+ * Asset stored by icon name
+ */
+export const assetByIconName: AssetByIconName = {
+  [IconName.AddOutline]: AddOutline,
+  [IconName.AddSquareFilled]: AddSquareFilled,
+  [IconName.Arrow2DownOutline]: Arrow2DownOutline,
+  [IconName.Arrow2LeftOutline]: Arrow2LeftOutline,
+  [IconName.Arrow2RightOutline]: Arrow2RightOutline,
+  [IconName.Arrow2UpOutline]: Arrow2UpOutline,
+  [IconName.ArrowDownOutline]: ArrowDownOutline,
+  [IconName.ArrowLeftOutline]: ArrowLeftOutline,
+  [IconName.ArrowRightOutline]: ArrowRightOutline,
+  [IconName.ArrowUpOutline]: ArrowUpOutline,
+  [IconName.BankFilled]: BankFilled,
+  [IconName.BankTokenFilled]: BankTokenFilled,
+  [IconName.BookFilled]: BookFilled,
+  [IconName.BookmarkFilled]: BookmarkFilled,
+  [IconName.CalculatorFilled]: CalculatorFilled,
+  [IconName.CardFilled]: CardFilled,
+  [IconName.CardPosFilled]: CardPosFilled,
+  [IconName.CardTokenFilled]: CardTokenFilled,
+  [IconName.CategoryFilled]: CategoryFilled,
+  [IconName.ChartFilled1]: ChartFilled1,
+  [IconName.ChartFilled]: ChartFilled,
+  [IconName.CheckOutline]: CheckOutline,
+  [IconName.ClockFilled]: ClockFilled,
+  [IconName.CloseOutline]: CloseOutline,
+  [IconName.CodeCircleFilled]: CodeCircleFilled,
+  [IconName.CoinFilled]: CoinFilled,
+  [IconName.ConnectFilled]: ConnectFilled,
+  [IconName.CopyFilled]: CopyFilled,
+  [IconName.CopySuccessFilled]: CopySuccessFilled,
+  [IconName.DangerFilled]: DangerFilled,
+  [IconName.DarkFilled]: DarkFilled,
+  [IconName.DataFilled]: DataFilled,
+  [IconName.DiagramOutline]: DiagramOutline,
+  [IconName.DocumentCodeFilled]: DocumentCodeFilled,
+  [IconName.EditFilled]: EditFilled,
+  [IconName.EraserFilled]: EraserFilled,
+  [IconName.ExpandOutline]: ExpandOutline,
+  [IconName.ExploreFilled]: ExploreFilled,
+  [IconName.ExportOutline]: ExportOutline,
+  [IconName.EyeFilled]: EyeFilled,
+  [IconName.EyeSlashFilled]: EyeSlashFilled,
+  [IconName.FilterOutline]: FilterOutline,
+  [IconName.FlagFilled]: FlagFilled,
+  [IconName.FlashFilled]: FlashFilled,
+  [IconName.FlashSlashFilled]: FlashSlashFilled,
+  [IconName.FullCircleFilled]: FullCircleFilled,
+  [IconName.GasFilled]: GasFilled,
+  [IconName.GlobalFilled]: GlobalFilled,
+  [IconName.GlobalSearchFilled]: GlobalSearchFilled,
+  [IconName.GraphFilled]: GraphFilled,
+  [IconName.HeartFilled]: HeartFilled,
+  [IconName.HierarchyFilled]: HierarchyFilled,
+  [IconName.HomeFilled]: HomeFilled,
+  [IconName.ImportOutline]: ImportOutline,
+  [IconName.InfoFilled]: InfoFilled,
+  [IconName.KeyFilled]: KeyFilled,
+  [IconName.LightFilled]: LightFilled,
+  [IconName.Link2Outline]: Link2Outline,
+  [IconName.LinkOutline]: LinkOutline,
+  [IconName.LoadingFilled]: LoadingFilled,
+  [IconName.LockCircleFilled]: LockCircleFilled,
+  [IconName.LockFilled]: LockFilled,
+  [IconName.LockSlashFilled]: LockSlashFilled,
+  [IconName.LoginOutline]: LoginOutline,
+  [IconName.LogoutOutline]: LogoutOutline,
+  [IconName.MenuOutline]: MenuOutline,
+  [IconName.MessageQuestionFilled]: MessageQuestionFilled,
+  [IconName.MessagesFilled]: MessagesFilled,
+  [IconName.MinusOutine]: MinusOutine,
+  [IconName.MinusSquareFilled]: MinusSquareFilled,
+  [IconName.MobileFilled]: MobileFilled,
+  [IconName.MoneyFilled]: MoneyFilled,
+  [IconName.MonitorFilled]: MonitorFilled,
+  [IconName.MoreHorizontalOutline]: MoreHorizontalOutline,
+  [IconName.MoreVerticalOutline]: MoreVerticalOutline,
+  [IconName.NotificationCircleFilled]: NotificationCircleFilled,
+  [IconName.NotificationFilled]: NotificationFilled,
+  [IconName.PasswordCheckFilled]: PasswordCheckFilled,
+  [IconName.PeopleFilled]: PeopleFilled,
+  [IconName.ProgrammingArrowsFilled]: ProgrammingArrowsFilled,
+  [IconName.QuestionFilled]: QuestionFilled,
+  [IconName.ReceivedOutline]: ReceivedOutline,
+  [IconName.RefreshOutline]: RefreshOutline,
+  [IconName.SaveFilled]: SaveFilled,
+  [IconName.ScanBarcodeFilled]: ScanBarcodeFilled,
+  [IconName.ScanFilled]: ScanFilled,
+  [IconName.ScanFocusOutline]: ScanFocusOutline,
+  [IconName.ScrollFilled]: ScrollFilled,
+  [IconName.SearchFilled]: SearchFilled,
+  [IconName.SecurityCardFilled]: SecurityCardFilled,
+  [IconName.SecurityCrossFilled]: SecurityCrossFilled,
+  [IconName.SecurityFilled]: SecurityFilled,
+  [IconName.SecurityKeyFilled]: SecurityKeyFilled,
+  [IconName.SecuritySearchFilled]: SecuritySearchFilled,
+  [IconName.SecuritySlashFilled]: SecuritySlashFilled,
+  [IconName.SecurityTickFilled]: SecurityTickFilled,
+  [IconName.SecurityTimeFilled]: SecurityTimeFilled,
+  [IconName.SecurityUserFilled]: SecurityUserFilled,
+  [IconName.Send1Filled]: Send1Filled,
+  [IconName.Send2Outline]: Send2Outline,
+  [IconName.SettingFilled]: SettingFilled,
+  [IconName.SlashFilled]: SlashFilled,
+  [IconName.SnapsFilled]: SnapsFilled,
+  [IconName.SnapsMobileFilled]: SnapsMobileFilled,
+  [IconName.SnapsPlusFilled]: SnapsPlusFilled,
+  [IconName.SpeedometerFilled]: SpeedometerFilled,
+  [IconName.StarFilled]: StarFilled,
+  [IconName.StudentFilled]: StudentFilled,
+  [IconName.SwapHorizontalOutline]: SwapHorizontalOutline,
+  [IconName.SwapVertivalFilled]: SwapVertivalFilled,
+  [IconName.TagFilled]: TagFilled,
+  [IconName.TimerTimer]: TimerTimer,
+  [IconName.TrashFilled]: TrashFilled,
+  [IconName.TrendDownFilled]: TrendDownFilled,
+  [IconName.TrendUpFilled]: TrendUpFilled,
+  [IconName.UserAddFilled1]: UserAddFilled1,
+  [IconName.UserAddFilled]: UserAddFilled,
+  [IconName.UserCircleAddFilled]: UserCircleAddFilled,
+  [IconName.UserCircleFilled]: UserCircleFilled,
+  [IconName.UserFilled]: UserFilled,
+  [IconName.UserMinusFilled]: UserMinusFilled,
+  [IconName.UserRemoveFilled]: UserRemoveFilled,
+  [IconName.UserSearchFilled]: UserSearchFilled,
+  [IconName.UserTickFilled]: UserTickFilled,
+  [IconName.WalletCardFilled]: WalletCardFilled,
+  [IconName.WalletFilled]: WalletFilled,
+  [IconName.WalletMoneyFilled]: WalletMoneyFilled,
+  [IconName.WarningFilled]: WarningFilled,
+};

app/component-library/components/Icon/Icon.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import { select } from '@storybook/addon-knobs';
+import Icon, { IconSize, IconName } from './';
+
+storiesOf('Component Library / Icon', module)
+  .addDecorator((getStory) => getStory())
+  .add('Default', () => {
+    const sizeSelector = select('size', IconSize, IconSize.Md);
+    const nameSelector = select('name', IconName, IconName.LockFilled);
+
+    return <Icon name={nameSelector} size={sizeSelector} />;
+  })
+  .add('Colored', () => {
+    const sizeSelector = select('size', IconSize, IconSize.Xl);
+    const nameSelector = select('name', IconName, IconName.LockFilled);
+
+    return <Icon name={nameSelector} size={sizeSelector} color={'red'} />;
+  });

app/component-library/components/Icon/Icon.styles.ts

@@ -0,0 +1,28 @@
+import { StyleSheet, ImageStyle } from 'react-native';
+import { IconStyleSheetVars } from './Icon.types';
+
+/**
+ * Style sheet function for Icon component.
+ *
+ * @param params Style sheet params.
+ * @param params.vars Inputs that the style sheet depends on.
+ * @returns StyleSheet object.
+ */
+const styleSheet = (params: { vars: IconStyleSheetVars }) => {
+  const {
+    vars: { style, size },
+  } = params;
+  const sizeAsNum = Number(size);
+
+  return StyleSheet.create({
+    container: Object.assign(
+      {
+        height: sizeAsNum,
+        width: sizeAsNum,
+      } as ImageStyle,
+      style,
+    ) as ImageStyle,
+  });
+};
+
+export default styleSheet;

app/component-library/components/Icon/Icon.tsx

@@ -0,0 +1,27 @@
+/* eslint-disable react/prop-types, react/jsx-pascal-case */
+import React from 'react';
+import { useStyles } from '../../hooks/useStyles';
+import { IconProps } from './Icon.types';
+import styleSheet from './Icon.styles';
+import { assetByIconName } from './Icon.assets';
+
+const Icon = ({ size, style, name, color }: IconProps) => {
+  const { styles, theme } = useStyles(styleSheet, {
+    size,
+    style,
+  });
+  const iconColor = color || theme.colors.icon.default;
+  const SVG = assetByIconName[name];
+  const sizeAsNum = Number(size);
+
+  return (
+    <SVG
+      color={iconColor}
+      style={styles.container}
+      width={sizeAsNum}
+      height={sizeAsNum}
+    />
+  );
+};
+
+export default Icon;