move svg to tsx

src/assets/codepen.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+function SvgCodepen() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="CodePen"
+      viewBox="0 0 512 512"
+    >
+      <rect width={512} height={512} rx="15%" fill="#111" />
+      <g fill="none" stroke="#e6e6e6" strokeWidth={33} strokeLinejoin="round">
+        <path d="M81 198v116l175 117 175-117V198L256 81z" />
+        <path d="M81 198l175 116 175-116M256 81v117" />
+        <path d="M81 314l175-116 175 116M256 431V314" />
+      </g>
+    </svg>
+  );
+}
+
+export default SvgCodepen;
+

src/assets/github.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+function SvgGithub() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="GitHub"
+      viewBox="0 0 512 512"
+    >
+      <rect width={512} height={512} rx="15%" fill="#1B1817" />
+      <path
+        fill="#fff"
+        d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-50c-71 16-86-28-86-28-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"
+      />
+    </svg>
+  );
+}
+
+export default SvgGithub;
+

src/assets/linkedin.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+function SvgLinkedin() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="LinkedIn"
+      viewBox="0 0 512 512"
+      fill="#fff"
+    >
+      <rect width={512} height={512} rx="15%" fill="#0077b5" />
+      <circle cx={142} cy={138} r={37} />
+      <path stroke="#fff" strokeWidth={66} d="M244 194v198M142 194v198" />
+      <path d="M276 282c0-20 13-40 36-40 24 0 33 18 33 45v105h66V279c0-61-32-89-76-89-34 0-51 19-59 32" />
+    </svg>
+  );
+}
+
+export default SvgLinkedin;
+

src/assets/stackoverflow.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+function SvgStackoverflow() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Stack Overflow"
+      viewBox="0 0 512 512"
+    >
+      <rect width={512} height={512} rx="15%" fill="#f58025" />
+      <path
+        stroke="#fff"
+        strokeWidth={30}
+        fill="none"
+        d="M293 89l90 120zm-53 50l115 97zm-41 65l136 64zm-23 69l148 31zm-6 68h150zm-45-44v105h241V297"
+      />
+    </svg>
+  );
+}
+
+export default SvgStackoverflow;
+

src/demo/Content.tsx

@@ -32,18 +32,18 @@ export const ChangingBackground: FC<ContentTypes> = ({
   </div>
 );
 
-export const MediaContent: FC<ContentTypes> = ({ imgSrc, description }) => (
+export const MediaContent: FC<ContentTypes> = ({ children }) => (
   <div
     style={{
       display: 'flex',
       alignItems: 'center',
       padding: 12,
+      borderRadius: '56px',
       background: '#fff',
       overflow: 'hidden'
     }}
   >
-    <img src={imgSrc} alt={description} height="32" />
-    <span style={{ paddingLeft: 12 }}>{description}</span>
+    {children}
   </div>
 );
 

src/demo/data.tsx

@@ -2,10 +2,10 @@
 
 import React from 'react';
 
-import codepenlogo from '../assets/codepen.svg';
-import githublogo from '../assets/github.svg';
-import likedinlogo from '../assets/linkedin.svg';
-import stackoverflowlogo from '../assets/stackoverflow.svg';
+import CodePen from '../assets/codepen';
+import Github from '../assets/github';
+import Linkedin from '../assets/linkedin';
+import StacOverflow from '../assets/stackoverflow';
 import type { Configuration } from '../types/Configuration.types';
 import Content, { ChangingBackground, MediaContent } from './Content';
 
@@ -163,39 +163,53 @@ export const configuration4: Configuration = {
   items: [
     {
       id: 'green',
-      content: <MediaContent imgSrc={codepenlogo} description="Codepen logo" />
+      content: (
+        <MediaContent description="Codepen logo">
+          <CodePen />
+        </MediaContent>
+      )
     },
     {
       id: 'red',
-      content: <MediaContent imgSrc={githublogo} description="Github Logo" />
+      content: (
+        <MediaContent description="Github Logo">
+          <Github />
+        </MediaContent>
+      )
     },
     {
       id: 'blue',
-      content: <MediaContent imgSrc={likedinlogo} description="Linkedin Logo" />
+      content: (
+        <MediaContent description="Linkedin Logo">
+          <Linkedin />
+        </MediaContent>
+      )
     },
     {
       id: 'yellow',
       content: (
-        <MediaContent
-          imgSrc={stackoverflowlogo}
-          description="Stackoverflow logo"
-        />
+        <MediaContent description="Stackoverflow logo">
+          <StacOverflow />
+        </MediaContent>
       )
     }
   ],
   width: 400,
   height: 400,
   timing: 3000,
   cardStyles: {
-    borderRadius: '0',
+    borderRadius: '56px',
     padding: '0',
-    backgroundColor: 'none'
+    backgroundColor: 'none',
+    boxShadow: 'none'
   },
   stackCardStyles: {
     secondColor: '#b0521f',
     thirdColor: '#8c4018'
   },
-  containerStyles
+  containerStyles: {
+    padding: '0% 5% 0'
+  }
 };
 
 export default configuration;