move svg to tsx

src/assets/codepen.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+function SvgCodepen() {
+ return (
+ <svg
+ xmlns="http:https://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:https://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:https://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:https://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;