Convert svgs to tsx (#135)

Co-authored-by: Evan Yan <evan.yan@constructor.io>

Author: evanyan13

src/components/Breadcrumbs/BreadcrumbElement.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { concatStyles } from '../../utils/styleHelpers';
 import { BreadcrumbProps } from './types';
-import ChevronRight from '../../icons/chevron-right.svg';
+import ChevronRightIcon from './ChevronRightIcon';
 
 export default function BreadcrumbElement({
   path,
@@ -22,7 +22,7 @@ export default function BreadcrumbElement({
         )}>
         {!isCurrentPage ? <a href={path}>{breadcrumb}</a> : <span>{breadcrumb}</span>}
       </li>
-      {!isCurrentPage && <img src={ChevronRight} alt='chevron-right' />}
+      {!isCurrentPage && <ChevronRightIcon />}
     </>
   );
 }

src/components/Breadcrumbs/Breadcrumbs.css

@@ -4,6 +4,8 @@
   padding: 8px;
   margin: 0;
   gap: 4px;
+  justify-content: center;
+  align-items: center;
 }
 
 .cio-plp-breadcrumb {

src/components/Breadcrumbs/ChevronRightIcon.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+function ChevronRightIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={8}
+      height={8}
+      viewBox='0 0 8 8'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}>
+      <path
+        d='m3.033.85 2.993 2.993a.223.223 0 0 1 0 .315L3.034 7.15'
+        stroke='#000'
+        strokeOpacity={0.3}
+        strokeWidth={1.2}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+}
+
+export default ChevronRightIcon;

src/components/Breadcrumbs/EllipsisIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+function EllipsisIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={14}
+      height={4}
+      viewBox='0 0 14 4'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}>
+      <circle cx={1.5} cy={2} r={1.5} fill='#000' fillOpacity={0.8} />
+      <circle cx={7} cy={2} r={1.5} fill='#000' fillOpacity={0.8} />
+      <circle cx={12.5} cy={2} r={1.5} fill='#000' fillOpacity={0.8} />
+    </svg>
+  );
+}
+
+export default EllipsisIcon;

src/components/Breadcrumbs/MoreBreadcrumbsMenu.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { MoreBreadcrumbsMenuProps } from './types';
-import Ellipsis from '../../icons/ellipsis.svg';
-import ChevronRight from '../../icons/chevron-right.svg';
+import ChevronRightIcon from './ChevronRightIcon';
+import EllipsisIcon from './EllipsisIcon';
 
 export default function MoreBreadcrumbsMenu({ breadcrumbs }: MoreBreadcrumbsMenuProps) {
   const [expanded, setExpanded] = React.useState(false);
@@ -39,7 +39,7 @@ export default function MoreBreadcrumbsMenu({ breadcrumbs }: MoreBreadcrumbsMenu
           onClick={() => {
             setExpanded(!expanded);
           }}>
-          <img src={Ellipsis} alt='more menu icon' />
+          <EllipsisIcon />
         </button>
         <nav
           id='cio-more-menu'
@@ -59,7 +59,7 @@ export default function MoreBreadcrumbsMenu({ breadcrumbs }: MoreBreadcrumbsMenu
           )}
         </nav>
       </li>
-      <img src={ChevronRight} alt='chevron-right' />
+      <ChevronRightIcon />
     </>
   );
 }