better icon handling

package.json

@@ -25,7 +25,8 @@
     "dev": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "generate-icons": "npx @svgr/cli src/Icons/svgs"
   },
   "eslintConfig": {
     "extends": [
@@ -47,6 +48,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@svgr/cli": "^8.1.0",
     "babel-plugin-styled-components": "^2.1.4",
     "prettier": "2.8.8"
   }

src/Components/Buttons/SettingsButton.tsx

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components/macro';
-import SettingsIcon from '../../Icons/SettingsIcon';
 import { Rotation } from '../../Types/Player';
+import { Cog } from '../../Icons/generated';
 
 export const StyledSettingsButton = styled.button<{ rotation: number }>`
   position: absolute;
@@ -39,7 +39,7 @@ type SettingsButtonProps = {
 const SettingsButton = ({ onClick, rotation }: SettingsButtonProps) => {
   return (
     <StyledSettingsButton onClick={onClick} rotation={rotation}>
-      <SettingsIcon size="5vmin" />
+      <Cog size="5vmin" color="black" opacity="0.3" />
     </StyledSettingsButton>
   );
 };

src/Components/Counters/ExtraCountersBar.tsx

@@ -1,12 +1,14 @@
 import { CounterType, Player } from '../../Types/Player';
 import ExtraCounter from '../Buttons/ExtraCounter';
-import CommanderTaxIcon from '../../Icons/CommanderTaxIcon';
-import EnergyIcon from '../../Icons/EnergyIcon';
-import ExperienceIcon from '../../Icons/ExperienceIcon';
-import PoisonIcon from '../../Icons/PoisonIcon';
-import PartnerTaxIcon from '../../Icons/PartnerTaxIcon';
 import styled, { css } from 'styled-components/macro';
 import { Rotation } from '../../Types/Player';
+import {
+  CommanderTax,
+  Energy,
+  Experience,
+  PartnerTax,
+  Poison,
+} from '../../Icons/generated';
 
 const ExtraCountersGrid = styled.div<{ rotation: number }>`
   display: flex;
@@ -81,7 +83,7 @@ const ExtraCountersBar = ({
       {player.settings.useCommanderDamage && (
         <ExtraCounter
           rotation={player.settings.rotation}
-          Icon={<CommanderTaxIcon size={iconSize} />}
+          Icon={<CommanderTax size={iconSize} opacity="0.5" />}
           type={CounterType.CommanderTax}
           counterTotal={
             player.extraCounters?.find(
@@ -96,7 +98,7 @@ const ExtraCountersBar = ({
       ) && (
         <ExtraCounter
           rotation={player.settings.rotation}
-          Icon={<PartnerTaxIcon size={iconSize} />}
+          Icon={<PartnerTax size={iconSize} opacity="0.5" />}
           type={CounterType.PartnerTax}
           counterTotal={
             player.extraCounters?.find(
@@ -109,7 +111,7 @@ const ExtraCountersBar = ({
       {player.settings.usePoison && (
         <ExtraCounter
           rotation={player.settings.rotation}
-          Icon={<PoisonIcon size={iconSize} />}
+          Icon={<Poison size={iconSize} opacity="0.5" />}
           type={CounterType.Poison}
           counterTotal={
             player.extraCounters?.find((counter) => counter.type === 'poison')
@@ -121,7 +123,7 @@ const ExtraCountersBar = ({
       {player.settings.useEnergy && (
         <ExtraCounter
           rotation={player.settings.rotation}
-          Icon={<EnergyIcon size={iconSize} />}
+          Icon={<Energy size={iconSize} opacity="0.5" />}
           type={CounterType.Energy}
           counterTotal={
             player.extraCounters?.find((counter) => counter.type === 'energy')
@@ -133,7 +135,7 @@ const ExtraCountersBar = ({
       {player.settings.useExperience && (
         <ExtraCounter
           rotation={player.settings.rotation}
-          Icon={<ExperienceIcon size={iconSize} />}
+          Icon={<Experience size={iconSize} opacity="0.5" />}
           type={CounterType.Experience}
           counterTotal={
             player.extraCounters?.find(

src/Components/Misc/SupportMe.tsx

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import { theme } from '../../Data/theme';
+import { Paragraph } from './TextComponents';
+
+const Footer = styled.div`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 58px;
+  background-color: ${theme.palette.primary.main};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 16px;
+`;
+
+export const SupportMe = () => {
+  return (
+    <Footer>
+      <Paragraph>Support me</Paragraph>
+    </Footer>
+  );
+};

src/Components/Misc/TextComponents.tsx

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import { theme } from '../../Data/theme';
+
+export const Paragraph = styled.p`
+  color: ${theme.palette.text.primary};
+`;
+
+export const H2 = styled.h2`
+  color: ${theme.palette.text.primary};
+`;

src/Components/PlayerMenu/Settings.tsx

@@ -1,11 +1,8 @@
 import { Checkbox } from '@mui/material';
 import { Player, Rotation } from '../../Types/Player';
-import ExperienceIcon from '../../Icons/ExperienceIcon';
-import PartnerTaxIcon from '../../Icons/PartnerTaxIcon';
-import EnergyIcon from '../../Icons/EnergyIcon';
-import PoisonIcon from '../../Icons/PoisonIcon';
 import { useWakeLock } from 'react-screen-wake-lock';
 import styled, { css } from 'styled-components/macro';
+import { Energy, Experience, PartnerTax, Poison } from '../../Icons/generated';
 
 type SettingsProps = {
   player: Player;
@@ -181,19 +178,19 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
               name="usePartner"
               checked={player.settings.usePartner}
               icon={
-                <PartnerTaxIcon
+                <PartnerTax
                   size="4vmax"
                   color="black"
-                  opacity={1}
+                  stroke="white"
-                  showStroke
+                  stroke-width="10"
                 />
               }
               checkedIcon={
-                <PartnerTaxIcon
+                <PartnerTax
                   size="4vmax"
                   color={player.color}
-                  opacity={1}
+                  stroke="white"
-                  showStroke
+                  stroke-width="10"
                 />
               }
               onChange={handleSettingsChange}
@@ -206,14 +203,19 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
             name="usePoison"
             checked={player.settings.usePoison}
             icon={
-              <PoisonIcon size="4vmax" color="black" opacity={1} showStroke />
+              <Poison
+                size="4vmax"
+                color="black"
+                stroke="white"
+                stroke-width="7"
+              />
             }
             checkedIcon={
-              <PoisonIcon
+              <Poison
                 size="4vmax"
                 color={player.color}
-                opacity={1}
+                stroke="white"
-                showStroke
+                stroke-width="7"
               />
             }
             onChange={handleSettingsChange}
@@ -225,14 +227,19 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
             name="useEnergy"
             checked={player.settings.useEnergy}
             icon={
-              <EnergyIcon size="4vmax" color="black" opacity={1} showStroke />
+              <Energy
+                size="4vmax"
+                color="black"
+                stroke="white"
+                stroke-width="15"
+              />
             }
             checkedIcon={
-              <EnergyIcon
+              <Energy
                 size="4vmax"
                 color={player.color}
-                opacity={1}
+                stroke="white"
-                showStroke
+                stroke-width="15"
               />
             }
             onChange={handleSettingsChange}
@@ -244,19 +251,19 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
             name="useExperience"
             checked={player.settings.useExperience}
             icon={
-              <ExperienceIcon
+              <Experience
                 size="4vmax"
                 color="black"
-                opacity={1}
+                stroke="white"
-                showStroke
+                stroke-width="30"
               />
             }
             checkedIcon={
-              <ExperienceIcon
+              <Experience
                 size="4vmax"
                 color={player.color}
-                opacity={1}
+                stroke="white"
-                showStroke
+                stroke-width="30"
               />
             }
             onChange={handleSettingsChange}

src/Components/Views/StartMenu/LayoutOptions.tsx

@@ -2,18 +2,20 @@ import React from 'react';
 import styled from 'styled-components/macro';
 import { GridTemplateAreas } from '../../../Data/GridTemplateAreas';
 import { FormControlLabel, Radio, RadioGroup } from '@mui/material';
-import OnePlayerLandscape from '../../../Icons/Layouts/OnePlayerLandscape';
-import OnePlayerPortrait from '../../../Icons/Layouts/OnePlayerPortrait';
-import TwoPlayersOppositeLandscape from '../../../Icons/Layouts/TwoPlayersOppositeLandscape';
-import TwoPlayersOppositePortrait from '../../../Icons/Layouts/TwoPlayersOppositePortrait';
-import TwoPlayersSameSide from '../../../Icons/Layouts/TwoPlayersSameSide';
-import FivePlayers from '../../../Icons/Layouts/FivePlayers';
-import FourPlayers from '../../../Icons/Layouts/FourPlayers';
-import FourPlayersSide from '../../../Icons/Layouts/FourPlayersSide';
-import ThreePlayers from '../../../Icons/Layouts/ThreePlayers';
-import ThreePlayersSide from '../../../Icons/Layouts/ThreePlayersSide';
-import SixPlayers from '../../../Icons/Layouts/SixPlayers';
 import { theme } from '../../../Data/theme';
+import {
+  OnePlayerPortrait,
+  TwoPlayersOppositeLandscape,
+  TwoPlayersOppositePortrait,
+  ThreePlayers,
+  ThreePlayersSide,
+  FourPlayers,
+  FourPlayersSide,
+  FivePlayers,
+  SixPlayers,
+  TwoPlayersSameSide,
+} from '../../../Icons/generated/Layouts';
+import OnePlayerLandscape from '../../../Icons/generated/Layouts/OnePlayerLandscape';
 
 const LayoutWrapper = styled.div`
   flex-direction: row;
@@ -33,6 +35,8 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
   onChange,
 }) => {
   const iconSize = '33vmin';
+  const iconHeight = '33vmin';
+  const iconWidth = '20vmin';
 
   const renderLayoutOptions = () => {
     switch (numberOfPlayers) {
@@ -45,14 +49,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
                 <Radio
                   icon={
                     <OnePlayerLandscape
-                      size={iconSize}
+                      height={iconHeight}
-                      color={theme.palette.secondary.main}
+                      width={iconWidth}
+                      fill={theme.palette.secondary.main}
                     />
                   }
                   checkedIcon={
                     <OnePlayerLandscape
-                      size={iconSize}
+                      height={iconHeight}
-                      color={theme.palette.primary.main}
+                      width={iconWidth}
+                      fill={theme.palette.primary.main}
                     />
                   }
                   TouchRippleProps={{ style: { display: 'none' } }}
@@ -66,14 +72,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
                 <Radio
                   icon={
                     <OnePlayerPortrait
-                      size={iconSize}
+                      height={iconHeight}
-                      color={theme.palette.secondary.main}
+                      width={iconWidth}
+                      fill={theme.palette.secondary.main}
                     />
                   }
                   checkedIcon={
                     <OnePlayerPortrait
-                      size={iconSize}
+                      height={iconHeight}
-                      color={theme.palette.primary.main}
+                      width={iconWidth}
+                      fill={theme.palette.primary.main}
                     />
                   }
                   TouchRippleProps={{ style: { display: 'none' } }}
@@ -92,14 +100,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
                 <Radio
                   icon={
                     <TwoPlayersOppositeLandscape
-                      size={iconSize}
+                      height={iconHeight}
-                      color={theme.palette.secondary.main}
+                      width={iconWidth}
+                      fill={theme.palette.secondary.main}
                     />
                   }
                   checkedIcon={
                     <TwoPlayersOppositeLandscape
-                      size={iconSize}
+                      height={iconHeight}
-                      color={theme.palette.primary.main}
+                      width={iconWidth}
+                      fill={theme.palette.primary.main}
                     />
                   }
                   TouchRippleProps={{ style: { display: 'none' } }}
@@ -113,14 +123,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
                 <Radio
                   icon={
                     <TwoPlayersOppositePortrait
-                      size={iconSize}
+                      height={iconHeight}
-                      color={theme.palette.secondary.main}
+                      width={iconWidth}
+                      fill={theme.palette.secondary.main}
                     />
                   }
                   checkedIcon={
                     <TwoPlayersOppositePortrait
-                      size={iconSize}
+                      height={iconHeight}
-                      color={theme.palette.primary.main}
+                      width={iconWidth}
+                      fill={theme.palette.primary.main}
                     />
                   }
                   TouchRippleProps={{ style: { display: 'none' } }}
@@ -134,14 +146,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
                 <Radio
                   icon={
                     <TwoPlayersSameSide
-                      size={iconSize}
+                      height={iconHeight}
-                      color={theme.palette.secondary.main}
+                      width={iconWidth}
+                      fill={theme.palette.secondary.main}
                     />
                   }
                   checkedIcon={
                     <TwoPlayersSameSide
-                      size={iconSize}
+                      height={iconHeight}
-                      color={theme.palette.primary.main}
+                      width={iconWidth}
+                      fill={theme.palette.primary.main}
                     />
                   }
                   TouchRippleProps={{ style: { display: 'none' } }}
@@ -160,14 +174,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
                 <Radio
                   icon={
                     <ThreePlayers
-                      size={iconSize}
+                      height={iconHeight}
-                      color={theme.palette.secondary.main}
+                      width={iconWidth}
+                      fill={theme.palette.secondary.main}
                     />
                   }
                   checkedIcon={
                     <ThreePlayers
-                      size={iconSize}
+                      height={iconHeight}
-                      color={theme.palette.primary.main}
+                      width={iconWidth}
+                      fill={theme.palette.primary.main}
                     />
                   }
                   TouchRippleProps={{ style: { display: 'none' } }}
@@ -181,14 +197,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
                 <Radio
                   icon={
                     <ThreePlayersSide
-                      size={iconSize}
+                      height={iconHeight}
-                      color={theme.palette.secondary.main}
+                      width={iconWidth}
+                      fill={theme.palette.secondary.main}
                     />
                   }
                   checkedIcon={
                     <ThreePlayersSide
-                      size={iconSize}
+                      height={iconHeight}
-                      color={theme.palette.primary.main}
+                      width={iconWidth}
+                      fill={theme.palette.primary.main}
                     />
                   }
                   TouchRippleProps={{ style: { display: 'none' } }}
@@ -208,14 +226,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
                 <Radio
                   icon={
                     <FourPlayers
-                      size={iconSize}
+                      height={iconHeight}
-                      color={theme.palette.secondary.main}
+                      width={iconWidth}
+                      fill={theme.palette.secondary.main}
                     />
                   }
                   checkedIcon={
                     <FourPlayers
-                      size={iconSize}
+                      height={iconHeight}
-                      color={theme.palette.primary.main}
+                      width={iconWidth}
+                      fill={theme.palette.primary.main}
                     />
                   }
                   TouchRippleProps={{ style: { display: 'none' } }}
@@ -229,14 +249,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
                 <Radio
                   icon={
                     <FourPlayersSide
-                      size={iconSize}
+                      height={iconHeight}
-                      color={theme.palette.secondary.main}
+                      width={iconWidth}
+                      fill={theme.palette.secondary.main}
                     />
                   }
                   checkedIcon={
                     <FourPlayersSide
-                      size={iconSize}
+                      height={iconHeight}
-                      color={theme.palette.primary.main}
+                      width={iconWidth}
+                      fill={theme.palette.primary.main}
                     />
                   }
                   TouchRippleProps={{ style: { display: 'none' } }}
@@ -256,14 +278,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
                 <Radio
                   icon={
                     <FivePlayers
-                      size={iconSize}
+                      height={iconHeight}
-                      color={theme.palette.secondary.main}
+                      width={iconWidth}
+                      fill={theme.palette.secondary.main}
                     />
                   }
                   checkedIcon={
                     <FivePlayers
-                      size={iconSize}
+                      height={iconHeight}
-                      color={theme.palette.primary.main}
+                      width={iconWidth}
+                      fill={theme.palette.primary.main}
                     />
                   }
                   TouchRippleProps={{ style: { display: 'none' } }}
@@ -277,14 +301,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
                 <Radio
                   icon={
                     <FivePlayersSide
-                      size={iconSize}
+                                            height={iconHeight}
-                      color={theme.palette.secondary.main}
+                      width={iconWidth}
+                      fill={theme.palette.secondary.main}
                     />
                   }
                   checkedIcon={
                     <FivePlayersSide
-                      size={iconSize}
+                                            height={iconHeight}
-                      color={theme.palette.primary.main}
+                      width={iconWidth}
+                      fill={theme.palette.primary.main}
                     />
                   }
                   TouchRippleProps={{ style: { display: 'none' } }}
@@ -304,14 +330,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
                 <Radio
                   icon={
                     <SixPlayers
-                      size={iconSize}
+                      height={iconHeight}
-                      color={theme.palette.secondary.main}
+                      width={iconWidth}
+                      fill={theme.palette.secondary.main}
                     />
                   }
                   checkedIcon={
                     <SixPlayers
-                      size={iconSize}
+                      height={iconHeight}
-                      color={theme.palette.primary.main}
+                      width={iconWidth}
+                      fill={theme.palette.primary.main}
                     />
                   }
                   TouchRippleProps={{ style: { display: 'none' } }}
@@ -325,14 +353,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
                 <Radio
                   icon={
                     <SixPlayersSide
-                      size={iconSize}
+                                            height={iconHeight}
-                      color={theme.palette.secondary.main}
+                      width={iconWidth}
+                      fill={theme.palette.secondary.main}
                     />
                   }
                   checkedIcon={
                     <SixPlayersSide
-                      size={iconSize}
+                                            height={iconHeight}
-                      color={theme.palette.primary.main}
+                      width={iconWidth}
+                      fill={theme.palette.primary.main}
                     />
                   }
                   TouchRippleProps={{ style: { display: 'none' } }}

src/Components/Views/StartMenu/StartMenu.tsx

@@ -9,11 +9,8 @@ import {
 } from '../../../Data/getInitialPlayers';
 import { Player } from '../../../Types/Player';
 import LayoutOptions from './LayoutOptions';
-import { theme } from '../../../Data/theme';
+import { SupportMe } from '../../Misc/SupportMe';
-
+import { H2 } from '../../Misc/TextComponents';
-const H2 = styled.h2`
-  color: ${theme.palette.text.primary};
-`;
 
 const MainWrapper = styled.div`
   width: 100vw;
@@ -209,6 +206,7 @@ const Start = ({
           Start Game
         </Button>
       </FormControl>
+      {/* <SupportMe /> */}
     </MainWrapper>
   );
 };

src/Icons/Layouts/FivePlayers.tsx

@@ -1,90 +0,0 @@
-import { useState } from 'react';
-import { IconProps } from '../../Types/Icon';
-
-const FivePlayers = ({ size, color, active }: IconProps) => {
-  const [isChecked, setIsChecked] = useState(active || false);
-
-  const handleRadioClick = () => {
-    setIsChecked(!isChecked);
-  };
-
-  return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      <label style={{ cursor: 'pointer' }}>
-        <input
-          type="radio"
-          checked={isChecked}
-          onChange={handleRadioClick}
-          style={{ display: 'none' }}
-        />
-        <svg
-          version="1.2"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 802.000000 1374.000000"
-          width={'auto'}
-          height={size || 'auto'}
-          fill={color}
-          fillOpacity="1"
-        >
-          <g
-            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
-            stroke="none"
-          >
-            <path
-              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
--270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
--5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
-708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
-482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
--1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m2365 -2499 l0
--2210 -1695 0 -1695 0 0 403 0 404 113 6 c184 10 325 60 423 150 151 137 275
-597 275 1017 0 239 -35 471 -107 710 -95 314 -259 442 -588 457 l-119 6 6 116
-c11 188 48 334 127 492 139 279 392 496 697 599 177 59 153 58 1411 59 l1152
-1 0 -2210z m2555 2181 c50 -13 132 -41 184 -62 385 -157 654 -493 726 -906 12
--69 15 -198 15 -683 l0 -597 -112 -6 c-136 -8 -246 -34 -337 -82 -122 -64
--190 -159 -255 -355 -132 -400 -153 -832 -60 -1248 58 -256 118 -398 208 -488
-106 -106 230 -152 434 -161 l122 -6 0 -1767 0 -1767 -112 -6 c-136 -8 -246
--34 -337 -82 -122 -64 -190 -159 -255 -355 -132 -400 -153 -832 -60 -1248 58
--256 118 -398 208 -488 106 -106 230 -152 434 -161 l122 -6 0 -597 c0 -656 -2
--690 -61 -864 -137 -410 -497 -719 -929 -797 -61 -11 -298 -14 -1235 -14
-l-1160 0 -3 6388 -2 6388 1187 -4 1188 -3 90 -23z m-2555 -6411 l0 -1920
--1695 0 -1695 0 0 393 0 394 113 6 c184 10 325 60 423 150 151 137 275 597
-275 1017 0 239 -35 471 -107 710 -94 313 -259 442 -586 457 l-118 6 0 353 0
-354 1695 0 1695 0 0 -1920z m0 -4175 l0 -2165 -1107 0 c-633 0 -1150 5 -1207
-10 -325 32 -630 202 -830 465 -150 197 -246 475 -246 716 l0 66 113 6 c184 10
-325 60 423 150 151 137 275 597 275 1017 0 239 -35 471 -107 710 -94 313 -259
-442 -586 457 l-118 6 0 363 0 364 1695 0 1695 0 0 -2165z"
-            />
-            <path
-              d="M1950 11374 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
--1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
-87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
-            />
-            <path
-              d="M5741 10335 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
--635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
--39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
-            />
-            <path
-              d="M5741 4455 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
--635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
--39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
-            />
-            <path
-              d="M1950 7414 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
--1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
-87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
-            />
-            <path
-              d="M1950 3464 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
--1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 40
-190 -13 364 -156 507 -115 116 -241 168 -402 166 -40 0 -97 -7 -127 -15z"
-            />
-          </g>
-        </svg>
-      </label>
-    </div>
-  );
-};
-
-export default FivePlayers;

src/Icons/Layouts/FivePlayersSide.tsx

@@ -1,92 +0,0 @@
-import { useState } from 'react';
-import { IconProps } from '../../Types/Icon';
-
-const FivePlayersSide = ({ size, color, active }: IconProps) => {
-  const [isChecked, setIsChecked] = useState(active || false);
-
-  const handleRadioClick = () => {
-    setIsChecked(!isChecked);
-  };
-
-  return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      <label style={{ cursor: 'pointer' }}>
-        <input
-          type="radio"
-          checked={isChecked}
-          onChange={handleRadioClick}
-          style={{ display: 'none' }}
-        />
-        <svg
-          version="1.2"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 802.000000 1374.000000"
-          width={'auto'}
-          height={size || 'auto'}
-          fill={color}
-          fillOpacity="1"
-        >
-          <g
-            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
-            stroke="none"
-          >
-            <path
-              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
--270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
--5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
-708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
-482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
--1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m2365 -2664 l0
--2375 -1695 0 -1695 0 0 523 0 524 98 6 c172 12 314 63 408 150 88 80 160 247
-219 512 76 339 76 682 -1 1020 -57 256 -113 390 -199 483 -93 101 -237 159
--425 171 l-95 6 1 150 c1 217 33 361 121 540 141 284 392 501 700 605 177 59
-153 58 1411 59 l1152 1 0 -2375z m2555 2346 c360 -94 635 -309 794 -620 91
--179 131 -350 131 -566 l0 -132 -94 -7 c-180 -12 -339 -72 -423 -159 -55 -56
--105 -150 -147 -277 -132 -400 -153 -832 -60 -1248 58 -256 118 -398 208 -488
-101 -101 229 -151 414 -161 l102 -6 0 -528 0 -529 -1695 0 -1695 0 0 2375 0
-2376 1188 -4 1187 -3 90 -23z m-2557 -7163 l2 -2348 -1695 0 -1695 0 0 648 0
-649 118 6 c189 10 328 59 428 150 151 137 275 597 275 1017 0 239 -35 471
--107 710 -95 315 -259 442 -591 457 l-123 6 0 528 0 529 1693 -2 1692 -3 3
--2347z m3482 1828 l0 -523 -94 -7 c-180 -12 -339 -72 -423 -159 -55 -56 -105
--150 -147 -277 -132 -400 -153 -832 -60 -1248 58 -256 118 -398 208 -488 101
--101 229 -151 414 -161 l102 -6 0 -653 0 -654 -1695 0 -1695 0 0 2350 0 2350
-1695 0 1695 0 0 -524z m0 -5300 c0 -1134 1 -1116 -61 -1300 -134 -400 -474
--700 -899 -792 -63 -14 -170 -17 -686 -21 l-611 -4 -6 103 c-7 118 -40 246
--83 323 -83 149 -240 233 -579 309 -238 54 -543 72 -760 46 -212 -25 -480 -93
--609 -155 -191 -90 -287 -254 -304 -520 l-7 -100 -530 -3 c-576 -3 -707 4
--854 43 -243 66 -478 225 -635 430 -77 101 -166 277 -196 386 -49 183 -50 196
--50 1277 l0 1012 3435 0 3435 0 0 -1034z"
-            />
-            <path
-              d="M1920 11284 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
--1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
-87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
-            />
-            <path
-              d="M5781 11265 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
--635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
--39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
-            />
-            <path
-              d="M1960 6744 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
--1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
-87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
-            />
-            <path
-              d="M5781 6725 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
--635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
--39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
-            />
-            <path
-              d="M3883 2525 c-108 -23 -190 -70 -276 -156 -114 -114 -167 -239 -167
--397 0 -236 159 -453 390 -533 92 -31 237 -32 337 -1 127 39 241 129 316 249
-79 126 100 310 52 461 -86 272 -372 438 -652 377z"
-            />
-          </g>
-        </svg>
-      </label>
-    </div>
-  );
-};
-
-export default FivePlayersSide;

src/Icons/Layouts/FourPlayers.tsx

@@ -1,84 +0,0 @@
-import { useState } from 'react';
-import { IconProps } from '../../Types/Icon';
-
-const FourPlayers = ({ size, color, active }: IconProps) => {
-  const [isChecked, setIsChecked] = useState(active || false);
-
-  const handleRadioClick = () => {
-    setIsChecked(!isChecked);
-  };
-
-  return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      <label style={{ cursor: 'pointer' }}>
-        <input
-          type="radio"
-          checked={isChecked}
-          onChange={handleRadioClick}
-          style={{ display: 'none' }}
-        />
-        <svg
-          version="1.2"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 802.000000 1374.000000"
-          width={'auto'}
-          height={size || 'auto'}
-          fill={color}
-          fillOpacity="1"
-        >
-          <g
-            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
-            stroke="none"
-          >
-            <path
-              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
--270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
--5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
-708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
-482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
--1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m2365 -3459 l0
--3170 -1695 0 -1695 0 0 853 0 854 113 6 c184 10 325 60 423 150 151 137 275
-597 275 1017 0 239 -35 471 -107 710 -94 314 -259 442 -587 457 l-118 6 4 626
-c3 596 4 630 25 716 28 119 51 184 102 286 139 279 392 496 697 599 177 59
-153 58 1411 59 l1152 1 0 -3170z m2555 3141 c50 -13 132 -41 184 -62 385 -157
-654 -493 726 -906 12 -69 15 -198 15 -683 l0 -597 -112 -6 c-136 -8 -246 -34
--337 -82 -122 -64 -190 -159 -255 -355 -132 -400 -153 -832 -60 -1248 58 -256
-118 -398 208 -488 106 -106 230 -152 434 -161 l122 -6 0 -858 0 -859 -1695 0
--1695 0 0 3170 0 3171 1188 -4 1187 -3 90 -23z m-2555 -9581 l0 -3170 -1107 0
-c-633 0 -1150 5 -1207 10 -325 32 -630 202 -830 465 -77 101 -166 277 -196
-386 -46 172 -50 228 -50 835 l0 571 113 6 c184 10 325 60 423 150 151 137 275
-597 275 1017 0 239 -35 471 -107 710 -94 313 -259 442 -586 457 l-118 6 0 863
-0 864 1695 0 1695 0 0 -3170z m3480 2312 l0 -859 -112 -6 c-136 -8 -246 -34
--337 -82 -122 -64 -190 -159 -255 -355 -132 -400 -153 -832 -60 -1248 58 -256
-118 -398 208 -488 106 -106 230 -152 434 -161 l122 -6 0 -597 c0 -656 -2 -690
--61 -864 -137 -410 -497 -719 -929 -797 -61 -11 -298 -14 -1235 -14 l-1160 0
--3 3168 -2 3167 1695 0 1695 0 0 -858z"
-            />
-            <path
-              d="M1950 10354 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
--1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
-87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
-            />
-            <path
-              d="M5741 10335 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
--635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
--39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
-            />
-            <path
-              d="M1950 4474 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
--1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
-87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
-            />
-            <path
-              d="M5741 4455 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
--635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
--39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
-            />
-          </g>
-        </svg>
-      </label>
-    </div>
-  );
-};
-
-export default FourPlayers;

src/Icons/Layouts/FourPlayersSide.tsx

@@ -1,84 +0,0 @@
-import { useState } from 'react';
-import { IconProps } from '../../Types/Icon';
-
-const FourPlayersSide = ({ size, color, active }: IconProps) => {
-  const [isChecked, setIsChecked] = useState(active || false);
-
-  const handleRadioClick = () => {
-    setIsChecked(!isChecked);
-  };
-
-  return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      <label style={{ cursor: 'pointer' }}>
-        <input
-          type="radio"
-          checked={isChecked}
-          onChange={handleRadioClick}
-          style={{ display: 'none' }}
-        />
-        <svg
-          version="1.2"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 802.000000 1374.000000"
-          width={'auto'}
-          height={size || 'auto'}
-          fill={color}
-          fillOpacity="1"
-        >
-          <g
-            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
-            stroke="none"
-          >
-            <path
-              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
--270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
--5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
-708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
-482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
--1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m1240 -412 c1
--210 57 -368 167 -474 143 -136 607 -254 1003 -254 237 0 424 27 667 97 234
-67 357 150 423 288 50 106 66 176 72 329 l6 138 621 -3 c616 -3 622 -3 716
--27 487 -122 831 -486 915 -968 13 -73 15 -263 15 -1249 l0 -1164 -3432 2
--3433 3 0 1175 c0 1091 1 1181 18 1260 92 436 387 770 804 910 166 55 203 58
-848 59 l590 1 0 -123z m1125 -6267 l0 -2890 -1695 0 -1695 0 0 853 0 854 128
-6 c198 9 336 56 438 150 151 137 275 597 275 1017 0 239 -35 471 -107 710 -96
-319 -260 444 -601 457 l-133 6 0 863 0 864 1695 0 1695 0 0 -2890z m3480 2028
-l0 -863 -123 0 c-149 -1 -248 -22 -355 -75 -131 -66 -199 -158 -266 -360 -132
--400 -153 -832 -60 -1248 58 -256 118 -398 208 -488 111 -110 231 -153 454
--161 l142 -6 0 -858 0 -859 -1695 0 -1695 0 0 2890 0 2890 1695 0 1695 0 0
--862z m0 -6172 c0 -1277 1 -1244 -61 -1430 -134 -400 -474 -700 -899 -792 -63
--14 -170 -17 -686 -21 l-611 -4 -7 86 c-8 103 -43 230 -82 300 -83 149 -240
-233 -579 309 -238 54 -543 72 -760 46 -212 -25 -480 -93 -609 -155 -185 -87
--281 -245 -303 -496 l-8 -84 -530 -3 c-576 -3 -707 4 -854 43 -243 66 -478
-225 -635 430 -77 101 -166 277 -196 386 -50 184 -50 186 -50 1407 l0 1142
-3435 0 3435 0 0 -1164z"
-            />
-            <path
-              d="M3918 12260 c-165 -30 -300 -122 -391 -267 -79 -126 -100 -310 -52
--461 45 -144 155 -269 291 -334 221 -104 461 -62 635 111 115 115 169 242 169
-399 0 234 -161 455 -386 531 -71 23 -198 34 -266 21z"
-            />
-            <path
-              d="M1980 7414 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
--1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
-87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
-            />
-            <path
-              d="M5701 7395 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
--635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
--39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
-            />
-            <path
-              d="M3883 2485 c-108 -23 -190 -70 -276 -156 -114 -114 -167 -239 -167
--397 0 -236 159 -453 390 -533 92 -31 237 -32 337 -1 127 39 241 129 316 249
-79 126 100 310 52 461 -86 272 -372 438 -652 377z"
-            />
-          </g>
-        </svg>
-      </label>
-    </div>
-  );
-};
-
-export default FourPlayersSide;

src/Icons/Layouts/OnePlayerLandscape.tsx

@@ -1,60 +0,0 @@
-import { useState } from 'react';
-import { IconProps } from '../../Types/Icon';
-
-const OnePlayerLandscape = ({ size, color, active }: IconProps) => {
-  const [isChecked, setIsChecked] = useState(active || false);
-
-  const handleRadioClick = () => {
-    setIsChecked(!isChecked);
-  };
-
-  return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      <label style={{ cursor: 'pointer' }}>
-        <input
-          type="radio"
-          checked={isChecked}
-          onChange={handleRadioClick}
-          style={{ display: 'none' }}
-        />
-        <svg
-          version="1.2"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 802.000000 1374.000000"
-          width={'auto'}
-          height={size || 'auto'}
-          fill={color}
-          fillOpacity="1"
-        >
-          <g
-            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
-            stroke="none"
-          >
-            <path
-              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
--270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
--5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
-708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
-482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
--1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m4920 -318 c50
--13 132 -41 184 -62 385 -157 654 -493 726 -906 13 -75 15 -734 15 -5393 0
--4746 -2 -5317 -15 -5396 -85 -484 -450 -859 -945 -971 -69 -16 -261 -17
--2390 -20 -1547 -3 -2353 0 -2430 7 -208 18 -383 80 -558 197 -281 187 -466
-482 -518 828 -11 74 -14 459 -14 2136 l0 2046 98 6 c172 12 314 63 408 150 88
-80 160 247 219 512 76 339 76 682 -1 1020 -57 256 -113 390 -199 483 -93 101
--237 159 -425 171 l-95 6 0 2080 c0 1962 1 2085 18 2165 92 436 387 770 804
-910 185 62 35 58 2643 56 l2385 -1 90 -24z"
-            />
-            <path
-              d="M1920 7424 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
--1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
-87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
-            />
-          </g>
-        </svg>
-      </label>
-    </div>
-  );
-};
-
-export default OnePlayerLandscape;

src/Icons/Layouts/OnePlayerPortrait.tsx

@@ -1,60 +0,0 @@
-import { useState } from 'react';
-import { IconProps } from '../../Types/Icon';
-
-const OnePlayerPortrait = ({ size, color, active }: IconProps) => {
-  const [isChecked, setIsChecked] = useState(active || false);
-
-  const handleRadioClick = () => {
-    setIsChecked(!isChecked);
-  };
-
-  return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      <label style={{ cursor: 'pointer' }}>
-        <input
-          type="radio"
-          checked={isChecked}
-          onChange={handleRadioClick}
-          style={{ display: 'none' }}
-        />
-        <svg
-          version="1.2"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 802.000000 1374.000000"
-          width={'auto'}
-          height={size || 'auto'}
-          fill={color}
-          fillOpacity="1"
-        >
-          <g
-            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
-            stroke="none"
-          >
-            <path
-              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
--270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
--5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
-708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
-482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
--1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m4920 -318 c50
--13 132 -41 184 -62 385 -157 654 -493 726 -906 13 -75 15 -734 15 -5393 0
--4746 -2 -5317 -15 -5396 -85 -484 -454 -863 -945 -970 -63 -14 -170 -17 -686
--21 l-611 -4 -7 90 c-8 106 -43 234 -82 306 -83 149 -240 233 -579 309 -238
-54 -543 72 -760 46 -212 -25 -480 -93 -609 -155 -186 -88 -282 -248 -304 -502
-l-7 -88 -530 -3 c-309 -2 -578 2 -645 8 -565 50 -1011 485 -1080 1052 -8 68
--10 1519 -8 5388 l3 5295 22 90 c29 120 52 185 103 286 139 279 392 496 697
-599 185 62 35 58 2643 56 l2385 -1 90 -24z"
-            />
-            <path
-              d="M3883 2495 c-108 -23 -190 -70 -276 -156 -114 -114 -167 -239 -167
--397 0 -236 159 -453 390 -533 92 -31 237 -32 337 -1 127 39 241 129 316 249
-79 126 100 310 52 461 -86 272 -372 438 -652 377z"
-            />
-          </g>
-        </svg>
-      </label>
-    </div>
-  );
-};
-
-export default OnePlayerPortrait;

src/Icons/Layouts/SixPlayers.tsx

@@ -1,99 +0,0 @@
-import { useState } from 'react';
-import { IconProps } from '../../Types/Icon';
-
-const SixPlayers = ({ size, color, active }: IconProps) => {
-  const [isChecked, setIsChecked] = useState(active || false);
-
-  const handleRadioClick = () => {
-    setIsChecked(!isChecked);
-  };
-
-  return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      <label style={{ cursor: 'pointer' }}>
-        <input
-          type="radio"
-          checked={isChecked}
-          onChange={handleRadioClick}
-          style={{ display: 'none' }}
-        />
-        <svg
-          version="1.2"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 802.000000 1374.000000"
-          width={'auto'}
-          height={size || 'auto'}
-          fill={color}
-          fillOpacity="1"
-        >
-          <g
-            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
-            stroke="none"
-          >
-            <path
-              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
--270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
--5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
-708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
-482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
--1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m2365 -2474 l0
--2185 -1692 2 -1693 3 -3 376 -2 376 112 6 c185 10 326 60 424 150 151 137
-275 597 275 1017 0 239 -35 471 -107 710 -95 314 -259 442 -588 457 l-119 6 6
-116 c11 188 48 334 127 492 139 279 392 496 697 599 177 59 153 58 1411 59
-l1152 1 0 -2185z m2555 2156 c360 -94 635 -309 794 -620 84 -165 131 -351 131
--521 l0 -87 -112 -6 c-136 -8 -246 -34 -337 -82 -122 -64 -190 -159 -255 -355
--132 -400 -153 -832 -60 -1248 58 -256 118 -398 208 -488 106 -106 230 -152
-434 -161 l122 -6 0 -383 0 -384 -1692 2 -1693 3 -3 2183 -2 2183 1187 -4 1188
--3 90 -23z m-2555 -6361 l0 -1930 -1695 0 -1695 0 0 373 0 374 113 6 c184 10
-325 60 423 150 151 137 275 597 275 1017 0 239 -35 471 -107 710 -94 313 -259
-442 -586 457 l-118 6 0 383 0 384 1695 0 1695 0 0 -1930z m3480 1552 l0 -379
--112 -6 c-136 -8 -246 -34 -337 -82 -122 -64 -190 -159 -255 -355 -132 -400
--153 -832 -60 -1248 58 -256 118 -398 208 -488 106 -106 230 -152 434 -161
-l122 -6 0 -378 0 -379 -1695 0 -1695 0 0 1930 0 1930 1695 0 1695 0 0 -378z
-m-3480 -5757 l0 -2185 -1107 0 c-633 0 -1150 5 -1207 10 -325 32 -630 202
--830 465 -150 197 -246 475 -246 716 l0 66 113 6 c184 10 325 60 423 150 151
-137 275 597 275 1017 0 239 -35 471 -107 710 -94 313 -259 442 -586 457 l-118
-6 0 383 0 384 1695 0 1695 0 0 -2185z m3480 1807 l0 -379 -112 -6 c-136 -8
--246 -34 -337 -82 -122 -64 -190 -159 -255 -355 -132 -400 -153 -832 -60
--1248 58 -256 118 -398 208 -488 106 -106 230 -152 434 -161 l122 -6 0 -92 c0
--558 -425 -1053 -990 -1156 -61 -11 -298 -14 -1235 -14 l-1160 0 -3 2170 c-1
-1194 0 2176 3 2183 3 9 352 12 1695 12 l1690 0 0 -378z"
-            />
-            <path
-              d="M1950 11374 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
--1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
-87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
-            />
-            <path
-              d="M5741 11355 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
--635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
--39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
-            />
-            <path
-              d="M1950 7414 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
--1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
-87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
-            />
-            <path
-              d="M5741 7395 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
--635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
--39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
-            />
-            <path
-              d="M1950 3464 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
--1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 40
-190 -13 364 -156 507 -115 116 -241 168 -402 166 -40 0 -97 -7 -127 -15z"
-            />
-            <path
-              d="M5741 3445 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
--635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
--39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
-            />
-          </g>
-        </svg>
-      </label>
-    </div>
-  );
-};
-
-export default SixPlayers;

src/Icons/Layouts/SixPlayersSide.tsx

@@ -1,100 +0,0 @@
-import { useState } from 'react';
-import { IconProps } from '../../Types/Icon';
-
-const SixPlayersSide = ({ size, color, active }: IconProps) => {
-  const [isChecked, setIsChecked] = useState(active || false);
-
-  const handleRadioClick = () => {
-    setIsChecked(!isChecked);
-  };
-
-  return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      <label style={{ cursor: 'pointer' }}>
-        <input
-          type="radio"
-          checked={isChecked}
-          onChange={handleRadioClick}
-          style={{ display: 'none' }}
-        />
-        <svg
-          version="1.2"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 802.000000 1374.000000"
-          width={'auto'}
-          height={size || 'auto'}
-          fill={color}
-          fillOpacity="1"
-        >
-          <g
-            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
-            stroke="none"
-          >
-            <path
-              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
--270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
--5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
-708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
-482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
--1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m1240 -421 c0
--220 55 -377 167 -485 143 -136 607 -254 1003 -254 237 0 424 27 667 97 234
-67 357 150 423 288 52 109 66 175 72 339 l6 148 621 -3 c616 -3 622 -3 716
--27 487 -122 831 -486 915 -968 12 -70 15 -205 15 -739 l0 -654 -3436 0 -3435
-0 4 678 c3 648 4 681 25 767 28 119 51 184 102 286 139 279 392 496 697 599
-166 55 203 58 848 59 l590 1 0 -132z m1125 -4278 l0 -1930 -1695 0 -1695 0 0
-213 0 214 98 6 c172 12 314 63 408 150 88 80 160 247 219 512 76 339 76 682
--1 1020 -57 256 -113 390 -199 483 -93 101 -237 159 -425 171 l-95 6 -3 543
--2 542 1695 0 1695 0 0 -1930z m3480 1391 l0 -538 -94 -7 c-180 -12 -339 -72
--423 -159 -55 -56 -105 -150 -147 -277 -132 -400 -153 -832 -60 -1248 58 -256
-118 -398 208 -488 101 -101 229 -151 414 -161 l102 -6 0 -218 0 -219 -1695 0
--1695 0 0 1930 0 1930 1695 0 1695 0 0 -539z m-3482 -5303 l-3 -1883 -1692 -3
--1693 -2 0 418 0 419 118 6 c189 10 328 59 428 150 151 137 275 597 275 1017
-0 239 -35 471 -107 710 -95 315 -259 442 -591 457 l-123 6 0 293 0 294 1695 0
-1695 0 -2 -1882z m3482 1593 l0 -288 -94 -7 c-180 -12 -339 -72 -423 -159 -55
--56 -105 -150 -147 -277 -132 -400 -153 -832 -60 -1248 58 -256 118 -398 208
--488 101 -101 229 -151 414 -161 l102 -6 0 -423 0 -424 -1695 0 -1695 0 0
-1885 0 1885 1695 0 1695 0 0 -289z m0 -4270 c0 -766 -1 -787 -61 -965 -134
--400 -474 -700 -899 -792 -63 -14 -170 -17 -686 -21 l-611 -4 -6 103 c-7 118
--40 246 -83 323 -83 149 -240 233 -579 309 -238 54 -543 72 -760 46 -212 -25
--480 -93 -609 -155 -191 -90 -287 -254 -304 -520 l-7 -100 -530 -3 c-576 -3
--707 4 -854 43 -243 66 -478 225 -635 430 -77 101 -166 277 -196 386 -47 176
--50 221 -50 942 l0 677 3435 0 3435 0 0 -699z"
-            />
-            <path
-              d="M3918 12240 c-165 -30 -300 -122 -391 -267 -79 -126 -100 -310 -52
--461 45 -144 155 -269 291 -334 221 -104 461 -62 635 111 115 115 169 242 169
-399 0 234 -161 455 -386 531 -71 23 -198 34 -266 21z"
-            />
-            <path
-              d="M1920 9074 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
--1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
-87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
-            />
-            <path
-              d="M5781 9055 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
--635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
--39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
-            />
-            <path
-              d="M1960 5614 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
--1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
-87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
-            />
-            <path
-              d="M5781 5595 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
--635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
--39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
-            />
-            <path
-              d="M3883 2525 c-108 -23 -190 -70 -276 -156 -114 -114 -167 -239 -167
--397 0 -236 159 -453 390 -533 92 -31 237 -32 337 -1 127 39 241 129 316 249
-79 126 100 310 52 461 -86 272 -372 438 -652 377z"
-            />
-          </g>
-        </svg>
-      </label>
-    </div>
-  );
-};
-
-export default SixPlayersSide;

src/Icons/Layouts/ThreePlayers.tsx

@@ -1,76 +0,0 @@
-import { useState } from 'react';
-import { IconProps } from '../../Types/Icon';
-
-const ThreePlayers = ({ size, color, active }: IconProps) => {
-  const [isChecked, setIsChecked] = useState(active || false);
-
-  const handleRadioClick = () => {
-    setIsChecked(!isChecked);
-  };
-
-  return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      <label style={{ cursor: 'pointer' }}>
-        <input
-          type="radio"
-          checked={isChecked}
-          onChange={handleRadioClick}
-          style={{ display: 'none' }}
-        />
-        <svg
-          version="1.2"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 802.000000 1374.000000"
-          width={'auto'}
-          height={size || 'auto'}
-          fill={color}
-          fillOpacity="1"
-        >
-          <g
-            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
-            stroke="none"
-          >
-            <path
-              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
--270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
--5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
-708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
-482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
--1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m2365 -3459 l0
--3170 -1695 0 -1695 0 0 853 0 854 113 6 c184 10 325 60 423 150 151 137 275
-597 275 1017 0 239 -35 471 -107 710 -94 314 -259 442 -587 457 l-118 6 4 626
-c3 596 4 630 25 716 28 119 51 184 102 286 139 279 392 496 697 599 177 59
-153 58 1411 59 l1152 1 0 -3170z m2555 3141 c50 -13 132 -41 184 -62 385 -157
-654 -493 726 -906 13 -74 15 -366 15 -2153 l0 -2067 -112 -6 c-136 -8 -246
--34 -337 -82 -122 -64 -190 -159 -255 -355 -132 -400 -153 -832 -60 -1248 58
--256 118 -398 208 -488 106 -106 230 -152 434 -161 l122 -6 0 -2067 c0 -2273
-3 -2142 -61 -2334 -134 -400 -470 -696 -899 -793 -69 -16 -261 -17 -2390 -20
--1547 -3 -2353 0 -2430 7 -208 18 -383 80 -558 197 -281 187 -466 482 -518
-828 -11 68 -14 230 -14 661 l0 571 113 6 c184 10 325 60 423 150 151 137 275
-597 275 1017 0 239 -35 471 -107 710 -94 313 -259 442 -586 457 l-118 6 0 868
-0 869 1695 0 1695 0 0 -3170 0 -3170 45 0 45 0 0 6385 0 6386 1188 -4 1187 -3
-90 -23z"
-            />
-            <path
-              d="M1950 10354 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
--1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
-87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
-            />
-            <path
-              d="M5741 7395 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
--635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
--39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
-            />
-            <path
-              d="M1950 4474 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
--1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
-87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
-            />
-          </g>
-        </svg>
-      </label>
-    </div>
-  );
-};
-
-export default ThreePlayers;

src/Icons/Layouts/ThreePlayersSide.tsx

@@ -1,76 +0,0 @@
-import { useState } from 'react';
-import { IconProps } from '../../Types/Icon';
-
-const ThreePlayersSide = ({ size, color, active }: IconProps) => {
-  const [isChecked, setIsChecked] = useState(active || false);
-
-  const handleRadioClick = () => {
-    setIsChecked(!isChecked);
-  };
-
-  return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      <label style={{ cursor: 'pointer' }}>
-        <input
-          type="radio"
-          checked={isChecked}
-          onChange={handleRadioClick}
-          style={{ display: 'none' }}
-        />
-        <svg
-          version="1.2"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 802.000000 1374.000000"
-          width={'auto'}
-          height={size || 'auto'}
-          fill={color}
-          fillOpacity="1"
-        >
-          <g
-            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
-            stroke="none"
-          >
-            <path
-              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
--270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
--5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
-708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
-482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
--1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m2375 -4524 l0
--4235 -1700 0 -1700 0 0 1513 0 1514 98 6 c172 12 314 63 408 150 88 80 160
-247 219 512 76 339 76 682 -1 1020 -57 256 -113 390 -199 483 -93 101 -237
-159 -425 171 l-95 6 0 1020 c0 942 1 1026 18 1105 92 436 387 770 804 910 177
-59 152 58 1416 59 l1157 1 0 -4235z m2545 4206 c50 -13 132 -41 184 -62 385
--157 654 -493 726 -906 13 -72 15 -244 15 -1088 l0 -1002 -82 -8 c-171 -14
--325 -75 -405 -158 -55 -56 -105 -150 -147 -277 -132 -400 -153 -832 -60
--1248 58 -256 118 -398 208 -488 97 -97 226 -149 399 -161 l87 -6 0 -1518 0
--1519 -1685 0 -1685 0 0 4235 0 4236 1178 -4 1177 -3 90 -23z m925 -10100 c0
--1724 3 -1646 -61 -1835 -134 -400 -474 -700 -899 -792 -63 -14 -170 -17 -686
--21 l-611 -4 -7 86 c-8 103 -43 230 -82 300 -83 149 -240 233 -579 309 -238
-54 -543 72 -760 46 -212 -25 -480 -93 -609 -155 -185 -87 -281 -245 -303 -496
-l-8 -84 -530 -3 c-576 -3 -707 4 -854 43 -243 66 -478 225 -635 430 -77 101
--166 277 -196 386 -51 188 -50 155 -50 1812 l0 1547 3435 0 3435 0 0 -1569z"
-            />
-            <path
-              d="M1920 9544 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
--1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
-87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
-            />
-            <path
-              d="M5811 9525 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
--635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
--39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
-            />
-            <path
-              d="M3883 2485 c-108 -23 -190 -70 -276 -156 -114 -114 -167 -239 -167
--397 0 -236 159 -453 390 -533 92 -31 237 -32 337 -1 127 39 241 129 316 249
-79 126 100 310 52 461 -86 272 -372 438 -652 377z"
-            />
-          </g>
-        </svg>
-      </label>
-    </div>
-  );
-};
-
-export default ThreePlayersSide;

src/Icons/Layouts/TwoPlayersOppositeLandscape.tsx

@@ -1,68 +0,0 @@
-import { useState } from 'react';
-import { IconProps } from '../../Types/Icon';
-
-const TwoPlayerOppositeLandscape = ({ size, color, active }: IconProps) => {
-  const [isChecked, setIsChecked] = useState(active || false);
-
-  const handleRadioClick = () => {
-    setIsChecked(!isChecked);
-  };
-
-  return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      <label style={{ cursor: 'pointer' }}>
-        <input
-          type="radio"
-          checked={isChecked}
-          onChange={handleRadioClick}
-          style={{ display: 'none' }}
-        />
-        <svg
-          version="1.2"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 802.000000 1374.000000"
-          width={'auto'}
-          height={size || 'auto'}
-          fill={color}
-          fillOpacity="1"
-        >
-          <g
-            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
-            stroke="none"
-          >
-            <path
-              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
--270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
--5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
-708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
-482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
--1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m2365 -6679 l0
--6390 -1107 0 c-633 0 -1150 5 -1207 10 -325 32 -630 202 -830 465 -77 101
--166 277 -196 386 -51 190 -50 117 -50 2305 l0 2041 113 6 c184 10 325 60 423
-150 151 137 275 597 275 1017 0 239 -35 471 -107 710 -94 313 -259 442 -587
-457 l-117 6 3 2096 3 2096 21 90 c29 119 52 184 103 286 139 279 392 496 697
-599 177 59 153 58 1411 59 l1152 1 0 -6390z m2555 6361 c50 -13 132 -41 184
--62 385 -157 654 -493 726 -906 13 -74 15 -365 15 -2148 l0 -2062 -117 -6
-c-140 -7 -249 -33 -342 -82 -122 -64 -190 -159 -255 -355 -132 -400 -153 -832
--60 -1248 58 -256 118 -398 208 -488 107 -107 231 -152 439 -161 l127 -6 0
--2072 c0 -2279 3 -2147 -61 -2339 -137 -410 -497 -719 -929 -797 -61 -11 -298
--14 -1235 -14 l-1160 0 -3 6388 -2 6388 1187 -4 1188 -3 90 -23z"
-            />
-            <path
-              d="M1950 7414 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
--1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
-87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
-            />
-            <path
-              d="M5731 7405 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
--635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
--39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
-            />
-          </g>
-        </svg>
-      </label>
-    </div>
-  );
-};
-
-export default TwoPlayerOppositeLandscape;

src/Icons/Layouts/TwoPlayersOppositePortrait.tsx

@@ -1,68 +0,0 @@
-import { useState } from 'react';
-import { IconProps } from '../../Types/Icon';
-
-const TwoPlayersOppositePortrait = ({ size, color, active }: IconProps) => {
-  const [isChecked, setIsChecked] = useState(active || false);
-
-  const handleRadioClick = () => {
-    setIsChecked(!isChecked);
-  };
-
-  return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      <label style={{ cursor: 'pointer' }}>
-        <input
-          type="radio"
-          checked={isChecked}
-          onChange={handleRadioClick}
-          style={{ display: 'none' }}
-        />
-        <svg
-          version="1.2"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 802.000000 1374.000000"
-          width={'auto'}
-          height={size || 'auto'}
-          fill={color}
-          fillOpacity="1"
-        >
-          <g
-            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
-            stroke="none"
-          >
-            <path
-              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
--270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
--5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
-708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
-482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
--1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m1239 -396 c12
--203 66 -342 168 -440 103 -98 398 -195 723 -238 139 -18 401 -21 530 -5 212
-25 480 93 609 155 193 92 288 256 303 523 l6 113 621 -3 c616 -3 622 -3 716
--27 487 -122 831 -486 915 -968 13 -74 15 -431 15 -2729 l0 -2644 -3435 0
--3435 0 3 2668 3 2667 21 90 c29 120 52 184 103 286 139 279 392 496 697 599
-166 55 204 58 844 59 l586 1 7 -107z m4606 -8972 c0 -2881 4 -2692 -61 -2885
--134 -400 -474 -700 -899 -792 -63 -14 -170 -17 -686 -21 l-611 -4 -6 113
-c-15 270 -108 435 -298 526 -139 67 -366 127 -594 157 -139 18 -400 21 -530 5
--212 -25 -480 -93 -609 -155 -194 -92 -288 -257 -305 -530 l-6 -110 -530 -3
-c-576 -3 -707 4 -854 43 -243 66 -478 225 -635 430 -77 101 -166 277 -196 386
--52 192 -50 73 -50 2862 l0 2597 3435 0 3435 0 0 -2619z"
-            />
-            <path
-              d="M3918 12310 c-165 -30 -300 -122 -391 -267 -79 -126 -100 -310 -52
--461 45 -144 155 -269 291 -334 221 -104 461 -62 635 111 115 115 169 242 169
-399 0 234 -161 455 -386 531 -71 23 -198 34 -266 21z"
-            />
-            <path
-              d="M3883 2545 c-108 -23 -190 -70 -276 -156 -114 -114 -167 -239 -167
--397 0 -236 159 -453 390 -533 92 -31 237 -32 337 -1 127 39 241 129 316 249
-79 126 100 310 52 461 -86 272 -372 438 -652 377z"
-            />
-          </g>
-        </svg>
-      </label>
-    </div>
-  );
-};
-
-export default TwoPlayersOppositePortrait;

src/Icons/Layouts/TwoPlayersSameSide.tsx

@@ -1,68 +0,0 @@
-import { useState } from 'react';
-import { IconProps } from '../../Types/Icon';
-
-const TwoPlayersSameSide = ({ size, color, active }: IconProps) => {
-  const [isChecked, setIsChecked] = useState(active || false);
-
-  const handleRadioClick = () => {
-    setIsChecked(!isChecked);
-  };
-
-  return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      <label style={{ cursor: 'pointer' }}>
-        <input
-          type="radio"
-          checked={isChecked}
-          onChange={handleRadioClick}
-          style={{ display: 'none' }}
-        />
-        <svg
-          version="1.2"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 802.000000 1374.000000"
-          width={'auto'}
-          height={size || 'auto'}
-          fill={color}
-          fillOpacity="1"
-        >
-          <g
-            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
-            stroke="none"
-          >
-            <path
-              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
--270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
--5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
-708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
-482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
--1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m4920 -318 c50
--13 132 -41 184 -62 385 -157 654 -493 726 -906 13 -74 15 -429 15 -2714 l0
--2629 -3435 0 -3435 0 0 853 0 854 118 6 c189 10 328 59 428 150 151 137 275
-597 275 1017 0 239 -35 471 -107 710 -95 315 -259 442 -592 457 l-123 6 4 626
-c3 596 4 630 25 716 28 119 51 184 102 286 139 279 392 496 697 599 185 62 35
-58 2643 56 l2385 -1 90 -24z m925 -9040 c0 -2892 4 -2702 -61 -2895 -134 -400
--470 -696 -899 -793 -69 -16 -261 -17 -2390 -20 -1547 -3 -2353 0 -2430 7
--208 18 -383 80 -558 197 -281 187 -466 482 -518 828 -11 68 -14 231 -14 671
-l0 581 118 6 c189 10 328 59 428 150 151 137 275 597 275 1017 0 239 -35 471
--107 710 -95 315 -259 442 -591 457 l-123 6 0 853 0 854 3435 0 3435 0 0
--2629z"
-            />
-            <path
-              d="M1960 10354 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
--1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
-87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
-            />
-            <path
-              d="M1960 4494 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
--1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
-87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
-            />
-          </g>
-        </svg>
-      </label>
-    </div>
-  );
-};
-
-export default TwoPlayersSameSide;

src/Icons/PoisonIcon.tsx

@@ -1,26 +0,0 @@
-import { IconProps } from '../Types/Icon';
-
-const PoisonIcon = ({ color, size, opacity, showStroke }: IconProps) => {
-  return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        xmlSpace="preserve"
-        viewBox="0 0 152.667 223"
-        width={size}
-        height={size}
-        fill={color || 'black'}
-        fillOpacity={opacity || '0.5'}
-        stroke={showStroke ? 'white' : 'none'}
-        stroke-width={showStroke ? '7' : 'none'}
-        paint-order={showStroke ? 'stroke fill markers' : ''}
-      >
-        <g transform="translate(0.000000,0.000000) scale(0.900000,0.900000)">
-          <path d="M64.333 20.833V223l24-20.333V0M76.334 46.5C34.176 46.5 0 75.644 0 111.454c0 35.904 34.176 65.048 76.334 65.048 42.157 0 76.333-29.144 76.333-65.048 0-35.81-34.176-64.954-76.333-64.954zm.166 101.667c-23.748 0-43-16.146-43-36.083S52.752 76 76.5 76s43 16.147 43 36.083-19.252 36.084-43 36.084z" />
-        </g>
-      </svg>
-    </div>
-  );
-};
-
-export default PoisonIcon;

src/Icons/generated/Cog.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+import PropTypes from 'prop-types';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const Cog = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      paintOrder="stroke fill markers"
+      viewBox="0 0 182 182"
+      height={props.size || 16}
+      width={props.size || 16}
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d="M80.7 1c-4.6 1.4-9.4 5.7-11.6 10.3-1.6 3.4-2.1 6.2-2.1 12.8v8.5l-5.7-5.4C48.2 15 38.1 15 26.3 27.1 14.9 38.9 15.2 49.2 27.4 61l5.7 5.5-10.1.6c-9 .5-10.4.8-14.2 3.5-2.3 1.6-5.2 4.9-6.6 7.4-2.1 4-2.3 5.5-2 14 .4 11.1 2.4 15.4 9 19.8 3.5 2.2 5.3 2.7 13.4 3l9.4.4-5.2 5.7c-11.6 12.7-11.8 22.4-.5 34 5.7 5.8 11.5 9 16.3 9.1 7 0 9.7-1.3 16.9-8.2l7.3-6.8.4 9.9c.3 8.6.7 10.3 3 13.8 1.5 2.2 4.4 5.1 6.5 6.4 3.4 2.1 5 2.4 14.3 2.4s10.9-.3 14.3-2.4c2.1-1.3 5-4.1 6.5-6.3 2.3-3.5 2.7-5.3 3-13.5l.4-9.5 4.2 4c7.3 6.9 11.1 9.2 16.4 9.9 7 .8 11.7-1.1 18.6-7.6 12.7-12.1 12.9-22.2.5-34.7l-6.1-6.2 9.9-.4c8.9-.3 10.2-.6 14.2-3.3 6.2-4.2 8.5-9.1 8.9-19.2.5-10.7-2.4-17.7-9-21.9-3.8-2.5-5.5-2.9-14.2-3.2l-9.8-.4 6.1-6.2c12.2-12.4 12.2-22.4 0-34.3-11.6-11.2-20.5-11.2-33.4.2l-6.3 5.5-.4-9.4c-.3-8.1-.8-9.9-3-13.4-4.4-6.6-8.7-8.6-19.3-8.9-4.9-.1-10.3.2-11.8.7zm24.4 59.9c5.9 3 12.1 9.2 15 14.9 2.1 4 2.4 6.1 2.4 14.7 0 8.5-.3 10.7-2.3 14.5-3.2 6.1-8.7 11.6-14.7 14.8-4.5 2.4-6.1 2.7-15 2.7s-10.5-.3-15-2.7c-6-3.2-11.5-8.7-14.7-14.8-3.1-6-3.7-18.6-1.3-25.9 2.7-8.3 12.1-17.4 20.6-20 6-1.8 19.9-.8 25 1.8z" />
+    </svg>
+  );
+};
+Cog.propTypes = {
+  title: PropTypes.string,
+};
+export default Cog;

src/Icons/generated/CommanderTax.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+import PropTypes from 'prop-types';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const CommanderTax = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      paintOrder="stroke fill markers"
+      viewBox="0 0 325 325"
+      height={props.size || 16}
+      width={props.size || 16}
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d="M162 168c-40.9 0-74-33.1-74-74s33.1-74 74-74 74 33.1 74 74-33.1 74-74 74zM159.9 351.8c-11.4.3-22.5.7-33.2 1.2-10.6.6-20.8 1.3-30.5 1.8-9.6.5-18.8.6-27.2.5-8.4-.6-16.1-1.6-23-3.4-6.9-2.3-12.9-5.5-18.1-9.5-5-4.7-9.1-10.4-12.2-16.9-3.1-7.1-5.2-15-6.3-23.4-1.1-8.8-1.2-17.9-.4-27.1.8-9.2 2.4-17.7 4.7-25.3 2.2-7.4 5.2-13.9 8.8-19.5 3.6-5.3 7.8-9.9 12.8-13.6 4.8-3.7 10.5-6.9 16.8-9.5 6.4-2.9 13.6-5.4 21.5-7.6 7.9-2.4 16.6-4.6 26-6.5 9.4-2.1 19.4-3.8 29.9-5 10.6-1.3 21.7-2 33-2s22.4.7 33 2c10.5 1.2 20.6 2.9 30 5 9.4 1.9 18.2 4.1 26.2 6.5 7.9 2.3 15.2 4.8 21.7 7.6 6.4 2.7 12.2 5.8 17.1 9.5 5.1 3.8 9.4 8.3 12.9 13.7 3.7 5.5 6.7 12.1 8.9 19.5 2.3 7.7 3.8 16.2 4.5 25.3.7 9.2.4 18.3-.9 27.1-1.3 8.4-3.6 16.2-6.8 23.3-3.4 6.4-7.8 11.9-13.1 16.4-5.5 3.9-11.8 6.9-19 9.1-7.3 1.6-15.4 2.6-24.1 3-8.8.1-18.3-.1-28.2-.5-10-.4-20.5-.9-31.4-1.3-10.8-.3-22-.5-33.4-.4z" />
+    </svg>
+  );
+};
+CommanderTax.propTypes = {
+  title: PropTypes.string,
+};
+export default CommanderTax;

src/Icons/generated/Energy.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+import PropTypes from 'prop-types';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const Energy = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      paintOrder="stroke fill markers"
+      viewBox="-30 -20 500 500"
+      height={props.size || 16}
+      width={props.size || 16}
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d="M211.406 436.526c-2.402-2.572-3.027-7.384-5.033-10.492-2.38-3.69-5.3-6.987-7.828-10.568-3.312-4.695-7.093-9.054-10.44-13.736-5.726-8.007-12.229-14.967-19.081-22.02-16.815-17.312-34.377-33.318-54.334-46.98-30.92-21.168-63.694-39.695-98.837-52.885-2.439-.915 0 0-15.853-7.748 2.992-4.806 21.448-30.966 25.774-37.908 7.225-11.593 12.42-24.268 17.804-36.78 6.854-15.93 12.994-32.237 17.91-48.866 6.277-21.243 11.55-42.794 15.618-64.572 1.132-6.062 7.872-57.414 11.893-83.688 35.273 10.169 23.174 7.102 31.173 9.166 22.159 5.721 45.406 6.85 68.15 8.601 12.963.999 25.81.9 38.793.7 19.303-.297 38.646-1.21 57.783-3.864 9.526-1.321 19.014-3.12 28.33-5.513 7.373-1.894 12.123-2.96 27.929-9.09 1.743 6.78 19.708 130.486 43.887 187.366 9.562 22.493 38.407 71.889 47.47 83.038-12.888 4.825-64.739 28.657-91.663 44.666-33.069 19.663-64.332 43.76-90.14 72.401-12.18 13.518-21.737 29.346-31.578 44.583-3.84 5.944-5.32 6.751-7.727 4.19zm10.34-49.414c6.863-35.947 26.661-81.689 57.558-132.975 10.423-17.3 30.243-46.992 42.27-63.326 7.459-10.129 9.851-13.863 9.851-15.378 0-1.128-.428-2.164-.984-2.377-.541-.208-5.325.41-10.631 1.376-32.573 5.92-65.72 7.888-91.484 5.432-11.66-1.111-20.197-2.515-21.162-3.478-.683-.684 1.955-17.361 4.103-25.94 8.986-35.893 29.973-73.608 56.785-102.046 4.13-4.38 7.34-8.13 7.137-8.334-.205-.204-2.746.39-5.649 1.32-34.024 10.905-71.853 12.001-99.09 2.872-3.72-1.247-6.862-2.172-6.986-2.058-.122.115.149 3.804.602 8.2 4.272 41.354-15.366 95.567-56.564 156.15-6.195 9.112-18.317 25.405-25.358 34.088-2.84 3.502-4.053 5.476-3.45 5.615.51.12 5.718-1.004 11.573-2.494 16.713-4.255 30.695-6.866 49.796-9.3 14.614-1.86 50.604-1.691 63.113.298 8.136 1.293 19.394 3.788 20.05 4.444.134.135-.192 1.577-.726 3.205-2.83 8.624-6.468 25.773-8.144 38.396-3.223 24.26-3.22 63.313.005 92.137 1.268 11.337 3.516 25.878 4.162 26.922.55.887.836-.245 3.224-12.748z" />
+    </svg>
+  );
+};
+Energy.propTypes = {
+  title: PropTypes.string,
+};
+export default Energy;

src/Icons/generated/Experience.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+import PropTypes from 'prop-types';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const Experience = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      paintOrder="stroke fill markers"
+      viewBox="-50 0 980 980"
+      height={props.size || 16}
+      width={props.size || 16}
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d="M.698 153.992c86.595.1 173.239-.645 259.784.347 24.182 12.066 46.426 28.153 67.579 45.035-10.527 37.24-7.697 79.595 14.45 112.266 15.69 24.727 42.85 40.715 71.5 45.283l.05 447.523c-98.065-53.774-193.598-113.705-277.76-187.788-28.848-25.62-56.952-56.457-63.804-95.781-8.193-46.773 11.42-92.156 12.91-138.632.646-36.097-.1-73.387-14.698-107.051-13.704-36.445-42.104-64.102-63.058-96.179C2.238 171.767.898 162.83.699 153.991zm562.022 45.133c21.45-16.484 43.695-32.67 67.876-44.787 86.497-.992 173.041-.247 259.587-.347-.647 7.397-.447 15.293-5.015 21.599-19.415 31.728-47.27 58.093-62.067 92.751-17.527 36.097-18.719 77.16-17.576 116.537 2.233 45.332 20.408 89.623 13.009 135.305-6.852 39.72-35.204 70.754-64.251 96.624-84.807 74.926-181.532 134.858-280.342 189.376-.05-149.703-.05-299.407-.05-449.11 32.175-3.924 62.463-22.84 78.154-51.441 18.868-31.876 20.458-71.4 10.675-106.506z" />
+    </svg>
+  );
+};
+Experience.propTypes = {
+  title: PropTypes.string,
+};
+export default Experience;

src/Icons/generated/Layouts/FivePlayers.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+import PropTypes from 'prop-types';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const FivePlayers = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size || 16}
+      height={props.size || 16}
+      viewBox="0 0 802 1374"
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d="M159.5 19.1c-17.6 1.8-34.7 7.2-52.2 16.4-14.4 7.5-25 15.3-36.8 27-20.3 20.4-33.6 45.2-40.7 76l-2.3 10-.3 531.5c-.2 382 0 534.3.8 541.5 2.2 20.1 7.2 36.4 16.5 54.3 7.3 14 15.2 24.6 26.7 36.1 20.1 20.1 41 31.8 70.8 39.8l10.5 2.8h497l11.7-3.2c27-7.4 47-18.5 66.9-37.1 21.5-20.2 37-48.2 43.6-79.2 1.7-8.1 1.8-30.9 1.8-548 0-518.6-.1-539.8-1.8-548-12-55.7-49.8-97.4-103.5-114.4-20.5-6.4-.6-6-262.7-6.2-130.9-.1-241.6.2-246 .7zM396 269v221H57V409.3l11.3-.6c18.4-1 32.5-6 42.3-15C125.7 380 138.1 334 138.1 292c0-23.9-3.5-47.1-10.7-71-9.5-31.4-25.9-44.2-58.8-45.7l-11.9-.6.6-11.6c1.1-18.8 4.8-33.4 12.7-49.2C83.9 86 109.2 64.3 139.7 54c17.7-5.9 15.3-5.8 141.1-5.9L396 48v221zM651.5 50.9c5 1.3 13.2 4.1 18.4 6.2 38.5 15.7 65.4 49.3 72.6 90.6 1.2 6.9 1.5 19.8 1.5 68.3v59.7l-11.2.6c-13.6.8-24.6 3.4-33.7 8.2-12.2 6.4-19 15.9-25.5 35.5-13.2 40-15.3 83.2-6 124.8 5.8 25.6 11.8 39.8 20.8 48.8 10.6 10.6 23 15.2 43.4 16.1l12.2.6v353.4l-11.2.6c-13.6.8-24.6 3.4-33.7 8.2-12.2 6.4-19 15.9-25.5 35.5-13.2 40-15.3 83.2-6 124.8 5.8 25.6 11.8 39.8 20.8 48.8 10.6 10.6 23 15.2 43.4 16.1l12.2.6v59.7c0 65.6-.2 69-6.1 86.4-13.7 41-49.7 71.9-92.9 79.7-6.1 1.1-29.8 1.4-123.5 1.4h-116l-.3-638.8-.2-638.8 118.7.4 118.8.3 9 2.3zM396 692v192H57V805.3l11.3-.6c18.4-1 32.5-6 42.3-15C125.7 776 138.1 730 138.1 688c0-23.9-3.5-47.1-10.7-71-9.4-31.3-25.9-44.2-58.6-45.7l-11.8-.6V500h339v192zm0 417.5V1326H285.3c-63.3 0-115-.5-120.7-1-32.5-3.2-63-20.2-83-46.5-15-19.7-24.6-47.5-24.6-71.6v-6.6l11.3-.6c18.4-1 32.5-6 42.3-15 15.1-13.7 27.5-59.7 27.5-101.7 0-23.9-3.5-47.1-10.7-71-9.4-31.3-25.9-44.2-58.6-45.7l-11.8-.6V893h339v216.5z" />
+      <path d="M195 236.6c-18.6 4.9-33.7 19-40.1 37.4-1.7 5-2.2 8.9-2.3 16.5-.1 12.8 2.5 21.5 9.4 31.8 10.7 16 27 24.7 46.4 24.7 27.2 0 49.5-18 55.1-44.6 1.8-8.7 1.8-14.1 0-22.6-4.4-21.2-22.5-39.4-43.3-43.7-7.2-1.5-18.5-1.3-25.2.5zM574.1 340.5c-14.3 4.6-27 15.7-33.3 29.1-10.4 22.2-6.2 46.1 11.1 63.5 11.5 11.5 24.2 16.9 39.9 16.9 23.6 0 45.3-15.9 53.3-39 3.1-9.2 3.2-23.7.1-33.7-3.9-12.7-12.9-24.1-24.9-31.6-12.5-7.9-31.4-10-46.2-5.2zM574.1 928.5c-14.3 4.6-27 15.7-33.3 29.1-10.4 22.2-6.2 46.1 11.1 63.5 11.5 11.5 24.2 16.9 39.9 16.9 23.6 0 45.3-15.9 53.3-39 3.1-9.2 3.2-23.7.1-33.7-3.9-12.7-12.9-24.1-24.9-31.6-12.5-7.9-31.4-10-46.2-5.2zM195 632.6c-18.6 4.9-33.7 19-40.1 37.4-1.7 5-2.2 8.9-2.3 16.5-.1 12.8 2.5 21.5 9.4 31.8 10.7 16 27 24.7 46.4 24.7 27.2 0 49.5-18 55.1-44.6 1.8-8.7 1.8-14.1 0-22.6-4.4-21.2-22.5-39.4-43.3-43.7-7.2-1.5-18.5-1.3-25.2.5zM195 1027.6c-18.6 4.9-33.7 19-40.1 37.4-1.7 5-2.2 8.9-2.3 16.5-.1 12.8 2.5 21.5 9.4 31.8 10.7 16 27 24.7 46.4 24.7 27.2 0 49.5-18 55.1-44.6 4-19-1.3-36.4-15.6-50.7-11.5-11.6-24.1-16.8-40.2-16.6-4 0-9.7.7-12.7 1.5z" />
+    </svg>
+  );
+};
+FivePlayers.propTypes = {
+  title: PropTypes.string,
+};
+export default FivePlayers;

src/Icons/generated/Layouts/FivePlayersSide.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+import PropTypes from 'prop-types';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const FivePlayersSide = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size || 16}
+      height={props.size || 16}
+      viewBox="0 0 802 1374"
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d="M159.5 19.1c-17.6 1.8-34.7 7.2-52.2 16.4-14.4 7.5-25 15.3-36.8 27-20.3 20.4-33.6 45.2-40.7 76l-2.3 10-.3 531.5c-.2 382 0 534.3.8 541.5 2.2 20.1 7.2 36.4 16.5 54.3 7.3 14 15.2 24.6 26.7 36.1 20.1 20.1 41 31.8 70.8 39.8l10.5 2.8h497l11.7-3.2c27-7.4 47-18.5 66.9-37.1 21.5-20.2 37-48.2 43.6-79.2 1.7-8.1 1.8-30.9 1.8-548 0-518.6-.1-539.8-1.8-548-12-55.7-49.8-97.4-103.5-114.4-20.5-6.4-.6-6-262.7-6.2-130.9-.1-241.6.2-246 .7zM396 285.5V523H57V418.3l9.8-.6c17.2-1.2 31.4-6.3 40.8-15 8.8-8 16-24.7 21.9-51.2 7.6-33.9 7.6-68.2-.1-102-5.7-25.6-11.3-39-19.9-48.3-9.3-10.1-23.7-15.9-42.5-17.1l-9.5-.6.1-15c.1-21.7 3.3-36.1 12.1-54 14.1-28.4 39.2-50.1 70-60.5 17.7-5.9 15.3-5.8 141.1-5.9L396 48v237.5zM651.5 50.9c36 9.4 63.5 30.9 79.4 62 9.1 17.9 13.1 35 13.1 56.6v13.2l-9.4.7c-18 1.2-33.9 7.2-42.3 15.9-5.5 5.6-10.5 15-14.7 27.7-13.2 40-15.3 83.2-6 124.8 5.8 25.6 11.8 39.8 20.8 48.8 10.1 10.1 22.9 15.1 41.4 16.1l10.2.6V523H405V47.9l118.8.4 118.7.3 9 2.3zM395.8 767.2l.2 234.8H57V872.3l11.8-.6c18.9-1 32.8-5.9 42.8-15C126.7 843 139.1 797 139.1 755c0-23.9-3.5-47.1-10.7-71-9.5-31.5-25.9-44.2-59.1-45.7l-12.3-.6V532l169.3.2 169.2.3.3 234.7zM744 584.4v52.3l-9.4.7c-18 1.2-33.9 7.2-42.3 15.9-5.5 5.6-10.5 15-14.7 27.7-13.2 40-15.3 83.2-6 124.8 5.8 25.6 11.8 39.8 20.8 48.8 10.1 10.1 22.9 15.1 41.4 16.1l10.2.6V1002H405V532h339v52.4zm0 530c0 113.4.1 111.6-6.1 130-13.4 40-47.4 70-89.9 79.2-6.3 1.4-17 1.7-68.6 2.1l-61.1.4-.6-10.3c-.7-11.8-4-24.6-8.3-32.3-8.3-14.9-24-23.3-57.9-30.9-23.8-5.4-54.3-7.2-76-4.6-21.2 2.5-48 9.3-60.9 15.5-19.1 9-28.7 25.4-30.4 52l-.7 10-53 .3c-57.6.3-70.7-.4-85.4-4.3-24.3-6.6-47.8-22.5-63.5-43-7.7-10.1-16.6-27.7-19.6-38.6-4.9-18.3-5-19.6-5-127.7V1011h687v103.4z" />
+      <path d="M192 245.6c-18.6 4.9-33.7 19-40.1 37.4-1.7 5-2.2 8.9-2.3 16.5-.1 12.8 2.5 21.5 9.4 31.8 10.7 16 27 24.7 46.4 24.7 27.2 0 49.5-18 55.1-44.6 1.8-8.7 1.8-14.1 0-22.6-4.4-21.2-22.5-39.4-43.3-43.7-7.2-1.5-18.5-1.3-25.2.5zM578.1 247.5c-14.3 4.6-27 15.7-33.3 29.1-10.4 22.2-6.2 46.1 11.1 63.5 11.5 11.5 24.2 16.9 39.9 16.9 23.6 0 45.3-15.9 53.3-39 3.1-9.2 3.2-23.7.1-33.7-3.9-12.7-12.9-24.1-24.9-31.6-12.5-7.9-31.4-10-46.2-5.2zM196 699.6c-18.6 4.9-33.7 19-40.1 37.4-1.7 5-2.2 8.9-2.3 16.5-.1 12.8 2.5 21.5 9.4 31.8 10.7 16 27 24.7 46.4 24.7 27.2 0 49.5-18 55.1-44.6 1.8-8.7 1.8-14.1 0-22.6-4.4-21.2-22.5-39.4-43.3-43.7-7.2-1.5-18.5-1.3-25.2.5zM578.1 701.5c-14.3 4.6-27 15.7-33.3 29.1-10.4 22.2-6.2 46.1 11.1 63.5 11.5 11.5 24.2 16.9 39.9 16.9 23.6 0 45.3-15.9 53.3-39 3.1-9.2 3.2-23.7.1-33.7-3.9-12.7-12.9-24.1-24.9-31.6-12.5-7.9-31.4-10-46.2-5.2zM388.3 1121.5c-10.8 2.3-19 7-27.6 15.6-11.4 11.4-16.7 23.9-16.7 39.7 0 23.6 15.9 45.3 39 53.3 9.2 3.1 23.7 3.2 33.7.1 12.7-3.9 24.1-12.9 31.6-24.9 7.9-12.6 10-31 5.2-46.1-8.6-27.2-37.2-43.8-65.2-37.7z" />
+    </svg>
+  );
+};
+FivePlayersSide.propTypes = {
+  title: PropTypes.string,
+};
+export default FivePlayersSide;

src/Icons/generated/Layouts/FourPlayers.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+import PropTypes from 'prop-types';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const FourPlayers = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size || 16}
+      height={props.size || 16}
+      viewBox="0 0 802 1374"
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d="M159.5 19.1c-17.6 1.8-34.7 7.2-52.2 16.4-14.4 7.5-25 15.3-36.8 27-20.3 20.4-33.6 45.2-40.7 76l-2.3 10-.3 531.5c-.2 382 0 534.3.8 541.5 2.2 20.1 7.2 36.4 16.5 54.3 7.3 14 15.2 24.6 26.7 36.1 20.1 20.1 41 31.8 70.8 39.8l10.5 2.8h497l11.7-3.2c27-7.4 47-18.5 66.9-37.1 21.5-20.2 37-48.2 43.6-79.2 1.7-8.1 1.8-30.9 1.8-548 0-518.6-.1-539.8-1.8-548-12-55.7-49.8-97.4-103.5-114.4-20.5-6.4-.6-6-262.7-6.2-130.9-.1-241.6.2-246 .7zM396 365v317H57V511.3l11.3-.6c18.4-1 32.5-6 42.3-15C125.7 482 138.1 436 138.1 394c0-23.9-3.5-47.1-10.7-71-9.4-31.4-25.9-44.2-58.7-45.7l-11.8-.6.4-62.6c.3-59.6.4-63 2.5-71.6 2.8-11.9 5.1-18.4 10.2-28.6C83.9 86 109.2 64.3 139.7 54c17.7-5.9 15.3-5.8 141.1-5.9L396 48v317zM651.5 50.9c5 1.3 13.2 4.1 18.4 6.2 38.5 15.7 65.4 49.3 72.6 90.6 1.2 6.9 1.5 19.8 1.5 68.3v59.7l-11.2.6c-13.6.8-24.6 3.4-33.7 8.2-12.2 6.4-19 15.9-25.5 35.5-13.2 40-15.3 83.2-6 124.8 5.8 25.6 11.8 39.8 20.8 48.8 10.6 10.6 23 15.2 43.4 16.1l12.2.6V682H405V47.9l118.8.4 118.7.3 9 2.3zM396 1009v317H285.3c-63.3 0-115-.5-120.7-1-32.5-3.2-63-20.2-83-46.5-7.7-10.1-16.6-27.7-19.6-38.6-4.6-17.2-5-22.8-5-83.5v-57.1l11.3-.6c18.4-1 32.5-6 42.3-15 15.1-13.7 27.5-59.7 27.5-101.7 0-23.9-3.5-47.1-10.7-71-9.4-31.3-25.9-44.2-58.6-45.7l-11.8-.6V692h339v317zm348-231.2v85.9l-11.2.6c-13.6.8-24.6 3.4-33.7 8.2-12.2 6.4-19 15.9-25.5 35.5-13.2 40-15.3 83.2-6 124.8 5.8 25.6 11.8 39.8 20.8 48.8 10.6 10.6 23 15.2 43.4 16.1l12.2.6v59.7c0 65.6-.2 69-6.1 86.4-13.7 41-49.7 71.9-92.9 79.7-6.1 1.1-29.8 1.4-123.5 1.4h-116l-.3-316.8L405 692h339v85.8z" />
+      <path d="M195 338.6c-18.6 4.9-33.7 19-40.1 37.4-1.7 5-2.2 8.9-2.3 16.5-.1 12.8 2.5 21.5 9.4 31.8 10.7 16 27 24.7 46.4 24.7 27.2 0 49.5-18 55.1-44.6 1.8-8.7 1.8-14.1 0-22.6-4.4-21.2-22.5-39.4-43.3-43.7-7.2-1.5-18.5-1.3-25.2.5zM574.1 340.5c-14.3 4.6-27 15.7-33.3 29.1-10.4 22.2-6.2 46.1 11.1 63.5 11.5 11.5 24.2 16.9 39.9 16.9 23.6 0 45.3-15.9 53.3-39 3.1-9.2 3.2-23.7.1-33.7-3.9-12.7-12.9-24.1-24.9-31.6-12.5-7.9-31.4-10-46.2-5.2zM195 926.6c-18.6 4.9-33.7 19-40.1 37.4-1.7 5-2.2 8.9-2.3 16.5-.1 12.8 2.5 21.5 9.4 31.8 10.7 16 27 24.7 46.4 24.7 27.2 0 49.5-18 55.1-44.6 1.8-8.7 1.8-14.1 0-22.6-4.4-21.2-22.5-39.4-43.3-43.7-7.2-1.5-18.5-1.3-25.2.5zM574.1 928.5c-14.3 4.6-27 15.7-33.3 29.1-10.4 22.2-6.2 46.1 11.1 63.5 11.5 11.5 24.2 16.9 39.9 16.9 23.6 0 45.3-15.9 53.3-39 3.1-9.2 3.2-23.7.1-33.7-3.9-12.7-12.9-24.1-24.9-31.6-12.5-7.9-31.4-10-46.2-5.2z" />
+    </svg>
+  );
+};
+FourPlayers.propTypes = {
+  title: PropTypes.string,
+};
+export default FourPlayers;

src/Icons/generated/Layouts/FourPlayersSide.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+import PropTypes from 'prop-types';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const FourPlayersSide = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size || 16}
+      height={props.size || 16}
+      viewBox="0 0 802 1374"
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d="M159.5 19.1c-17.6 1.8-34.7 7.2-52.2 16.4-14.4 7.5-25 15.3-36.8 27-20.3 20.4-33.6 45.2-40.7 76l-2.3 10-.3 531.5c-.2 382 0 534.3.8 541.5 2.2 20.1 7.2 36.4 16.5 54.3 7.3 14 15.2 24.6 26.7 36.1 20.1 20.1 41 31.8 70.8 39.8l10.5 2.8h497l11.7-3.2c27-7.4 47-18.5 66.9-37.1 21.5-20.2 37-48.2 43.6-79.2 1.7-8.1 1.8-30.9 1.8-548 0-518.6-.1-539.8-1.8-548-12-55.7-49.8-97.4-103.5-114.4-20.5-6.4-.6-6-262.7-6.2-130.9-.1-241.6.2-246 .7zm124 41.2c.1 21 5.7 36.8 16.7 47.4 14.3 13.6 60.7 25.4 100.3 25.4 23.7 0 42.4-2.7 66.7-9.7 23.4-6.7 35.7-15 42.3-28.8 5-10.6 6.6-17.6 7.2-32.9l.6-13.8 62.1.3c61.6.3 62.2.3 71.6 2.7 48.7 12.2 83.1 48.6 91.5 96.8 1.3 7.3 1.5 26.3 1.5 124.9V389l-343.2-.2-343.3-.3V271c0-109.1.1-118.1 1.8-126 9.2-43.6 38.7-77 80.4-91 16.6-5.5 20.3-5.8 84.8-5.9l59-.1v12.3zM396 687v289H57V805.3l12.8-.6c19.8-.9 33.6-5.6 43.8-15C128.7 776 141.1 730 141.1 688c0-23.9-3.5-47.1-10.7-71-9.6-31.9-26-44.4-60.1-45.7l-13.3-.6V398h339v289zm348-202.8v86.3h-12.3c-14.9.1-24.8 2.2-35.5 7.5-13.1 6.6-19.9 15.8-26.6 36-13.2 40-15.3 83.2-6 124.8 5.8 25.6 11.8 39.8 20.8 48.8 11.1 11 23.1 15.3 45.4 16.1l14.2.6V976H405V398h339v86.2zm0 617.2c0 127.7.1 124.4-6.1 143-13.4 40-47.4 70-89.9 79.2-6.3 1.4-17 1.7-68.6 2.1l-61.1.4-.7-8.6c-.8-10.3-4.3-23-8.2-30-8.3-14.9-24-23.3-57.9-30.9-23.8-5.4-54.3-7.2-76-4.6-21.2 2.5-48 9.3-60.9 15.5-18.5 8.7-28.1 24.5-30.3 49.6l-.8 8.4-53 .3c-57.6.3-70.7-.4-85.4-4.3-24.3-6.6-47.8-22.5-63.5-43-7.7-10.1-16.6-27.7-19.6-38.6-5-18.4-5-18.6-5-140.7V985h687v116.4z" />
+      <path d="M391.8 148c-16.5 3-30 12.2-39.1 26.7-7.9 12.6-10 31-5.2 46.1 4.5 14.4 15.5 26.9 29.1 33.4 22.1 10.4 46.1 6.2 63.5-11.1 11.5-11.5 16.9-24.2 16.9-39.9 0-23.4-16.1-45.5-38.6-53.1-7.1-2.3-19.8-3.4-26.6-2.1zM198 632.6c-18.6 4.9-33.7 19-40.1 37.4-1.7 5-2.2 8.9-2.3 16.5-.1 12.8 2.5 21.5 9.4 31.8 10.7 16 27 24.7 46.4 24.7 27.2 0 49.5-18 55.1-44.6 1.8-8.7 1.8-14.1 0-22.6-4.4-21.2-22.5-39.4-43.3-43.7-7.2-1.5-18.5-1.3-25.2.5zM570.1 634.5c-14.3 4.6-27 15.7-33.3 29.1-10.4 22.2-6.2 46.1 11.1 63.5 11.5 11.5 24.2 16.9 39.9 16.9 23.6 0 45.3-15.9 53.3-39 3.1-9.2 3.2-23.7.1-33.7-3.9-12.7-12.9-24.1-24.9-31.6-12.5-7.9-31.4-10-46.2-5.2zM388.3 1125.5c-10.8 2.3-19 7-27.6 15.6-11.4 11.4-16.7 23.9-16.7 39.7 0 23.6 15.9 45.3 39 53.3 9.2 3.1 23.7 3.2 33.7.1 12.7-3.9 24.1-12.9 31.6-24.9 7.9-12.6 10-31 5.2-46.1-8.6-27.2-37.2-43.8-65.2-37.7z" />
+    </svg>
+  );
+};
+FourPlayersSide.propTypes = {
+  title: PropTypes.string,
+};
+export default FourPlayersSide;

src/Icons/generated/Layouts/OnePlayerLandscape.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+import PropTypes from 'prop-types';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const OnePlayerLandscape = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size || 16}
+      height={props.size || 16}
+      viewBox="0 0 802 1374"
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d="M159.5 19.1c-17.6 1.8-34.7 7.2-52.2 16.4-14.4 7.5-25 15.3-36.8 27-20.3 20.4-33.6 45.2-40.7 76l-2.3 10-.3 531.5c-.2 382 0 534.3.8 541.5 2.2 20.1 7.2 36.4 16.5 54.3 7.3 14 15.2 24.6 26.7 36.1 20.1 20.1 41 31.8 70.8 39.8l10.5 2.8h497l11.7-3.2c27-7.4 47-18.5 66.9-37.1 21.5-20.2 37-48.2 43.6-79.2 1.7-8.1 1.8-30.9 1.8-548 0-518.6-.1-539.8-1.8-548-12-55.7-49.8-97.4-103.5-114.4-20.5-6.4-.6-6-262.7-6.2-130.9-.1-241.6.2-246 .7zm492 31.8c5 1.3 13.2 4.1 18.4 6.2 38.5 15.7 65.4 49.3 72.6 90.6 1.3 7.5 1.5 73.4 1.5 539.3 0 474.6-.2 531.7-1.5 539.6-8.5 48.4-45 85.9-94.5 97.1-6.9 1.6-26.1 1.7-239 2-154.7.3-235.3 0-243-.7-20.8-1.8-38.3-8-55.8-19.7-28.1-18.7-46.6-48.2-51.8-82.8-1.1-7.4-1.4-45.9-1.4-213.6V804.3l9.8-.6c17.2-1.2 31.4-6.3 40.8-15 8.8-8 16-24.7 21.9-51.2 7.6-33.9 7.6-68.2-.1-102-5.7-25.6-11.3-39-19.9-48.3-9.3-10.1-23.7-15.9-42.5-17.1l-9.5-.6v-208c0-196.2.1-208.5 1.8-216.5 9.2-43.6 38.7-77 80.4-91 18.5-6.2 3.5-5.8 264.3-5.6l238.5.1 9 2.4z" />
+      <path d="M192 631.6c-18.6 4.9-33.7 19-40.1 37.4-1.7 5-2.2 8.9-2.3 16.5-.1 12.8 2.5 21.5 9.4 31.8 10.7 16 27 24.7 46.4 24.7 27.2 0 49.5-18 55.1-44.6 1.8-8.7 1.8-14.1 0-22.6-4.4-21.2-22.5-39.4-43.3-43.7-7.2-1.5-18.5-1.3-25.2.5z" />
+    </svg>
+  );
+};
+OnePlayerLandscape.propTypes = {
+  title: PropTypes.string,
+};
+export default OnePlayerLandscape;

src/Icons/generated/Layouts/OnePlayerPortrait.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+import PropTypes from 'prop-types';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const OnePlayerPortrait = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size || 16}
+      height={props.size || 16}
+      viewBox="0 0 802 1374"
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d="M159.5 19.1c-17.6 1.8-34.7 7.2-52.2 16.4-14.4 7.5-25 15.3-36.8 27-20.3 20.4-33.6 45.2-40.7 76l-2.3 10-.3 531.5c-.2 382 0 534.3.8 541.5 2.2 20.1 7.2 36.4 16.5 54.3 7.3 14 15.2 24.6 26.7 36.1 20.1 20.1 41 31.8 70.8 39.8l10.5 2.8h497l11.7-3.2c27-7.4 47-18.5 66.9-37.1 21.5-20.2 37-48.2 43.6-79.2 1.7-8.1 1.8-30.9 1.8-548 0-518.6-.1-539.8-1.8-548-12-55.7-49.8-97.4-103.5-114.4-20.5-6.4-.6-6-262.7-6.2-130.9-.1-241.6.2-246 .7zm492 31.8c5 1.3 13.2 4.1 18.4 6.2 38.5 15.7 65.4 49.3 72.6 90.6 1.3 7.5 1.5 73.4 1.5 539.3 0 474.6-.2 531.7-1.5 539.6-8.5 48.4-45.4 86.3-94.5 97-6.3 1.4-17 1.7-68.6 2.1l-61.1.4-.7-9c-.8-10.6-4.3-23.4-8.2-30.6-8.3-14.9-24-23.3-57.9-30.9-23.8-5.4-54.3-7.2-76-4.6-21.2 2.5-48 9.3-60.9 15.5-18.6 8.8-28.2 24.8-30.4 50.2l-.7 8.8-53 .3c-30.9.2-57.8-.2-64.5-.8-56.5-5-101.1-48.5-108-105.2-.8-6.8-1-151.9-.8-538.8l.3-529.5 2.2-9c2.9-12 5.2-18.5 10.3-28.6C83.9 86 109.2 64.3 139.7 54c18.5-6.2 3.5-5.8 264.3-5.6l238.5.1 9 2.4z" />
+      <path d="M388.3 1124.5c-10.8 2.3-19 7-27.6 15.6-11.4 11.4-16.7 23.9-16.7 39.7 0 23.6 15.9 45.3 39 53.3 9.2 3.1 23.7 3.2 33.7.1 12.7-3.9 24.1-12.9 31.6-24.9 7.9-12.6 10-31 5.2-46.1-8.6-27.2-37.2-43.8-65.2-37.7z" />
+    </svg>
+  );
+};
+OnePlayerPortrait.propTypes = {
+  title: PropTypes.string,
+};
+export default OnePlayerPortrait;

src/Icons/generated/Layouts/SixPlayers.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+import PropTypes from 'prop-types';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const SixPlayers = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size || 16}
+      height={props.size || 16}
+      viewBox="0 0 802 1374"
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d="M159.5 19.1c-17.6 1.8-34.7 7.2-52.2 16.4-14.4 7.5-25 15.3-36.8 27-20.3 20.4-33.6 45.2-40.7 76l-2.3 10-.3 531.5c-.2 382 0 534.3.8 541.5 2.2 20.1 7.2 36.4 16.5 54.3 7.3 14 15.2 24.6 26.7 36.1 20.1 20.1 41 31.8 70.8 39.8l10.5 2.8h497l11.7-3.2c27-7.4 47-18.5 66.9-37.1 21.5-20.2 37-48.2 43.6-79.2 1.7-8.1 1.8-30.9 1.8-548 0-518.6-.1-539.8-1.8-548-12-55.7-49.8-97.4-103.5-114.4-20.5-6.4-.6-6-262.7-6.2-130.9-.1-241.6.2-246 .7zM396 266.5V485l-169.2-.2-169.3-.3-.3-37.6-.2-37.6 11.2-.6c18.5-1 32.6-6 42.4-15C125.7 380 138.1 334 138.1 292c0-23.9-3.5-47.1-10.7-71-9.5-31.4-25.9-44.2-58.8-45.7l-11.9-.6.6-11.6c1.1-18.8 4.8-33.4 12.7-49.2C83.9 86 109.2 64.3 139.7 54c17.7-5.9 15.3-5.8 141.1-5.9L396 48v218.5zM651.5 50.9c36 9.4 63.5 30.9 79.4 62C739.3 129.4 744 148 744 165v8.7l-11.2.6c-13.6.8-24.6 3.4-33.7 8.2-12.2 6.4-19 15.9-25.5 35.5-13.2 40-15.3 83.2-6 124.8 5.8 25.6 11.8 39.8 20.8 48.8 10.6 10.6 23 15.2 43.4 16.1l12.2.6V485l-169.2-.2-169.3-.3-.3-218.3-.2-218.3 118.7.4 118.8.3 9 2.3zM396 687v193H57V805.3l11.3-.6c18.4-1 32.5-6 42.3-15C125.7 776 138.1 730 138.1 688c0-23.9-3.5-47.1-10.7-71-9.4-31.3-25.9-44.2-58.6-45.7l-11.8-.6V494h339v193zm348-155.2v37.9l-11.2.6c-13.6.8-24.6 3.4-33.7 8.2-12.2 6.4-19 15.9-25.5 35.5-13.2 40-15.3 83.2-6 124.8 5.8 25.6 11.8 39.8 20.8 48.8 10.6 10.6 23 15.2 43.4 16.1l12.2.6V880H405V494h339v37.8zm-348 575.7V1326H285.3c-63.3 0-115-.5-120.7-1-32.5-3.2-63-20.2-83-46.5-15-19.7-24.6-47.5-24.6-71.6v-6.6l11.3-.6c18.4-1 32.5-6 42.3-15 15.1-13.7 27.5-59.7 27.5-101.7 0-23.9-3.5-47.1-10.7-71-9.4-31.3-25.9-44.2-58.6-45.7l-11.8-.6V889h339v218.5zm348-180.7v37.9l-11.2.6c-13.6.8-24.6 3.4-33.7 8.2-12.2 6.4-19 15.9-25.5 35.5-13.2 40-15.3 83.2-6 124.8 5.8 25.6 11.8 39.8 20.8 48.8 10.6 10.6 23 15.2 43.4 16.1l12.2.6v9.2c0 55.8-42.5 105.3-99 115.6-6.1 1.1-29.8 1.4-123.5 1.4h-116l-.3-217c-.1-119.4 0-217.6.3-218.3.3-.9 35.2-1.2 169.5-1.2h169v37.8z" />
+      <path d="M195 236.6c-18.6 4.9-33.7 19-40.1 37.4-1.7 5-2.2 8.9-2.3 16.5-.1 12.8 2.5 21.5 9.4 31.8 10.7 16 27 24.7 46.4 24.7 27.2 0 49.5-18 55.1-44.6 1.8-8.7 1.8-14.1 0-22.6-4.4-21.2-22.5-39.4-43.3-43.7-7.2-1.5-18.5-1.3-25.2.5zM574.1 238.5c-14.3 4.6-27 15.7-33.3 29.1-10.4 22.2-6.2 46.1 11.1 63.5 11.5 11.5 24.2 16.9 39.9 16.9 23.6 0 45.3-15.9 53.3-39 3.1-9.2 3.2-23.7.1-33.7-3.9-12.7-12.9-24.1-24.9-31.6-12.5-7.9-31.4-10-46.2-5.2zM195 632.6c-18.6 4.9-33.7 19-40.1 37.4-1.7 5-2.2 8.9-2.3 16.5-.1 12.8 2.5 21.5 9.4 31.8 10.7 16 27 24.7 46.4 24.7 27.2 0 49.5-18 55.1-44.6 1.8-8.7 1.8-14.1 0-22.6-4.4-21.2-22.5-39.4-43.3-43.7-7.2-1.5-18.5-1.3-25.2.5zM574.1 634.5c-14.3 4.6-27 15.7-33.3 29.1-10.4 22.2-6.2 46.1 11.1 63.5 11.5 11.5 24.2 16.9 39.9 16.9 23.6 0 45.3-15.9 53.3-39 3.1-9.2 3.2-23.7.1-33.7-3.9-12.7-12.9-24.1-24.9-31.6-12.5-7.9-31.4-10-46.2-5.2zM195 1027.6c-18.6 4.9-33.7 19-40.1 37.4-1.7 5-2.2 8.9-2.3 16.5-.1 12.8 2.5 21.5 9.4 31.8 10.7 16 27 24.7 46.4 24.7 27.2 0 49.5-18 55.1-44.6 4-19-1.3-36.4-15.6-50.7-11.5-11.6-24.1-16.8-40.2-16.6-4 0-9.7.7-12.7 1.5zM574.1 1029.5c-14.3 4.6-27 15.7-33.3 29.1-10.4 22.2-6.2 46.1 11.1 63.5 11.5 11.5 24.2 16.9 39.9 16.9 23.6 0 45.3-15.9 53.3-39 3.1-9.2 3.2-23.7.1-33.7-3.9-12.7-12.9-24.1-24.9-31.6-12.5-7.9-31.4-10-46.2-5.2z" />
+    </svg>
+  );
+};
+SixPlayers.propTypes = {
+  title: PropTypes.string,
+};
+export default SixPlayers;

src/Icons/generated/Layouts/SixPlayersSide.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+import PropTypes from 'prop-types';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const SixPlayersSide = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size || 16}
+      height={props.size || 16}
+      viewBox="0 0 802 1374"
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d="M159.5 19.1c-17.6 1.8-34.7 7.2-52.2 16.4-14.4 7.5-25 15.3-36.8 27-20.3 20.4-33.6 45.2-40.7 76l-2.3 10-.3 531.5c-.2 382 0 534.3.8 541.5 2.2 20.1 7.2 36.4 16.5 54.3 7.3 14 15.2 24.6 26.7 36.1 20.1 20.1 41 31.8 70.8 39.8l10.5 2.8h497l11.7-3.2c27-7.4 47-18.5 66.9-37.1 21.5-20.2 37-48.2 43.6-79.2 1.7-8.1 1.8-30.9 1.8-548 0-518.6-.1-539.8-1.8-548-12-55.7-49.8-97.4-103.5-114.4-20.5-6.4-.6-6-262.7-6.2-130.9-.1-241.6.2-246 .7zm124 42.1c0 22 5.5 37.7 16.7 48.5 14.3 13.6 60.7 25.4 100.3 25.4 23.7 0 42.4-2.7 66.7-9.7 23.4-6.7 35.7-15 42.3-28.8 5.2-10.9 6.6-17.5 7.2-33.9l.6-14.8 62.1.3c61.6.3 62.2.3 71.6 2.7 48.7 12.2 83.1 48.6 91.5 96.8 1.2 7 1.5 20.5 1.5 73.9V287H56.9l.4-67.8c.3-64.8.4-68.1 2.5-76.7 2.8-11.9 5.1-18.4 10.2-28.6C83.9 86 109.2 64.3 139.7 54c16.6-5.5 20.3-5.8 84.8-5.9l59-.1v13.2zM396 489v193H57v-42.7l9.8-.6c17.2-1.2 31.4-6.3 40.8-15 8.8-8 16-24.7 21.9-51.2 7.6-33.9 7.6-68.2-.1-102-5.7-25.6-11.3-39-19.9-48.3-9.3-10.1-23.7-15.9-42.5-17.1l-9.5-.6-.3-54.3L57 296h339v193zm348-139.1v53.8l-9.4.7c-18 1.2-33.9 7.2-42.3 15.9-5.5 5.6-10.5 15-14.7 27.7-13.2 40-15.3 83.2-6 124.8 5.8 25.6 11.8 39.8 20.8 48.8 10.1 10.1 22.9 15.1 41.4 16.1l10.2.6V682H405V296h339v53.9zM395.8 880.2l-.3 188.3-169.2.3-169.3.2V985.3l11.8-.6c18.9-1 32.8-5.9 42.8-15C126.7 956 139.1 910 139.1 868c0-23.9-3.5-47.1-10.7-71-9.5-31.5-25.9-44.2-59.1-45.7l-12.3-.6V692h339l-.2 188.2zM744 720.9v28.8l-9.4.7c-18 1.2-33.9 7.2-42.3 15.9-5.5 5.6-10.5 15-14.7 27.7-13.2 40-15.3 83.2-6 124.8 5.8 25.6 11.8 39.8 20.8 48.8 10.1 10.1 22.9 15.1 41.4 16.1l10.2.6V1069H405V692h339v28.9zm0 427c0 76.6-.1 78.7-6.1 96.5-13.4 40-47.4 70-89.9 79.2-6.3 1.4-17 1.7-68.6 2.1l-61.1.4-.6-10.3c-.7-11.8-4-24.6-8.3-32.3-8.3-14.9-24-23.3-57.9-30.9-23.8-5.4-54.3-7.2-76-4.6-21.2 2.5-48 9.3-60.9 15.5-19.1 9-28.7 25.4-30.4 52l-.7 10-53 .3c-57.6.3-70.7-.4-85.4-4.3-24.3-6.6-47.8-22.5-63.5-43-7.7-10.1-16.6-27.7-19.6-38.6-4.7-17.6-5-22.1-5-94.2V1078h687v69.9z" />
+      <path d="M391.8 150c-16.5 3-30 12.2-39.1 26.7-7.9 12.6-10 31-5.2 46.1 4.5 14.4 15.5 26.9 29.1 33.4 22.1 10.4 46.1 6.2 63.5-11.1 11.5-11.5 16.9-24.2 16.9-39.9 0-23.4-16.1-45.5-38.6-53.1-7.1-2.3-19.8-3.4-26.6-2.1zM192 466.6c-18.6 4.9-33.7 19-40.1 37.4-1.7 5-2.2 8.9-2.3 16.5-.1 12.8 2.5 21.5 9.4 31.8 10.7 16 27 24.7 46.4 24.7 27.2 0 49.5-18 55.1-44.6 1.8-8.7 1.8-14.1 0-22.6-4.4-21.2-22.5-39.4-43.3-43.7-7.2-1.5-18.5-1.3-25.2.5zM578.1 468.5c-14.3 4.6-27 15.7-33.3 29.1-10.4 22.2-6.2 46.1 11.1 63.5 11.5 11.5 24.2 16.9 39.9 16.9 23.6 0 45.3-15.9 53.3-39 3.1-9.2 3.2-23.7.1-33.7-3.9-12.7-12.9-24.1-24.9-31.6-12.5-7.9-31.4-10-46.2-5.2zM196 812.6c-18.6 4.9-33.7 19-40.1 37.4-1.7 5-2.2 8.9-2.3 16.5-.1 12.8 2.5 21.5 9.4 31.8 10.7 16 27 24.7 46.4 24.7 27.2 0 49.5-18 55.1-44.6 1.8-8.7 1.8-14.1 0-22.6-4.4-21.2-22.5-39.4-43.3-43.7-7.2-1.5-18.5-1.3-25.2.5zM578.1 814.5c-14.3 4.6-27 15.7-33.3 29.1-10.4 22.2-6.2 46.1 11.1 63.5 11.5 11.5 24.2 16.9 39.9 16.9 23.6 0 45.3-15.9 53.3-39 3.1-9.2 3.2-23.7.1-33.7-3.9-12.7-12.9-24.1-24.9-31.6-12.5-7.9-31.4-10-46.2-5.2zM388.3 1121.5c-10.8 2.3-19 7-27.6 15.6-11.4 11.4-16.7 23.9-16.7 39.7 0 23.6 15.9 45.3 39 53.3 9.2 3.1 23.7 3.2 33.7.1 12.7-3.9 24.1-12.9 31.6-24.9 7.9-12.6 10-31 5.2-46.1-8.6-27.2-37.2-43.8-65.2-37.7z" />
+    </svg>
+  );
+};
+SixPlayersSide.propTypes = {
+  title: PropTypes.string,
+};
+export default SixPlayersSide;

src/Icons/generated/Layouts/ThreePlayers.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+import PropTypes from 'prop-types';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const ThreePlayers = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size || 16}
+      height={props.size || 16}
+      viewBox="0 0 802 1374"
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d="M159.5 19.1c-17.6 1.8-34.7 7.2-52.2 16.4-14.4 7.5-25 15.3-36.8 27-20.3 20.4-33.6 45.2-40.7 76l-2.3 10-.3 531.5c-.2 382 0 534.3.8 541.5 2.2 20.1 7.2 36.4 16.5 54.3 7.3 14 15.2 24.6 26.7 36.1 20.1 20.1 41 31.8 70.8 39.8l10.5 2.8h497l11.7-3.2c27-7.4 47-18.5 66.9-37.1 21.5-20.2 37-48.2 43.6-79.2 1.7-8.1 1.8-30.9 1.8-548 0-518.6-.1-539.8-1.8-548-12-55.7-49.8-97.4-103.5-114.4-20.5-6.4-.6-6-262.7-6.2-130.9-.1-241.6.2-246 .7zM396 365v317H57V511.3l11.3-.6c18.4-1 32.5-6 42.3-15C125.7 482 138.1 436 138.1 394c0-23.9-3.5-47.1-10.7-71-9.4-31.4-25.9-44.2-58.7-45.7l-11.8-.6.4-62.6c.3-59.6.4-63 2.5-71.6 2.8-11.9 5.1-18.4 10.2-28.6C83.9 86 109.2 64.3 139.7 54c17.7-5.9 15.3-5.8 141.1-5.9L396 48v317zM651.5 50.9c5 1.3 13.2 4.1 18.4 6.2 38.5 15.7 65.4 49.3 72.6 90.6 1.3 7.4 1.5 36.6 1.5 215.3v206.7l-11.2.6c-13.6.8-24.6 3.4-33.7 8.2-12.2 6.4-19 15.9-25.5 35.5-13.2 40-15.3 83.2-6 124.8 5.8 25.6 11.8 39.8 20.8 48.8 10.6 10.6 23 15.2 43.4 16.1l12.2.6V1011c0 227.3.3 214.2-6.1 233.4-13.4 40-47 69.6-89.9 79.3-6.9 1.6-26.1 1.7-239 2-154.7.3-235.3 0-243-.7-20.8-1.8-38.3-8-55.8-19.7-28.1-18.7-46.6-48.2-51.8-82.8-1.1-6.8-1.4-23-1.4-66.1v-57.1l11.3-.6c18.4-1 32.5-6 42.3-15 15.1-13.7 27.5-59.7 27.5-101.7 0-23.9-3.5-47.1-10.7-71-9.4-31.3-25.9-44.2-58.6-45.7l-11.8-.6V691h339v634h9V47.9l118.8.4 118.7.3 9 2.3z" />
+      <path d="M195 338.6c-18.6 4.9-33.7 19-40.1 37.4-1.7 5-2.2 8.9-2.3 16.5-.1 12.8 2.5 21.5 9.4 31.8 10.7 16 27 24.7 46.4 24.7 27.2 0 49.5-18 55.1-44.6 1.8-8.7 1.8-14.1 0-22.6-4.4-21.2-22.5-39.4-43.3-43.7-7.2-1.5-18.5-1.3-25.2.5zM574.1 634.5c-14.3 4.6-27 15.7-33.3 29.1-10.4 22.2-6.2 46.1 11.1 63.5 11.5 11.5 24.2 16.9 39.9 16.9 23.6 0 45.3-15.9 53.3-39 3.1-9.2 3.2-23.7.1-33.7-3.9-12.7-12.9-24.1-24.9-31.6-12.5-7.9-31.4-10-46.2-5.2zM195 926.6c-18.6 4.9-33.7 19-40.1 37.4-1.7 5-2.2 8.9-2.3 16.5-.1 12.8 2.5 21.5 9.4 31.8 10.7 16 27 24.7 46.4 24.7 27.2 0 49.5-18 55.1-44.6 1.8-8.7 1.8-14.1 0-22.6-4.4-21.2-22.5-39.4-43.3-43.7-7.2-1.5-18.5-1.3-25.2.5z" />
+    </svg>
+  );
+};
+ThreePlayers.propTypes = {
+  title: PropTypes.string,
+};
+export default ThreePlayers;

src/Icons/generated/Layouts/ThreePlayersSide.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+import PropTypes from 'prop-types';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const ThreePlayersSide = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size || 16}
+      height={props.size || 16}
+      viewBox="0 0 802 1374"
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d="M159.5 19.1c-17.6 1.8-34.7 7.2-52.2 16.4-14.4 7.5-25 15.3-36.8 27-20.3 20.4-33.6 45.2-40.7 76l-2.3 10-.3 531.5c-.2 382 0 534.3.8 541.5 2.2 20.1 7.2 36.4 16.5 54.3 7.3 14 15.2 24.6 26.7 36.1 20.1 20.1 41 31.8 70.8 39.8l10.5 2.8h497l11.7-3.2c27-7.4 47-18.5 66.9-37.1 21.5-20.2 37-48.2 43.6-79.2 1.7-8.1 1.8-30.9 1.8-548 0-518.6-.1-539.8-1.8-548-12-55.7-49.8-97.4-103.5-114.4-20.5-6.4-.6-6-262.7-6.2-130.9-.1-241.6.2-246 .7zM397 471.5V895H57V592.3l9.8-.6c17.2-1.2 31.4-6.3 40.8-15 8.8-8 16-24.7 21.9-51.2 7.6-33.9 7.6-68.2-.1-102-5.7-25.6-11.3-39-19.9-48.3-9.3-10.1-23.7-15.9-42.5-17.1l-9.5-.6v-102c0-94.2.1-102.6 1.8-110.5 9.2-43.6 38.7-77 80.4-91 17.7-5.9 15.2-5.8 141.6-5.9L397 48v423.5zM651.5 50.9c5 1.3 13.2 4.1 18.4 6.2 38.5 15.7 65.4 49.3 72.6 90.6 1.3 7.2 1.5 24.4 1.5 108.8v100.2l-8.2.8c-17.1 1.4-32.5 7.5-40.5 15.8-5.5 5.6-10.5 15-14.7 27.7-13.2 40-15.3 83.2-6 124.8 5.8 25.6 11.8 39.8 20.8 48.8 9.7 9.7 22.6 14.9 39.9 16.1l8.7.6V895H407V47.9l117.8.4 117.7.3 9 2.3zm92.5 1010c0 172.4.3 164.6-6.1 183.5-13.4 40-47.4 70-89.9 79.2-6.3 1.4-17 1.7-68.6 2.1l-61.1.4-.7-8.6c-.8-10.3-4.3-23-8.2-30-8.3-14.9-24-23.3-57.9-30.9-23.8-5.4-54.3-7.2-76-4.6-21.2 2.5-48 9.3-60.9 15.5-18.5 8.7-28.1 24.5-30.3 49.6l-.8 8.4-53 .3c-57.6.3-70.7-.4-85.4-4.3-24.3-6.6-47.8-22.5-63.5-43-7.7-10.1-16.6-27.7-19.6-38.6-5.1-18.8-5-15.5-5-181.2V904h687v156.9z" />
+      <path d="M192 419.6c-18.6 4.9-33.7 19-40.1 37.4-1.7 5-2.2 8.9-2.3 16.5-.1 12.8 2.5 21.5 9.4 31.8 10.7 16 27 24.7 46.4 24.7 27.2 0 49.5-18 55.1-44.6 1.8-8.7 1.8-14.1 0-22.6-4.4-21.2-22.5-39.4-43.3-43.7-7.2-1.5-18.5-1.3-25.2.5zM581.1 421.5c-14.3 4.6-27 15.7-33.3 29.1-10.4 22.2-6.2 46.1 11.1 63.5 11.5 11.5 24.2 16.9 39.9 16.9 23.6 0 45.3-15.9 53.3-39 3.1-9.2 3.2-23.7.1-33.7-3.9-12.7-12.9-24.1-24.9-31.6-12.5-7.9-31.4-10-46.2-5.2zM388.3 1125.5c-10.8 2.3-19 7-27.6 15.6-11.4 11.4-16.7 23.9-16.7 39.7 0 23.6 15.9 45.3 39 53.3 9.2 3.1 23.7 3.2 33.7.1 12.7-3.9 24.1-12.9 31.6-24.9 7.9-12.6 10-31 5.2-46.1-8.6-27.2-37.2-43.8-65.2-37.7z" />
+    </svg>
+  );
+};
+ThreePlayersSide.propTypes = {
+  title: PropTypes.string,
+};
+export default ThreePlayersSide;

src/Icons/generated/Layouts/TwoPlayersOppositeLandscape.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+import PropTypes from 'prop-types';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const TwoPlayersOppositeLandscape = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size || 16}
+      height={props.size || 16}
+      viewBox="0 0 802 1374"
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d="M159.5 19.1c-17.6 1.8-34.7 7.2-52.2 16.4-14.4 7.5-25 15.3-36.8 27-20.3 20.4-33.6 45.2-40.7 76l-2.3 10-.3 531.5c-.2 382 0 534.3.8 541.5 2.2 20.1 7.2 36.4 16.5 54.3 7.3 14 15.2 24.6 26.7 36.1 20.1 20.1 41 31.8 70.8 39.8l10.5 2.8h497l11.7-3.2c27-7.4 47-18.5 66.9-37.1 21.5-20.2 37-48.2 43.6-79.2 1.7-8.1 1.8-30.9 1.8-548 0-518.6-.1-539.8-1.8-548-12-55.7-49.8-97.4-103.5-114.4-20.5-6.4-.6-6-262.7-6.2-130.9-.1-241.6.2-246 .7zM396 687v639H285.3c-63.3 0-115-.5-120.7-1-32.5-3.2-63-20.2-83-46.5-7.7-10.1-16.6-27.7-19.6-38.6-5.1-19-5-11.7-5-230.5V805.3l11.3-.6c18.4-1 32.5-6 42.3-15C125.7 776 138.1 730 138.1 688c0-23.9-3.5-47.1-10.7-71-9.4-31.3-25.9-44.2-58.7-45.7l-11.7-.6.3-209.6.3-209.6 2.1-9c2.9-11.9 5.2-18.4 10.3-28.6C83.9 86 109.2 64.3 139.7 54c17.7-5.9 15.3-5.8 141.1-5.9L396 48v639zM651.5 50.9c5 1.3 13.2 4.1 18.4 6.2 38.5 15.7 65.4 49.3 72.6 90.6 1.3 7.4 1.5 36.5 1.5 214.8v206.2l-11.7.6c-14 .7-24.9 3.3-34.2 8.2-12.2 6.4-19 15.9-25.5 35.5-13.2 40-15.3 83.2-6 124.8 5.8 25.6 11.8 39.8 20.8 48.8 10.7 10.7 23.1 15.2 43.9 16.1l12.7.6v207.2c0 227.9.3 214.7-6.1 233.9-13.7 41-49.7 71.9-92.9 79.7-6.1 1.1-29.8 1.4-123.5 1.4h-116l-.3-638.8-.2-638.8 118.7.4 118.8.3 9 2.3z" />
+      <path d="M195 632.6c-18.6 4.9-33.7 19-40.1 37.4-1.7 5-2.2 8.9-2.3 16.5-.1 12.8 2.5 21.5 9.4 31.8 10.7 16 27 24.7 46.4 24.7 27.2 0 49.5-18 55.1-44.6 1.8-8.7 1.8-14.1 0-22.6-4.4-21.2-22.5-39.4-43.3-43.7-7.2-1.5-18.5-1.3-25.2.5zM573.1 633.5c-14.3 4.6-27 15.7-33.3 29.1-10.4 22.2-6.2 46.1 11.1 63.5 11.5 11.5 24.2 16.9 39.9 16.9 23.6 0 45.3-15.9 53.3-39 3.1-9.2 3.2-23.7.1-33.7-3.9-12.7-12.9-24.1-24.9-31.6-12.5-7.9-31.4-10-46.2-5.2z" />
+    </svg>
+  );
+};
+TwoPlayersOppositeLandscape.propTypes = {
+  title: PropTypes.string,
+};
+export default TwoPlayersOppositeLandscape;

src/Icons/generated/Layouts/TwoPlayersOppositePortrait.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+import PropTypes from 'prop-types';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const TwoPlayersOppositePortrait = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size || 16}
+      height={props.size || 16}
+      viewBox="0 0 802 1374"
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d="M159.5 19.1c-17.6 1.8-34.7 7.2-52.2 16.4-14.4 7.5-25 15.3-36.8 27-20.3 20.4-33.6 45.2-40.7 76l-2.3 10-.3 531.5c-.2 382 0 534.3.8 541.5 2.2 20.1 7.2 36.4 16.5 54.3 7.3 14 15.2 24.6 26.7 36.1 20.1 20.1 41 31.8 70.8 39.8l10.5 2.8h497l11.7-3.2c27-7.4 47-18.5 66.9-37.1 21.5-20.2 37-48.2 43.6-79.2 1.7-8.1 1.8-30.9 1.8-548 0-518.6-.1-539.8-1.8-548-12-55.7-49.8-97.4-103.5-114.4-20.5-6.4-.6-6-262.7-6.2-130.9-.1-241.6.2-246 .7zm123.9 39.6c1.2 20.3 6.6 34.2 16.8 44 10.3 9.8 39.8 19.5 72.3 23.8 13.9 1.8 40.1 2.1 53 .5 21.2-2.5 48-9.3 60.9-15.5 19.3-9.2 28.8-25.6 30.3-52.3l.6-11.3 62.1.3c61.6.3 62.2.3 71.6 2.7 48.7 12.2 83.1 48.6 91.5 96.8 1.3 7.4 1.5 43.1 1.5 272.9V685H57l.3-266.8.3-266.7 2.1-9c2.9-12 5.2-18.4 10.3-28.6C83.9 86 109.2 64.3 139.7 54c16.6-5.5 20.4-5.8 84.4-5.9l58.6-.1.7 10.7zM744 955.9c0 288.1.4 269.2-6.1 288.5-13.4 40-47.4 70-89.9 79.2-6.3 1.4-17 1.7-68.6 2.1l-61.1.4-.6-11.3c-1.5-27-10.8-43.5-29.8-52.6-13.9-6.7-36.6-12.7-59.4-15.7-13.9-1.8-40-2.1-53-.5-21.2 2.5-48 9.3-60.9 15.5-19.4 9.2-28.8 25.7-30.5 53l-.6 11-53 .3c-57.6.3-70.7-.4-85.4-4.3-24.3-6.6-47.8-22.5-63.5-43-7.7-10.1-16.6-27.7-19.6-38.6-5.2-19.2-5-7.3-5-286.2V694h687v261.9z" />
+      <path d="M391.8 143c-16.5 3-30 12.2-39.1 26.7-7.9 12.6-10 31-5.2 46.1 4.5 14.4 15.5 26.9 29.1 33.4 22.1 10.4 46.1 6.2 63.5-11.1 11.5-11.5 16.9-24.2 16.9-39.9 0-23.4-16.1-45.5-38.6-53.1-7.1-2.3-19.8-3.4-26.6-2.1zM388.3 1119.5c-10.8 2.3-19 7-27.6 15.6-11.4 11.4-16.7 23.9-16.7 39.7 0 23.6 15.9 45.3 39 53.3 9.2 3.1 23.7 3.2 33.7.1 12.7-3.9 24.1-12.9 31.6-24.9 7.9-12.6 10-31 5.2-46.1-8.6-27.2-37.2-43.8-65.2-37.7z" />
+    </svg>
+  );
+};
+TwoPlayersOppositePortrait.propTypes = {
+  title: PropTypes.string,
+};
+export default TwoPlayersOppositePortrait;

src/Icons/generated/Layouts/TwoPlayersSameSide.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+import PropTypes from 'prop-types';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const TwoPlayersSameSide = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size || 16}
+      height={props.size || 16}
+      viewBox="0 0 802 1374"
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d="M159.5 19.1c-17.6 1.8-34.7 7.2-52.2 16.4-14.4 7.5-25 15.3-36.8 27-20.3 20.4-33.6 45.2-40.7 76l-2.3 10-.3 531.5c-.2 382 0 534.3.8 541.5 2.2 20.1 7.2 36.4 16.5 54.3 7.3 14 15.2 24.6 26.7 36.1 20.1 20.1 41 31.8 70.8 39.8l10.5 2.8h497l11.7-3.2c27-7.4 47-18.5 66.9-37.1 21.5-20.2 37-48.2 43.6-79.2 1.7-8.1 1.8-30.9 1.8-548 0-518.6-.1-539.8-1.8-548-12-55.7-49.8-97.4-103.5-114.4-20.5-6.4-.6-6-262.7-6.2-130.9-.1-241.6.2-246 .7zm492 31.8c5 1.3 13.2 4.1 18.4 6.2 38.5 15.7 65.4 49.3 72.6 90.6 1.3 7.4 1.5 42.9 1.5 271.4V682H57V511.3l11.8-.6c18.9-1 32.8-5.9 42.8-15C126.7 482 139.1 436 139.1 394c0-23.9-3.5-47.1-10.7-71-9.5-31.5-25.9-44.2-59.2-45.7l-12.3-.6.4-62.6c.3-59.6.4-63 2.5-71.6 2.8-11.9 5.1-18.4 10.2-28.6C83.9 86 109.2 64.3 139.7 54c18.5-6.2 3.5-5.8 264.3-5.6l238.5.1 9 2.4zm92.5 904c0 289.2.4 270.2-6.1 289.5-13.4 40-47 69.6-89.9 79.3-6.9 1.6-26.1 1.7-239 2-154.7.3-235.3 0-243-.7-20.8-1.8-38.3-8-55.8-19.7-28.1-18.7-46.6-48.2-51.8-82.8-1.1-6.8-1.4-23.1-1.4-67.1v-58.1l11.8-.6c18.9-1 32.8-5.9 42.8-15 15.1-13.7 27.5-59.7 27.5-101.7 0-23.9-3.5-47.1-10.7-71-9.5-31.5-25.9-44.2-59.1-45.7l-12.3-.6V692h687v262.9z" />
+      <path d="M196 338.6c-18.6 4.9-33.7 19-40.1 37.4-1.7 5-2.2 8.9-2.3 16.5-.1 12.8 2.5 21.5 9.4 31.8 10.7 16 27 24.7 46.4 24.7 27.2 0 49.5-18 55.1-44.6 1.8-8.7 1.8-14.1 0-22.6-4.4-21.2-22.5-39.4-43.3-43.7-7.2-1.5-18.5-1.3-25.2.5zM196 924.6c-18.6 4.9-33.7 19-40.1 37.4-1.7 5-2.2 8.9-2.3 16.5-.1 12.8 2.5 21.5 9.4 31.8 10.7 16 27 24.7 46.4 24.7 27.2 0 49.5-18 55.1-44.6 1.8-8.7 1.8-14.1 0-22.6-4.4-21.2-22.5-39.4-43.3-43.7-7.2-1.5-18.5-1.3-25.2.5z" />
+    </svg>
+  );
+};
+TwoPlayersSameSide.propTypes = {
+  title: PropTypes.string,
+};
+export default TwoPlayersSameSide;

src/Icons/generated/Layouts/index.ts

@@ -0,0 +1,13 @@
+export { default as FivePlayers } from './FivePlayers';
+export { default as FivePlayersSide } from './FivePlayersSide';
+export { default as FourPlayers } from './FourPlayers';
+export { default as FourPlayersSide } from './FourPlayersSide';
+export { default as OnePlayerLandscape } from './OnePlayerLandscape';
+export { default as OnePlayerPortrait } from './OnePlayerPortrait';
+export { default as SixPlayers } from './SixPlayers';
+export { default as SixPlayersSide } from './SixPlayersSide';
+export { default as ThreePlayers } from './ThreePlayers';
+export { default as ThreePlayersSide } from './ThreePlayersSide';
+export { default as TwoPlayersOppositeLandscape } from './TwoPlayersOppositeLandscape';
+export { default as TwoPlayersOppositePortrait } from './TwoPlayersOppositePortrait';
+export { default as TwoPlayersSameSide } from './TwoPlayersSameSide';

src/Icons/generated/PartnerTax.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+import PropTypes from 'prop-types';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const PartnerTax = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      paintOrder="stroke fill markers"
+      viewBox="0 -50 380 390"
+      height={props.size || 16}
+      width={props.size || 16}
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d="M144.5 18.6c-1.1.3-4.7.9-8 1.5s-10 3.1-15 5.5C101.9 35.1 87.3 53 82 73.6c-2.7 10.5-2.7 26.3 0 36.8 6.3 24.6 25.9 45 50.5 52.5 10.3 3.1 29.3 3.5 39.5.8 25.3-6.7 46.5-28 53.1-53.4 2.7-10.5 2.7-26 0-36.4-8.4-32.9-39.1-56.4-72.5-55.8-3.3.1-7 .3-8.1.5z" />
+      <path d="M215.8 24.7c-1.6.2-2.8.8-2.8 1.2 0 .4 2.1 2.7 4.6 5.1 13.3 13 21.9 31 24.4 51.4 1.6 12.1.8 22.8-2.5 34.1-4.3 14.9-10.7 25.8-21.3 36.7-3.6 3.7-6.3 7-6 7.3.3.4 4.6.9 9.5 1.2 12.2.8 23.1-1.5 35.2-7.4 7.8-3.7 10.9-5.9 17.7-12.7 6.8-6.8 9-9.9 12.7-17.7 5-10.2 7.7-21.2 7.7-30.9s-2.7-20.7-7.7-30.9c-3.7-7.8-5.9-10.9-12.7-17.7-6.8-6.8-9.9-9-17.7-12.7-13.4-6.5-28-9-41.1-7zM125.5 185.5c-16.4 1.8-28.5 4-45 8-38.4 9.4-55 18.1-66 34.5-15.9 23.6-19.2 70.9-6.7 96l2.7 5.5 143.1.3 143.2.2 2.2-3.7c6-10.1 9.3-26 9.3-44.3 0-22.2-4.8-40.8-14-54.3-10.6-15.6-28-24.7-64.6-33.6-37.9-9.3-71.8-12.1-104.2-8.6z" />
+      <path d="M272.1 193.5c8.2 3 21 9.7 26.7 14 15.4 11.6 25.2 31.4 28.7 58 3 23 .9 44.7-6.2 63.1-.4 1.2 3.3 1.4 22 1.4h22.6l3-6.3c11.6-23.7 10.1-65.1-3.1-88.7-4.6-8.1-15.2-17.9-24.5-22.7-12.7-6.6-34.2-13.3-56.6-17.8-14-2.7-18.2-3.1-12.6-1z" />
+    </svg>
+  );
+};
+PartnerTax.propTypes = {
+  title: PropTypes.string,
+};
+export default PartnerTax;

src/Icons/generated/Poison.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+import PropTypes from 'prop-types';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const Poison = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      paintOrder="stroke fill markers"
+      viewBox="0 0 152.667 223"
+      height={props.size || 16}
+      width={props.size || 16}
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d="M57.9 18.75V200.7l21.6-18.3V0M68.7 41.85C30.759 41.85 0 68.08 0 100.309c0 32.313 30.758 58.543 68.7 58.543 37.942 0 68.7-26.23 68.7-58.543 0-32.23-30.758-58.459-68.7-58.459zm.15 91.5c-21.373 0-38.7-14.531-38.7-32.474S47.477 68.4 68.85 68.4s38.7 14.532 38.7 32.475-17.327 32.475-38.7 32.475z" />
+    </svg>
+  );
+};
+Poison.propTypes = {
+  title: PropTypes.string,
+};
+export default Poison;

src/Icons/generated/Support/BmcLogo.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+import PropTypes from 'prop-types';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const BmcLogo = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size || 16}
+      height={props.size || 16}
+      fill="none"
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path
+        fill="#0D0C22"
+        d="m791.109 297.518-.878-.516-2.03-.619a4.833 4.833 0 0 0 2.908 1.135ZM803.896 388.891l-.98.275.98-.275ZM791.484 297.377a1.773 1.773 0 0 1-.366-.087 1.42 1.42 0 0 0 0 .244.738.738 0 0 0 .366-.157Z"
+      />
+      <path
+        fill="#0D0C22"
+        d="M791.113 297.529h.131v-.082l-.131.082ZM803.111 388.726l1.48-.843.551-.31.499-.533a8.447 8.447 0 0 0-2.53 1.686ZM793.669 299.515l-1.446-1.377-.98-.533a4.077 4.077 0 0 0 2.426 1.91ZM430.019 1186.18a7.55 7.55 0 0 0-2.943 2.27l.912-.58c.62-.57 1.497-1.24 2.031-1.69ZM641.187 1144.63c0-1.3-.636-1.06-.482 3.58 0-.37.155-.75.224-1.11.086-.83.155-1.64.258-2.47ZM619.284 1186.18a7.546 7.546 0 0 0-2.942 2.27l.912-.58c.619-.57 1.497-1.24 2.03-1.69ZM281.304 1196.06a6.299 6.299 0 0 0-3.097-1.45c.929.45 1.858.9 2.477 1.24l.62.21ZM247.841 1164.01a9.895 9.895 0 0 0-1.222-3.85c.474 1.23.87 2.5 1.187 3.78l.035.07Z"
+      />
+      <path
+        fill="#FD0"
+        d="M472.623 590.836c-45.941 19.667-98.077 41.966-165.647 41.966a313.577 313.577 0 0 1-83.623-11.528l46.733 479.806a80.166 80.166 0 0 0 25.593 52.38 80.18 80.18 0 0 0 54.313 21.19s66.262 3.44 88.373 3.44c23.796 0 95.151-3.44 95.151-3.44 20.12 0 39.503-7.57 54.303-21.2a80.149 80.149 0 0 0 25.587-52.37l50.053-530.204c-22.368-7.639-44.943-12.715-70.391-12.715-44.014-.017-79.477 15.142-120.445 32.675Z"
+      />
+      <path
+        fill="#0D0C22"
+        d="m78.689 386.132.79.74.517.31a7.95 7.95 0 0 0-1.307-1.05Z"
+      />
+      <path
+        fill="#0D0C22"
+        d="m879.567 341.849-7.037-35.497c-6.315-31.849-20.648-61.943-53.34-73.454-10.479-3.683-22.369-5.265-30.404-12.888-8.035-7.622-10.41-19.46-12.268-30.438-3.442-20.149-6.676-40.315-10.204-60.429-3.045-17.293-5.454-36.719-13.386-52.583-10.324-21.302-31.746-33.76-53.048-42.001a305.493 305.493 0 0 0-33.363-10.324C613.297 10.195 557.342 5.033 502.591 2.09a1376.266 1376.266 0 0 0-197.169 3.27c-48.797 4.439-100.193 9.807-146.564 26.687-16.948 6.177-34.413 13.593-47.3 26.687-15.813 16.088-20.975 40.969-9.43 61.031 8.208 14.247 22.111 24.313 36.857 30.972a298.948 298.948 0 0 0 59.844 19.478c57.297 12.664 116.642 17.636 175.178 19.753a1333.99 1333.99 0 0 0 194.433-6.35 1106.995 1106.995 0 0 0 47.817-6.314c18.738-2.874 30.765-27.376 25.242-44.445-6.608-20.406-24.365-28.321-44.444-25.241-2.96.464-5.902.894-8.862 1.324l-2.133.31c-6.803.861-13.605 1.663-20.407 2.409a1083.055 1083.055 0 0 1-42.259 3.717c-31.626 2.202-63.337 3.217-95.031 3.269-31.144 0-62.305-.878-93.38-2.925a1187.382 1187.382 0 0 1-42.431-3.545 1019.94 1019.94 0 0 1-19.219-2.168l-6.092-.774-1.324-.189-6.315-.912c-12.905-1.945-25.81-4.181-38.577-6.883a5.8 5.8 0 0 1 0-11.322h.241c11.064-2.357 22.213-4.37 33.397-6.125 3.729-.585 7.468-1.159 11.219-1.72h.103c7.003-.465 14.041-1.722 21.009-2.547A1336.183 1336.183 0 0 1 469.538 73.1c29.577.86 59.138 2.599 88.578 5.593a979.44 979.44 0 0 1 18.927 2.116c2.409.293 4.835.636 7.262.93l4.886.705a678.058 678.058 0 0 1 42.517 7.725c20.889 4.543 47.714 6.022 57.005 28.907 2.96 7.261 4.302 15.331 5.936 22.953l2.082 9.722c.055.174.095.353.121.533 4.921 22.942 9.848 45.884 14.78 68.826a12.608 12.608 0 0 1-2.006 9.871 12.612 12.612 0 0 1-8.593 5.254h-.138l-3.011.413-2.976.395c-9.43 1.228-18.87 2.375-28.322 3.442a1829.308 1829.308 0 0 1-55.938 5.506 1957.204 1957.204 0 0 1-111.55 6.074c-18.984.504-37.963.74-56.936.705a1975.736 1975.736 0 0 1-225.989-13.146c-8.122-.963-16.243-1.996-24.365-3.045 6.298.809-4.577-.62-6.779-.929a1447.245 1447.245 0 0 1-15.486-2.254c-17.327-2.599-34.55-5.799-51.843-8.604-20.906-3.441-40.9-1.72-59.81 8.604a86.994 86.994 0 0 0-36.012 37.338c-8.156 16.862-10.582 35.221-14.23 53.34C4 342.193-1.678 361.688.473 380.288 5.1 420.431 33.165 453.054 73.53 460.35c37.975 6.882 76.156 12.457 114.44 17.206a2114.804 2114.804 0 0 0 489.988 2.822 25.814 25.814 0 0 1 21.003 7.339 25.806 25.806 0 0 1 7.491 20.948l-3.82 37.132-23.091 225.077a178840.62 178840.62 0 0 1-31.126 302.866c-2.203 21.84-2.512 44.36-6.659 65.94-6.539 33.93-29.509 54.77-63.027 62.39a439.172 439.172 0 0 1-93.569 10.94c-34.912.19-69.806-1.36-104.718-1.17-37.27.21-82.918-3.23-111.687-30.97-25.277-24.36-28.77-62.51-32.211-95.5-4.588-43.67-9.136-87.331-13.645-130.989l-25.293-242.766-16.363-157.077c-.276-2.598-.551-5.162-.809-7.778-1.962-18.737-15.228-37.079-36.134-36.133-17.894.791-38.232 16.002-36.133 36.133l12.13 116.454 25.087 240.89a378681.11 378681.11 0 0 1 21.388 205.306c1.377 13.11 2.667 26.26 4.112 39.37 7.864 71.65 62.58 110.26 130.339 121.13 39.575 6.37 80.113 7.68 120.273 8.33 51.482.83 103.48 2.81 154.118-6.52 75.038-13.77 131.337-63.87 139.372-141.59 2.295-22.44 4.589-44.88 6.883-67.33 7.628-74.241 15.245-148.487 22.85-222.739l24.881-242.61 11.408-111.188a25.812 25.812 0 0 1 20.785-22.696c21.456-4.181 41.967-11.322 57.229-27.651 24.295-25.998 29.13-59.895 20.544-94.067ZM72.43 365.835c.327-.155-.275 2.649-.533 3.957-.052-1.979.051-3.734.533-3.957Zm2.082 16.105c.172-.121.688.568 1.222 1.394-.809-.758-1.325-1.325-1.24-1.394h.018Zm2.048 2.701c.74 1.256 1.135 2.048 0 0Zm4.112 3.338h.103c0 .121.19.241.258.362a2.666 2.666 0 0 0-.378-.362h.017Zm720.124-4.99c-7.708 7.33-19.323 10.737-30.8 12.441-128.704 19.099-259.283 28.769-389.399 24.502-93.121-3.183-185.261-13.525-277.453-26.55-9.034-1.273-18.824-2.925-25.036-9.584-11.7-12.561-5.953-37.854-2.908-53.03 2.788-13.903 8.122-32.434 24.657-34.413 25.81-3.028 55.783 7.863 81.318 11.735a1539.798 1539.798 0 0 0 92.57 11.27c132.18 12.045 266.58 10.169 398.175-7.45a1661.346 1661.346 0 0 0 71.699-11.236c21.216-3.803 44.737-10.943 57.556 11.029 8.792 14.97 9.962 34.998 8.603 51.912a28.942 28.942 0 0 1-8.999 19.374h.017Z"
+      />
+    </svg>
+  );
+};
+BmcLogo.propTypes = {
+  title: PropTypes.string,
+};
+export default BmcLogo;

src/Icons/generated/Support/index.ts

@@ -0,0 +1 @@
+export { default as BmcLogo } from './BmcLogo';

src/Icons/generated/index.ts

@@ -0,0 +1,6 @@
+export { default as Cog } from './Cog';
+export { default as CommanderTax } from './CommanderTax';
+export { default as Energy } from './Energy';
+export { default as Experience } from './Experience';
+export { default as PartnerTax } from './PartnerTax';
+export { default as Poison } from './Poison';

src/Icons/svgs/Cog.svg

@@ -1,22 +1,12 @@
-import { IconProps } from '../Types/Icon';
+<svg
-
+    xmlns="http://www.w3.org/2000/svg"
-const SettingsIcon = ({ color, size, opacity, showStroke }: IconProps) => {
+    xmlSpace="preserve"
-  return (
+    viewBox="0 0 182.000000 182.000000"
-    <div style={{ position: 'relative', display: 'inline-block' }}>
+    fill='currentColor'
-      <svg
+    paint-order='stroke fill markers'
-        xmlns="http://www.w3.org/2000/svg"
+>
-        xmlSpace="preserve"
+    <g transform="translate(0.000000,182.000000) scale(0.100000,-0.100000)">
-        viewBox="0 0 182.000000 182.000000"
+        <path
-        width={size}
-        height={size}
-        fill={color || 'black'}
-        fillOpacity={opacity || '0.3'}
-        stroke={showStroke ? 'white' : 'none'}
-        stroke-width={showStroke ? '5' : 'none'}
-        paint-order={showStroke ? 'stroke fill markers' : ''}
-      >
-        <g transform="translate(0.000000,182.000000) scale(0.100000,-0.100000)">
-          <path
             d="M807 1810 c-46 -14 -94 -57 -116 -103 -16 -34 -21 -62 -21 -128 l0
 -85 -57 54 c-131 122 -232 122 -350 1 -114 -118 -111 -221 11 -339 l57 -55
 -101 -6 c-90 -5 -104 -8 -142 -35 -23 -16 -52 -49 -66 -74 -21 -40 -23 -55
@@ -32,11 +22,6 @@ l-98 4 61 62 c122 124 122 224 0 343 -116 112 -205 112 -334 -2 l-63 -55 -4
 -32 -61 -87 -116 -147 -148 -45 -24 -61 -27 -150 -27 -89 0 -105 3 -150 27
 -60 32 -115 87 -147 148 -31 60 -37 186 -13 259 27 83 121 174 206 200 60 18
 199 8 250 -18z"
-          />
+        />
-        </g>
+    </g>
-      </svg>
+</svg>
-    </div>
-  );
-};
-
-export default SettingsIcon;

src/Icons/svgs/CommanderTax.svg

@@ -1,19 +1,9 @@
-import { IconProps } from '../Types/Icon';
+<svg
-
-const CommanderTaxIcon = ({ size, color, opacity, showStroke }: IconProps) => {
-  return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      <svg
         version="1.2"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 325 325"
-        width={size || 'auto'}
+        fill='currentColor'
-        height={size || 'auto'}
+        paint-order='stroke fill markers'
-        fill={color || 'black'}
-        fillOpacity={opacity || '0.5'}
-        stroke={showStroke ? 'white' : 'none'}
-        stroke-width={showStroke ? '5' : 'none'}
-        paint-order={showStroke ? 'stroke fill markers' : ''}
       >
         <title>CommanderTaxIcon</title>
         <path
@@ -26,9 +16,4 @@ const CommanderTaxIcon = ({ size, color, opacity, showStroke }: IconProps) => {
           className="s0"
           d="m159.9 351.8c-11.4 0.3-22.5 0.7-33.2 1.2-10.6 0.6-20.8 1.3-30.5 1.8-9.6 0.5-18.8 0.6-27.2 0.5-8.4-0.6-16.1-1.6-23-3.4-6.9-2.3-12.9-5.5-18.1-9.5-5-4.7-9.1-10.4-12.2-16.9-3.1-7.1-5.2-15-6.3-23.4-1.1-8.8-1.2-17.9-0.4-27.1 0.8-9.2 2.4-17.7 4.7-25.3 2.2-7.4 5.2-13.9 8.8-19.5 3.6-5.3 7.8-9.9 12.8-13.6 4.8-3.7 10.5-6.9 16.8-9.5 6.4-2.9 13.6-5.4 21.5-7.6 7.9-2.4 16.6-4.6 26-6.5 9.4-2.1 19.4-3.8 29.9-5 10.6-1.3 21.7-2 33-2 11.3 0 22.4 0.7 33 2 10.5 1.2 20.6 2.9 30 5 9.4 1.9 18.2 4.1 26.2 6.5 7.9 2.3 15.2 4.8 21.7 7.6 6.4 2.7 12.2 5.8 17.1 9.5 5.1 3.8 9.4 8.3 12.9 13.7 3.7 5.5 6.7 12.1 8.9 19.5 2.3 7.7 3.8 16.2 4.5 25.3 0.7 9.2 0.4 18.3-0.9 27.1-1.3 8.4-3.6 16.2-6.8 23.3-3.4 6.4-7.8 11.9-13.1 16.4-5.5 3.9-11.8 6.9-19 9.1-7.3 1.6-15.4 2.6-24.1 3-8.8 0.1-18.3-0.1-28.2-0.5-10-0.4-20.5-0.9-31.4-1.3-10.8-0.3-22-0.5-33.4-0.4z"
         />
-      </svg>
+      </svg>
-    </div>
-  );
-};
-
-export default CommanderTaxIcon;

src/Icons/svgs/Energy.svg

@@ -1,26 +1,11 @@
-import { IconProps } from '../Types/Icon';
+<svg
-
-const EnergyIcon = ({ color, size, opacity, showStroke }: IconProps) => {
-  return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      <svg
         xmlns="http://www.w3.org/2000/svg"
         xmlSpace="preserve"
         viewBox="-30 -20 500 500"
-        width={size}
+        fill='currentColor'
-        height={size}
+        paint-order='stroke fill markers'
-        fill={color || 'black'}
-        fillOpacity={opacity || '0.5'}
-        stroke={showStroke ? 'white' : 'none'}
-        stroke-width={showStroke ? '15' : 'none'}
-        paint-order={showStroke ? 'stroke fill markers' : ''}
       >
         <g transform="translate(0.000000,0.000000) scale(0.900000,0.900000)">
           <path d="M234.896 485.029c-2.669-2.858-3.364-8.205-5.593-11.658-2.645-4.099-5.889-7.763-8.697-11.742-3.68-5.217-7.881-10.06-11.601-15.262-6.362-8.897-13.587-16.63-21.201-24.468-18.683-19.234-38.196-37.019-60.371-52.199-34.356-23.52-70.771-44.106-109.819-58.761-2.709-1.017 0 0-17.614-8.609 3.325-5.34 23.831-34.407 28.638-42.12 8.028-12.881 13.8-26.964 19.782-40.866 7.616-17.7 14.438-35.819 19.899-54.296 6.976-23.604 12.835-47.549 17.354-71.747C86.931 86.566 94.42 29.508 98.888.314c39.192 11.299 25.749 7.891 34.636 10.185 24.621 6.357 50.451 7.612 75.722 9.557 14.404 1.109 28.678.999 43.104.777 21.448-.33 42.94-1.344 64.203-4.293 10.585-1.468 21.127-3.467 31.478-6.126 8.192-2.104 13.47-3.289 31.032-10.1 1.937 7.533 21.898 144.985 48.764 208.185 10.624 24.992 42.674 79.876 52.745 92.264-14.321 5.362-71.933 31.841-101.849 49.629-36.743 21.848-71.48 48.623-100.156 80.446-13.532 15.02-24.152 32.606-35.086 49.537-4.266 6.604-5.912 7.501-8.585 4.654zm11.489-54.904c7.625-39.942 29.623-90.766 63.953-147.75 11.581-19.223 33.603-52.214 46.967-70.363 8.287-11.254 10.945-15.403 10.945-17.086 0-1.254-.476-2.405-1.093-2.642-.602-.231-5.917.457-11.813 1.529-36.192 6.578-73.021 8.765-101.648 6.036-12.956-1.235-22.442-2.794-23.514-3.865-.759-.759 2.172-19.29 4.559-28.822 9.985-39.881 33.304-81.786 63.095-113.384 4.589-4.866 8.156-9.034 7.93-9.26-.228-.227-3.052.433-6.277 1.467-37.805 12.116-79.837 13.334-110.1 3.191-4.133-1.386-7.625-2.414-7.762-2.287-.136.128.165 4.227.669 9.11 4.746 45.95-17.074 106.187-62.849 173.502-6.884 10.124-20.352 28.227-28.176 37.875-3.156 3.891-4.503 6.084-3.834 6.239.567.132 6.354-1.116 12.86-2.772 18.57-4.727 34.105-7.629 55.329-10.332 16.237-2.068 56.226-1.88 70.125.33 9.04 1.437 21.549 4.209 22.277 4.938.15.15-.213 1.752-.806 3.561-3.145 9.582-7.186 28.637-9.049 42.662-3.581 26.956-3.578 70.348.006 102.375 1.409 12.596 3.907 28.753 4.624 29.913.611.986.929-.272 3.582-14.165z" />
         </g>
-      </svg>
+      </svg>
-    </div>
-  );
-};
-
-export default EnergyIcon;

src/Icons/svgs/Experience.svg

@@ -1,26 +1,11 @@
-import { IconProps } from '../Types/Icon';
+<svg
-
-const ExperienceIcon = ({ color, size, opacity, showStroke }: IconProps) => {
-  return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      <svg
         xmlns="http://www.w3.org/2000/svg"
         xmlSpace="preserve"
         viewBox="-50 0 980 980"
-        width={size}
+        fill='currentColor'
-        height={size}
+        paint-order='stroke fill markers'
-        fill={color || 'black'}
-        fillOpacity={opacity || '0.5'}
-        stroke={showStroke ? 'white' : 'none'}
-        stroke-width={showStroke ? '30' : 'none'}
-        paint-order={showStroke ? 'stroke fill markers' : ''}
       >
         <g transform="translate(0.000000,0.000000) scale(0.900000,0.900000)">
           <path d="M.775 171.102c96.217.111 192.488-.717 288.65.386 26.868 13.406 51.584 31.281 75.087 50.039-11.696 41.378-8.552 88.438 16.055 124.74 17.434 27.474 47.611 45.239 79.445 50.314l.055 497.248C351.107 834.08 244.959 767.49 151.445 685.175c-32.053-28.467-63.28-62.729-70.893-106.423-9.103-51.97 12.689-102.395 14.345-154.035.717-40.108-.111-81.541-16.331-118.946-15.227-40.494-46.783-71.224-70.065-106.865-6.014-8.054-7.503-17.985-7.724-27.805zm624.469 50.148c23.834-18.316 48.551-36.301 75.418-49.763 96.108-1.103 192.268-.275 288.43-.386-.719 8.219-.497 16.992-5.572 23.999-21.572 35.253-52.523 64.548-68.963 103.057-19.475 40.108-20.799 85.734-19.529 129.485 2.481 50.369 22.675 99.581 14.454 150.339-7.613 44.134-39.115 78.616-71.39 107.36-94.23 83.251-201.702 149.842-311.491 210.418-.055-166.337-.055-332.675-.055-499.012 35.75-4.359 69.403-25.378 86.837-57.156 20.965-35.418 22.731-79.334 11.861-118.34z" />
         </g>
-      </svg>
+      </svg>
-    </div>
-  );
-};
-
-export default ExperienceIcon;

src/Icons/svgs/PartnerTax.svg

@@ -1,18 +1,8 @@
-import { IconProps } from '../Types/Icon';
+<svg
-
-const PartnerTaxIcon = ({ size, color, opacity, showStroke }: IconProps) => {
-  return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 -50 380 390"
-        width={size}
+        fill='currentColor'
-        height={size}
+        paint-order='stroke fill markers'
-        fill={color || 'black'}
-        fillOpacity={opacity || '0.5'}
-        stroke={showStroke ? 'white' : 'none'}
-        stroke-width={showStroke ? '100' : 'none'}
-        paint-order={showStroke ? 'stroke fill markers' : ''}
       >
         <g transform="translate(0.000000, 330.000000) scale(0.100000,-0.100000)">
           <path
@@ -41,9 +31,4 @@ const PartnerTaxIcon = ({ size, color, opacity, showStroke }: IconProps) => {
 -126 10z"
           />
         </g>
-      </svg>
+      </svg>
-    </div>
-  );
-};
-
-export default PartnerTaxIcon;

src/Icons/svgs/Poison.svg

@@ -0,0 +1,11 @@
+ <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlSpace="preserve"
+        viewBox="0 0 152.667 223"
+        fill='currentColor'
+        paint-order='stroke fill markers'
+      >
+        <g transform="translate(0.000000,0.000000) scale(0.900000,0.900000)">
+          <path d="M64.333 20.833V223l24-20.333V0M76.334 46.5C34.176 46.5 0 75.644 0 111.454c0 35.904 34.176 65.048 76.334 65.048 42.157 0 76.333-29.144 76.333-65.048 0-35.81-34.176-64.954-76.333-64.954zm.166 101.667c-23.748 0-43-16.146-43-36.083S52.752 76 76.5 76s43 16.147 43 36.083-19.252 36.084-43 36.084z" />
+        </g>
+      </svg>

svgr.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+  template: require('./template'),
+  titleProp: true,
+  svgProps: {
+    height: '{props.size || 16}',
+    width: '{props.size || 16}',
+  },
+  svgoConfig: {
+    plugins: [
+      {
+        name: 'preset-default',
+        params: {
+          overrides: {
+            inlineStyles: {
+              onlyMatchedOnce: false,
+            },
+            removeDoctype: false,
+            removeViewBox: true,
+          },
+        },
+      },
+    ],
+  },
+  typescript: true,
+  outDir: './src/Icons/generated',
+};

template.js

@@ -0,0 +1,36 @@
+const propTypesTemplate = (
+  { imports, interfaces, componentName, props, jsx, exports },
+  { tpl }
+) => {
+  const title = componentName.split('Svg')[1];
+
+  interfaces[0].body.body.push({
+    type: 'TSPropertySignature',
+    key: { type: 'Identifier', name: 'size' },
+    typeAnnotation: {
+      type: 'TSTypeAnnotation',
+      typeAnnotation: {
+        type: 'TSStringKeyword',
+      },
+    },
+    initializer: null,
+    optional: true,
+  });
+
+  return tpl`${imports}
+
+import PropTypes from 'prop-types';
+${interfaces}
+
+const ${title} = (${props}) => {
+  return ${jsx};
+}
+
+${title}.propTypes = {
+  title: PropTypes.string,
+};
+
+export default ${title}`;
+};
+
+module.exports = propTypesTemplate;