refactor(icons): install and use @heroicons/react (#1438)

src/components/Common/Alert/index.tsx

@@ -1,3 +1,8 @@
+import {
+  ExclamationIcon,
+  InformationCircleIcon,
+  XCircleIcon,
+} from '@heroicons/react/solid';
 import React from 'react';
 
 interface AlertProps {
@@ -10,21 +15,7 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
     bgColor: 'bg-yellow-600',
     titleColor: 'text-yellow-200',
     textColor: 'text-yellow-300',
-    svg: (
-      <svg
-        className="w-5 h-5"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-        aria-hidden="true"
-      >
-        <path
-          fillRule="evenodd"
-          d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-          clipRule="evenodd"
-        />
-      </svg>
-    ),
+    svg: <ExclamationIcon className="w-5 h-5" />,
   };
 
   switch (type) {
@@ -33,22 +24,7 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
         bgColor: 'bg-indigo-600',
         titleColor: 'text-indigo-200',
         textColor: 'text-indigo-300',
-        svg: (
-          <svg
-            className="w-5 h-5"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-        ),
+        svg: <InformationCircleIcon className="w-5 h-5" />,
       };
       break;
     case 'error':
@@ -56,22 +32,7 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
         bgColor: 'bg-red-600',
         titleColor: 'text-red-200',
         textColor: 'text-red-300',
-        svg: (
-          <svg
-            className="w-5 h-5"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-        ),
+        svg: <XCircleIcon className="w-5 h-5" />,
       };
       break;
   }

src/components/Common/ButtonWithDropdown/index.tsx

@@ -1,13 +1,14 @@
+import { ChevronDownIcon } from '@heroicons/react/solid';
 import React, {
-  useState,
-  useRef,
   AnchorHTMLAttributes,
-  ReactNode,
   ButtonHTMLAttributes,
+  ReactNode,
+  useRef,
+  useState,
 } from 'react';
 import useClickOutside from '../../../hooks/useClickOutside';
-import Transition from '../../Transition';
 import { withProperties } from '../../../utils/typeHelpers';
+import Transition from '../../Transition';
 
 interface DropdownItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   buttonType?: 'primary' | 'ghost';
@@ -102,18 +103,7 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
             {dropdownIcon ? (
               dropdownIcon
             ) : (
-              <svg
-                className="w-5 h-5"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                  clipRule="evenodd"
-                />
-              </svg>
+              <ChevronDownIcon className="w-5 h-5" />
             )}
           </button>
           <Transition

src/components/Common/PlayButton/index.tsx

@@ -1,3 +1,4 @@
+import { PlayIcon } from '@heroicons/react/outline';
 import React from 'react';
 import ButtonWithDropdown from '../ButtonWithDropdown';
 
@@ -20,26 +21,7 @@ const PlayButton: React.FC<PlayButtonProps> = ({ links }) => {
       buttonType="ghost"
       text={
         <>
-          <svg
-            className="w-5 h-5 mr-1"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
-            />
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
+          <PlayIcon className="w-5 h-5 mr-1" />
           <span>{links[0].text}</span>
         </>
       }

src/components/Common/SlideOver/index.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
+import { XIcon } from '@heroicons/react/outline';
 import React, { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
@@ -81,20 +82,7 @@ const SlideOver: React.FC<SlideOverProps> = ({
                           className="text-indigo-200 transition duration-150 ease-in-out hover:text-white"
                           onClick={() => onClose()}
                         >
-                          <svg
-                            className="w-6 h-6"
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                          >
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth="2"
-                              d="M6 18L18 6M6 6l12 12"
-                            />
-                          </svg>
+                          <XIcon className="w-6 h-6" />
                         </button>
                       </div>
                     </div>