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

src/components/MediaSlider/ShowMoreCard/index.tsx

@@ -1,3 +1,4 @@
+import { ArrowCircleRightIcon } from '@heroicons/react/solid';
 import Link from 'next/link';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -79,18 +80,7 @@ const ShowMoreCard: React.FC<ShowMoreCardProps> = ({ url, posters }) => {
                 )}
               </div>
               <div className="absolute inset-0 z-20 flex flex-col items-center justify-center text-white">
-                <svg
-                  className="w-14"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z"
-                    clipRule="evenodd"
-                  />
-                </svg>
+                <ArrowCircleRightIcon className="w-14" />
                 <div className="mt-2 font-extrabold">
                   {intl.formatMessage(messages.seemore)}
                 </div>

src/components/MediaSlider/index.tsx

@@ -1,3 +1,4 @@
+import { ArrowCircleRightIcon } from '@heroicons/react/outline';
 import Link from 'next/link';
 import React, { useContext, useEffect } from 'react';
 import { useSWRInfinite } from 'swr';
@@ -140,20 +141,7 @@ const MediaSlider: React.FC<MediaSliderProps> = ({
           <Link href={linkUrl}>
             <a className="slider-title">
               <span>{title}</span>
-              <svg
-                className="w-6 h-6 ml-2"
-                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 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
+              <ArrowCircleRightIcon className="w-6 h-6 ml-2" />
             </a>
           </Link>
         ) : (