refactor(project): move icons to theme folder (#21)

packages/ui-react/package.json

@@ -42,6 +42,7 @@
     "sass": "^1.49.10",
     "typescript-plugin-css-modules": "^5.0.2",
     "vi-fetch": "^0.8.0",
+    "vite-plugin-svgr": "4.2.0",
     "vitest": "^0.34.6"
   },
   "peerDependencies": {

packages/ui-react/src/components/Account/Account.tsx

@@ -12,9 +12,9 @@ import { isTruthy, isTruthyCustomParamValue, logDev, testId } from '@jwp/ott-com
 import { formatConsents, formatConsentsFromValues, formatConsentsToRegisterFields, formatConsentValues } from '@jwp/ott-common/src/utils/collection';
 import { addQueryParam } from '@jwp/ott-ui-react/src/utils/location';
 import useToggle from '@jwp/ott-hooks-react/src/useToggle';
+import Visibility from '@jwp/ott-theme/assets/icons/visibility.svg?react';
+import VisibilityOff from '@jwp/ott-theme/assets/icons/visibility_off.svg?react';
 
-import Visibility from '../../icons/Visibility';
-import VisibilityOff from '../../icons/VisibilityOff';
 import type { FormSectionContentArgs, FormSectionProps } from '../Form/FormSection';
 import Alert from '../Alert/Alert';
 import Button from '../Button/Button';
@@ -24,6 +24,7 @@ import TextField from '../TextField/TextField';
 import Checkbox from '../Checkbox/Checkbox';
 import HelperText from '../HelperText/HelperText';
 import CustomRegisterField from '../CustomRegisterField/CustomRegisterField';
+import Icon from '../Icon/Icon';
 
 import styles from './Account.module.scss';
 
@@ -271,7 +272,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                     disabled={section.isBusy}
                     rightControl={
                       <IconButton aria-label={viewPassword ? t('account.hide_password') : t('account.view_password')} onClick={() => toggleViewPassword()}>
-                        {viewPassword ? <Visibility /> : <VisibilityOff />}
+                        <Icon icon={viewPassword ? Visibility : VisibilityOff} />
                       </IconButton>
                     }
                     required

packages/ui-react/src/components/BackButton/BackButton.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
+import ArrowLeft from '@jwp/ott-theme/assets/icons/icon.svg?react';
 
-import ArrowLeft from '../../icons/ArrowLeft';
 import IconButton from '../IconButton/IconButton';
+import Icon from '../Icon/Icon';
 
 import styles from './BackButton.module.scss';
 
@@ -17,7 +18,7 @@ const BackButton: React.FC<Props> = ({ className, onClick }: Props) => {
 
   return (
     <IconButton onClick={onClick} className={classNames(styles.backButton, className)} aria-label={t('common:back')}>
-      <ArrowLeft />
+      <Icon icon={ArrowLeft} />
     </IconButton>
   );
 };

packages/ui-react/src/components/Button/Button.tsx

@@ -16,7 +16,7 @@ type Props = {
   active?: boolean;
   color?: Color;
   fullWidth?: boolean;
-  startIcon?: JSX.Element;
+  startIcon?: React.ReactElement;
   variant?: Variant;
   onClick?: MouseEventHandler<HTMLButtonElement>;
   tabIndex?: number;

packages/ui-react/src/components/Card/Card.tsx

@@ -6,10 +6,11 @@ import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
 import { formatDurationTag, formatLocalizedDateTime, formatSeriesMetaString } from '@jwp/ott-common/src/utils/formatting';
 import { isLiveChannel, isSeries } from '@jwp/ott-common/src/utils/media';
 import { MediaStatus } from '@jwp/ott-common/src/utils/liveEvent';
+import Lock from '@jwp/ott-theme/assets/icons/lock.svg?react';
+import Today from '@jwp/ott-theme/assets/icons/today.svg?react';
 
-import Lock from '../../icons/Lock';
-import Today from '../../icons/Today';
 import Image from '../Image/Image';
+import Icon from '../Icon/Icon';
 
 import styles from './Card.module.scss';
 
@@ -75,7 +76,7 @@ function Card({
     } else if (isScheduled) {
       return (
         <div className={styles.tag}>
-          <Today className={styles.scheduled} />
+          <Icon icon={Today} className={styles.scheduled} />
           {t('scheduled')}
         </div>
       );
@@ -100,7 +101,7 @@ function Card({
             <div className={styles.tags}>
               {isLocked && (
                 <div className={classNames(styles.tag, styles.lock)} aria-label={t('card_lock')} role="status">
-                  <Lock />
+                  <Icon icon={Lock} />
                 </div>
               )}
               {renderTag()}

packages/ui-react/src/components/Card/__snapshots__/Card.test.tsx.snap

@@ -29,8 +29,7 @@ exports[`<Card> > should render anchor tag 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="_icon_1e9999"
-              focusable="false"
+              class="_icon_585b29"
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
             >

packages/ui-react/src/components/CheckoutForm/CheckoutForm.tsx

@@ -4,15 +4,16 @@ import classNames from 'classnames';
 import type { OfferType } from '@jwp/ott-common/types/account';
 import type { Offer, Order, PaymentMethod } from '@jwp/ott-common/types/checkout';
 import { formatPrice } from '@jwp/ott-common/src/utils/formatting';
+import Close from '@jwp/ott-theme/assets/icons/close.svg?react';
+import PayPal from '@jwp/ott-theme/assets/icons/paypal.svg?react';
+import CreditCard from '@jwp/ott-theme/assets/icons/creditcard.svg?react';
 
-import Close from '../../icons/Close';
-import PayPal from '../../icons/PayPal';
-import CreditCard from '../../icons/CreditCard';
 import Button from '../Button/Button';
 import IconButton from '../IconButton/IconButton';
 import FormFeedback from '../FormFeedback/FormFeedback';
 import DialogBackButton from '../DialogBackButton/DialogBackButton';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
+import Icon from '../Icon/Icon';
 
 import styles from './CheckoutForm.module.scss';
 
@@ -106,7 +107,7 @@ const CheckoutForm: React.FC<Props> = ({
           <form onSubmit={onCouponFormSubmit} noValidate>
             <div className={styles.redeemCoupon}>
               <IconButton aria-label="Close coupon form" onClick={onCloseCouponFormClick}>
-                <Close />
+                <Icon icon={Close} />
               </IconButton>
               <input
                 className={styles.couponInput}
@@ -187,7 +188,7 @@ const CheckoutForm: React.FC<Props> = ({
                 onChange={onPaymentMethodChange}
               />
               <label className={styles.paymentMethodLabel} htmlFor="card">
-                <CreditCard /> {t('checkout.credit_card')}
+                <Icon icon={CreditCard} /> {t('checkout.credit_card')}
               </label>
             </div>
           ) : null}
@@ -203,7 +204,7 @@ const CheckoutForm: React.FC<Props> = ({
                 onChange={onPaymentMethodChange}
               />
               <label className={styles.paymentMethodLabel} htmlFor="paypal">
-                <PayPal /> {t('checkout.paypal')}
+                <Icon icon={PayPal} /> {t('checkout.paypal')}
               </label>
             </div>
           ) : null}

packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap

@@ -11,16 +11,13 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="_icon_1e9999"
-        focusable="false"
+        class="_icon_585b29"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <g>
-          <path
-            d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
-          />
-        </g>
+        <path
+          d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
+        />
       </svg>
     </div>
     <h2

packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.tsx

@@ -7,12 +7,13 @@ import type { Offer } from '@jwp/ott-common/types/checkout';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { getOfferPrice, isSVODOffer } from '@jwp/ott-common/src/utils/subscription';
 import { testId } from '@jwp/ott-common/src/utils/common';
+import CheckCircle from '@jwp/ott-theme/assets/icons/check_circle.svg?react';
 
-import CheckCircle from '../../icons/CheckCircle';
 import Button from '../Button/Button';
 import FormFeedback from '../FormFeedback/FormFeedback';
 import DialogBackButton from '../DialogBackButton/DialogBackButton';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
+import Icon from '../Icon/Icon';
 
 import styles from './ChooseOfferForm.module.scss';
 
@@ -86,17 +87,17 @@ const ChooseOfferForm: React.FC<Props> = ({
         <ul className={styles.offerBenefits}>
           {offer.freeDays || offer.freePeriods ? (
             <li>
-              <CheckCircle /> {getFreeTrialText(offer)}
+              <Icon icon={CheckCircle} /> {getFreeTrialText(offer)}
             </li>
           ) : null}
 
           {!!secondBenefit && (
             <li>
-              <CheckCircle /> {secondBenefit}
+              <Icon icon={CheckCircle} /> {secondBenefit}
             </li>
           )}
           <li>
-            <CheckCircle /> {t('choose_offer.benefits.watch_on_all_devices')}
+            <Icon icon={CheckCircle} /> {t('choose_offer.benefits.watch_on_all_devices')}
           </li>
         </ul>
         <div className={styles.fill} />