@testpig/avataaars 1.0.0

package/dist/avatar/top/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopType = exports.default = void 0;
+var Top_1 = require("./Top");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Top_1).default; } });
+var TopType_1 = require("./TopType");
+Object.defineProperty(exports, "TopType", { enumerable: true, get: function () { return __importDefault(TopType_1).default; } });
+__exportStar(require("./accessories"), exports);
+__exportStar(require("./facialHair"), exports);

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './avatar';
+export * from './avatar';

package/dist/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var avatar_1 = require("./avatar");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(avatar_1).default; } });
+__exportStar(require("./avatar"), exports);

package/dist/util/uniqueId.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Generates a unique ID. If `prefix` is given, the ID is appended to it.
+ *
+ * @since 0.1.0
+ * @category Util
+ * @param {string} [prefix=''] The value to prefix the ID with.
+ * @returns {string} Returns the unique ID.
+ * @see random
+ * @example
+ *
+ * uniqueId('contact_')
+ * // => 'contact_104'
+ *
+ * uniqueId()
+ * // => '105'
+ */
+declare function uniqueId(prefix: string): string;
+export default uniqueId;

package/dist/util/uniqueId.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/** Used to generate unique IDs. */
+var idCounter = {};
+/**
+ * Generates a unique ID. If `prefix` is given, the ID is appended to it.
+ *
+ * @since 0.1.0
+ * @category Util
+ * @param {string} [prefix=''] The value to prefix the ID with.
+ * @returns {string} Returns the unique ID.
+ * @see random
+ * @example
+ *
+ * uniqueId('contact_')
+ * // => 'contact_104'
+ *
+ * uniqueId()
+ * // => '105'
+ */
+function uniqueId(prefix) {
+    if (!idCounter[prefix]) {
+        idCounter[prefix] = 0;
+    }
+    var id = ++idCounter[prefix];
+    return "".concat(prefix).concat(id);
+}
+exports.default = uniqueId;

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@testpig/avataaars",
+  "version": "1.0.0",
+  "description": "React component for avataaars ",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "keywords": [
+    "react",
+    "avatar"
+  ],
+  "repository": "git@github.com:testpig-io/avataaars.git",
+  "contributors": [
+    "Fang-Pen Lin <hello@fangpenlin.com>",
+    "Romain Fromi <romain@game-park.com>",
+    "Kerry McKeever <kerry@testpig.io>"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "tsc"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "import-sort-style-renke": "^6.0.0",
+    "tslint": "^6.1.3",
+    "tslint-config-standard": "^9.0.0",
+    "tslint-react": "^5.0.0",
+    "typescript": "^4.9.5"
+  },
+  "importSort": {
+    ".js, .jsx, .es6, .es": {
+      "parser": "babylon",
+      "style": "import-sort-style-renke"
+    },
+    ".ts, .tsx": {
+      "parser": "typescript",
+      "style": "import-sort-style-renke"
+    }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+}

package/src/avatar/Avatar.tsx

@@ -0,0 +1,74 @@
+import { SVGProps, useId } from 'react'
+import AvatarContext from './AvatarContext'
+import AvatarProps from './AvatarProps'
+import Clothe from './clothes'
+import Face from './face'
+import Skin from './Skin'
+import Top from './top'
+import Accessories from './top/accessories'
+
+type Props = AvatarProps & SVGProps<SVGSVGElement>
+
+export default function Avatar ({
+                                  style, circle, topType, accessoriesType, hairColor, facialHairType, facialHairColor, clotheType, clotheColor, graphicType,
+                                  eyeType, eyebrowType, mouthType, skinColor, hatColor, ...props
+                                }: Props) {
+  const path1 = useId()
+  const path2 = useId()
+  const path3 = useId()
+  const mask1 = useId()
+  const mask2 = useId()
+  const mask3 = useId()
+  return (
+    <AvatarContext.Provider value={{
+      topType, accessoriesType, hairColor, facialHairType, facialHairColor, clotheType, clotheColor, graphicType, eyeType, eyebrowType, mouthType, skinColor,
+      hatColor
+    }}>
+      <svg width='264px' height='280px' viewBox='0 0 264 280' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'
+           style={style} {...props}>
+        <desc>Created with getavataaars.com</desc>
+        <defs>
+          <circle id={path1} cx='120' cy='120' r='120'/>
+          <path id={path2}
+                d='M12,160 C12,226.27417 65.72583,280 132,280 C198.27417,280 252,226.27417 252,160 L264,160 L264,-1.42108547e-14 L-3.19744231e-14,-1.42108547e-14 L-3.19744231e-14,160 L12,160 Z'/>
+          <path id={path3}
+                d='M124,144.610951 L124,163 L128,163 L128,163 C167.764502,163 200,195.235498 200,235 L200,244 L0,244 L0,235 C-4.86974701e-15,195.235498 32.235498,163 72,163 L72,163 L76,163 L76,144.610951 C58.7626345,136.422372 46.3722246,119.687011 44.3051388,99.8812385 C38.4803105,99.0577866 34,94.0521096 34,88 L34,74 C34,68.0540074 38.3245733,63.1180731 44,62.1659169 L44,56 L44,56 C44,25.072054 69.072054,5.68137151e-15 100,0 L100,0 L100,0 C130.927946,-5.68137151e-15 156,25.072054 156,56 L156,62.1659169 C161.675427,63.1180731 166,68.0540074 166,74 L166,88 C166,94.0521096 161.51969,99.0577866 155.694861,99.8812385 C153.627775,119.687011 141.237365,136.422372 124,144.610951 Z'/>
+        </defs>
+        <g stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
+          {circle && (
+            <g strokeWidth='1' fillRule='evenodd' transform='translate(12, 40)'>
+              <mask id={mask1} fill='white'>
+                <use xlinkHref={'#' + path1}/>
+              </mask>
+              <use fill='#E6E6E6' xlinkHref={'#' + path1}/>
+              <g mask={'url(#' + mask1 + ')'} fill='#65C9FF'>
+                <rect x='0' y='0' width='240' height='240'/>
+              </g>
+            </g>
+          )}
+          {circle && (
+            <mask id={mask2} fill='white'>
+              <use xlinkHref={'#' + path2}/>
+            </mask>
+          )}
+          <g strokeWidth='1' fillRule='evenodd' mask={'url(#' + mask2 + ')'}>
+            <g transform='translate(32, 36)'>
+              <mask id={mask3} fill='white'>
+                <use xlinkHref={'#' + path3}/>
+              </mask>
+              <use fill='#D0C6AC' xlinkHref={'#' + path3}/>
+              <Skin maskID={mask3}/>
+              <path fillOpacity='0.100000001' fill='#000000' mask={'url(#' + mask3 + ')'}
+                    d='M156,79 L156,102 C156,132.927946 130.927946,158 100,158 C69.072054,158 44,132.927946 44,102 L44,79 L44,94 C44,124.927946 69.072054,150 100,150 C130.927946,150 156,124.927946 156,94 L156,79 Z'/>
+            </g>
+            <Clothe/>
+            <Face/>
+            <Top>
+              <Accessories/>
+            </Top>
+          </g>
+        </g>
+      </svg>
+    </AvatarContext.Provider>
+  )
+}

package/src/avatar/AvatarContext.ts

@@ -0,0 +1,6 @@
+import React from 'react'
+import AvatarProps from './AvatarProps'
+
+const AvatarContext = React.createContext<AvatarProps>({})
+
+export default AvatarContext

package/src/avatar/AvatarProps.ts

@@ -0,0 +1,27 @@
+import ClotheType from './clothes/ClotheType'
+import GraphicType from './clothes/GraphicType'
+import EyebrowType from './face/eyebrow/EyebrowType'
+import AccessoriesType from './top/accessories/AccessoriesType'
+import FacialHairType from './top/facialHair/FacialHairType'
+import TopType from './top/TopType'
+import EyeType from './face/eyes/EyeType'
+import MouthType from './face/mouth/MouthType'
+
+type AvatarProps = {
+  circle?: boolean
+  topType?: TopType
+  accessoriesType?: AccessoriesType
+  hairColor?: string
+  facialHairType?: FacialHairType
+  facialHairColor?: string
+  clotheType?: ClotheType
+  clotheColor?: string
+  graphicType?: GraphicType
+  eyeType?: EyeType
+  eyebrowType?: EyebrowType
+  mouthType?: MouthType
+  skinColor?: string
+  hatColor?: string
+}
+
+export default AvatarProps

package/src/avatar/Color.tsx

@@ -0,0 +1,14 @@
+import { SVGProps } from 'react'
+
+type Props = {
+  maskID: string
+  color: string
+} & SVGProps<SVGGElement>
+
+export default function Color ({ maskID, color, ...props }: Props) {
+  return (
+    <g mask={`url(#${maskID})`} fill={color} {...props}>
+      <rect x='0' y='0' width='264' height='280'/>
+    </g>
+  )
+}

package/src/avatar/Skin.tsx

@@ -0,0 +1,34 @@
+import { useContext } from 'react'
+import AvatarContext from './AvatarContext'
+import SkinColor from './SkinColor'
+import Color from './Color'
+
+type Props = {
+  maskID: string
+}
+
+export default function Skin ({ maskID }: Props) {
+  const color = useContext(AvatarContext).skinColor
+  return <Color maskID={maskID} color={getSkinColor(color)}/>
+}
+
+function getSkinColor (color?: string) {
+  if (color && color.startsWith('#')) return color
+  switch (color) {
+    case SkinColor.Tanned:
+      return '#FD9841'
+    case SkinColor.Yellow:
+      return '#F8D25C'
+    case SkinColor.Pale:
+      return '#FFDBB4'
+    case SkinColor.Brown:
+      return '#D08B5B'
+    case SkinColor.DarkBrown:
+      return '#AE5D29'
+    case SkinColor.Black:
+      return '#614335'
+    case SkinColor.Light:
+    default:
+      return '#EDB98A'
+  }
+}

package/src/avatar/SkinColor.ts

@@ -0,0 +1,11 @@
+enum SkinColor {
+  Tanned = 'Tanned',
+  Yellow = 'Yellow',
+  Pale = 'Pale',
+  Light = 'Light',
+  Brown = 'Brown',
+  DarkBrown = 'DarkBrown',
+  Black = 'Black'
+}
+
+export default SkinColor

package/src/avatar/clothes/BlazerShirt.tsx

@@ -0,0 +1,41 @@
+import { useId } from 'react'
+
+export default function BlazerShirt () {
+  const path1 = useId()
+  const mask1 = useId()
+
+  return (
+    <g transform='translate(0, 170)'>
+      <defs>
+        <path id={path1}
+              d='M133.960472,0.294916112 C170.936473,3.32499816 200,34.2942856 200,72.0517235 L200,81 L0,81 L0,72.0517235 C1.22536245e-14,33.9525631 29.591985,2.76498122 67.0454063,0.219526408 C67.0152598,0.593114549 67,0.969227185 67,1.34762511 C67,13.2107177 81.9984609,22.8276544 100.5,22.8276544 C119.001539,22.8276544 134,13.2107177 134,1.34762511 C134,0.994669088 133.986723,0.64370138 133.960472,0.294916112 Z'/>
+      </defs>
+      <g transform='translate(32, 29)'>
+        <mask id={mask1} fill='white'>
+          <use xlinkHref={'#' + path1}/>
+        </mask>
+        <use fill='#E6E6E6' xlinkHref={'#' + path1}/>
+        <g mask={`url(#${mask1})`} fill='#262E33'>
+          <g transform='translate(-32, -29)'>
+            <rect x='0' y='0' width='264' height='110'/>
+          </g>
+        </g>
+        <g opacity='0.599999964' mask={`url(#${mask1})`} fillOpacity='0.16' fill='#000000'>
+          <g transform='translate(60, -25)'>
+            <ellipse cx='40.5' cy='27.8476251' rx='39.6351047' ry='26.9138272'/>
+          </g>
+        </g>
+      </g>
+      <g transform='translate(32, 28)'>
+        <path fill='#3A4C5A'
+              d='M68.784807,1.12222847 C30.512317,2.80409739 -1.89486556e-14,34.3646437 -1.42108547e-14,73.0517235 L0,73.0517235 L0,82 L69.3616767,82 C65.9607412,69.9199941 64,55.7087296 64,40.5 C64,26.1729736 65.7399891,12.7311115 68.784807,1.12222847 Z M131.638323,82 L200,82 L200,73.0517235 C200,34.7067641 170.024954,3.36285166 132.228719,1.17384225 C135.265163,12.7709464 137,26.1942016 137,40.5 C137,55.7087296 135.039259,69.9199941 131.638323,82 Z'/>
+        <path fill='#E6E6E6'
+              d='M149,58 L158.555853,50.83311 L158.555853,50.83311 C159.998897,49.7508275 161.987779,49.7682725 163.411616,50.8757011 L170,56 L149,58 Z'/>
+        <path fill='#2F4351'
+              d='M69,1.13686838e-13 C65,19.3333333 66.6666667,46.6666667 74,82 L58,82 L44,46 L50,37 L44,31 L63,1 C65.027659,0.369238637 67.027659,0.0359053037 69,1.13686838e-13 Z'/>
+        <path fill='#2F4351' transform='translate(141, 41) scale(-1, 1) translate(-141, -41)'
+              d='M151,1.13686838e-13 C147,19.3333333 148.666667,46.6666667 156,82 L140,82 L126,46 L132,37 L126,31 L145,1 C147.027659,0.369238637 149.027659,0.0359053037 151,1.13686838e-13 Z'/>
+      </g>
+    </g>
+  )
+}

package/src/avatar/clothes/BlazerSweater.tsx

@@ -0,0 +1,34 @@
+import { useId } from 'react'
+
+export default function BlazerSweater () {
+  const path1 = useId()
+  const mask1 = useId()
+
+  return (
+    <g transform='translate(0, 170)'>
+      <defs>
+        <path id={path1}
+              d='M105.192402,29.0517235 L104,29.0517235 L104,29.0517235 C64.235498,29.0517235 32,61.2872215 32,101.051724 L32,110 L232,110 L232,101.051724 C232,61.2872215 199.764502,29.0517235 160,29.0517235 L160,29.0517235 L158.807598,29.0517235 C158.934638,30.0353144 159,31.0364513 159,32.0517235 C159,45.8588423 146.911688,57.0517235 132,57.0517235 C117.088312,57.0517235 105,45.8588423 105,32.0517235 C105,31.0364513 105.065362,30.0353144 105.192402,29.0517235 Z'/>
+      </defs>
+      <mask id={mask1} fill='white'>
+        <use xlinkHref={'#' + path1}/>
+      </mask>
+      <use fill='#E6E6E6' fillRule='evenodd' xlinkHref={'#' + path1}/>
+      <g mask={`url(#${mask1})`} fillRule='evenodd' fill='#262E33'>
+        <rect x='0' y='0' width='264' height='110'/>
+      </g>
+      <g strokeWidth='1' fillRule='evenodd' transform='translate(32, 28)'>
+        <path fill='#3A4C5A'
+              d='M68.784807,1.12222847 C30.512317,2.80409739 1.24427139e-14,34.3646437 0,73.0517235 L0,82 L69.3616767,82 C65.9607412,69.9199941 64,55.7087296 64,40.5 C64,26.1729736 65.7399891,12.7311115 68.784807,1.12222847 Z M131.638323,82 L200,82 L200,73.0517235 C200,34.7067641 170.024954,3.36285166 132.228719,1.17384225 C135.265163,12.7709464 137,26.1942016 137,40.5 C137,55.7087296 135.039259,69.9199941 131.638323,82 Z'/>
+        <path fill='#E6E6E6'
+              d='M149,58 L158.555853,50.83311 L158.555853,50.83311 C159.998897,49.7508275 161.987779,49.7682725 163.411616,50.8757011 L170,56 L149,58 Z'/>
+        <path fill='#2F4351'
+              d='M69,1.13686838e-13 C65,19.3333333 66.6666667,46.6666667 74,82 L58,82 L44,46 L50,37 L44,31 L63,1 C65.027659,0.369238637 67.027659,0.0359053037 69,1.13686838e-13 Z'/>
+        <path fill='#2F4351' transform='translate(141, 41) scale(-1, 1) translate(-141, -41)'
+              d='M151,1.13686838e-13 C147,19.3333333 148.666667,46.6666667 156,82 L140,82 L126,46 L132,37 L126,31 L145,1 C147.027659,0.369238637 149.027659,0.0359053037 151,1.13686838e-13 Z'/>
+      </g>
+      <path fill='#F2F2F2' fillRule='evenodd'
+            d='M156,21.5390062 C162.772319,26.1359565 167,32.6563196 167,39.8878801 C167,47.2887711 162.572015,53.9447688 155.520105,58.5564942 L149.57933,53.8764929 L145,54.207887 L146,51.0567821 L145.922229,50.995516 C152.022491,47.8530505 156,42.7003578 156,36.8768102 L156,21.5390062 Z M108,21.5390062 C101.227681,26.1359565 97,32.6563196 97,39.8878801 C97,47.2887711 101.427985,53.9447688 108.479895,58.5564942 L114.42067,53.8764929 L119,54.207887 L118,51.0567821 L118.077771,50.995516 C111.977509,47.8530505 108,42.7003578 108,36.8768102 L108,21.5390062 Z'/>
+    </g>
+  )
+}

package/src/avatar/clothes/ClotheColor.tsx

@@ -0,0 +1,50 @@
+import ClotheColorName from './ClotheColorName'
+import { useContext } from 'react'
+import AvatarContext from '../AvatarContext'
+import Color from '../Color'
+
+export interface Props {
+  maskID: string
+}
+
+export default function ClotheColor ({ maskID }: Props) {
+  const color = useContext(AvatarContext).clotheColor
+  return <Color maskID={maskID} color={getClothColor(color)} fillRule='evenodd'/>
+}
+
+function getClothColor (color?: string) {
+  if (color && color.startsWith('#')) return color
+  switch (color) {
+    case ClotheColorName.Black:
+      return '#262E33'
+    case ClotheColorName.Blue01:
+      return '#65C9FF'
+    case ClotheColorName.Blue02:
+      return '#5199E4'
+    case ClotheColorName.Blue03:
+      return '#25557C'
+    case ClotheColorName.Gray02:
+      return '#929598'
+    case ClotheColorName.Heather:
+      return '#3C4F5C'
+    case ClotheColorName.PastelBlue:
+      return '#B1E2FF'
+    case ClotheColorName.PastelGreen:
+      return '#A7FFC4'
+    case ClotheColorName.PastelOrange:
+      return '#FFDEB5'
+    case ClotheColorName.PastelRed:
+      return '#FFAFB9'
+    case ClotheColorName.PastelYellow:
+      return '#FFFFB1'
+    case ClotheColorName.Red:
+      return '#FF5C5C'
+    case ClotheColorName.Pink:
+      return '#FF488E'
+    case ClotheColorName.White:
+      return '#FFFFFF'
+    case ClotheColorName.Gray01:
+    default:
+      return '#E6E6E6'
+  }
+}

package/src/avatar/clothes/ClotheColorName.ts

@@ -0,0 +1,19 @@
+enum ClotheColorName {
+  Black = 'Black',
+  Blue01 = 'Blue01',
+  Blue02 = 'Blue02',
+  Blue03 = 'Blue03',
+  Gray01 = 'Gray01',
+  Gray02 = 'Gray02',
+  Heather = 'Heather',
+  PastelBlue = 'PastelBlue',
+  PastelGreen = 'PastelGreen',
+  PastelOrange = 'PastelOrange',
+  PastelRed = 'PastelRed',
+  PastelYellow = 'PastelYellow',
+  Pink = 'Pink',
+  Red = 'Red',
+  White = 'White'
+}
+
+export default ClotheColorName

package/src/avatar/clothes/ClotheType.ts

@@ -0,0 +1,13 @@
+enum ClotheType {
+  BlazerShirt = 'BlazerShirt',
+  BlazerSweater = 'BlazerSweater',
+  CollarSweater = 'CollarSweater',
+  GraphicShirt = 'GraphicShirt',
+  Hoodie = 'Hoodie',
+  Overall = 'Overall',
+  ShirtCrewNeck = 'ShirtCrewNeck',
+  ShirtScoopNeck = 'ShirtScoopNeck',
+  ShirtVNeck = 'ShirtVNeck'
+}
+
+export default ClotheType

package/src/avatar/clothes/Clothes.tsx

@@ -0,0 +1,36 @@
+import ClotheType from './ClotheType'
+import ShirtCrewNeck from './ShirtCrewNeck'
+import ShirtScoopNeck from './ShirtScoopNeck'
+import ShirtVNeck from './ShirtVNeck'
+import BlazerShirt from './BlazerShirt'
+import GraphicShirt from './GraphicShirt'
+import Hoodie from './Hoodie'
+import CollarSweater from './CollarSweater'
+import BlazerSweater from './BlazerSweater'
+import Overall from './Overall'
+import { useContext } from 'react'
+import AvatarContext from '../AvatarContext'
+
+export default function Clothes () {
+  const type = useContext(AvatarContext).clotheType ?? ClotheType.BlazerShirt
+  switch (type) {
+    case ClotheType.BlazerShirt:
+      return <BlazerShirt/>
+    case ClotheType.BlazerSweater:
+      return <BlazerSweater/>
+    case ClotheType.CollarSweater:
+      return <CollarSweater/>
+    case ClotheType.GraphicShirt:
+      return <GraphicShirt/>
+    case ClotheType.Hoodie:
+      return <Hoodie/>
+    case ClotheType.Overall:
+      return <Overall/>
+    case ClotheType.ShirtCrewNeck:
+      return <ShirtCrewNeck/>
+    case ClotheType.ShirtScoopNeck:
+      return <ShirtScoopNeck/>
+    case ClotheType.ShirtVNeck:
+      return <ShirtVNeck/>
+  }
+}

package/src/avatar/clothes/CollarSweater.tsx

@@ -0,0 +1,23 @@
+import { useId } from 'react'
+import ClotheColor from './ClotheColor'
+
+export default function CollarSweater () {
+  const path1 = useId()
+  const mask1 = useId()
+
+  return (
+    <g transform='translate(0, 170)'>
+      <defs>
+        <path id={path1}
+              d='M105.192402,29.0517235 L104,29.0517235 L104,29.0517235 C64.235498,29.0517235 32,61.2872215 32,101.051724 L32,110 L232,110 L232,101.051724 C232,61.2872215 199.764502,29.0517235 160,29.0517235 L160,29.0517235 L158.807598,29.0517235 C158.934638,30.0353144 159,31.0364513 159,32.0517235 C159,45.8588423 146.911688,57.0517235 132,57.0517235 C117.088312,57.0517235 105,45.8588423 105,32.0517235 C105,31.0364513 105.065362,30.0353144 105.192402,29.0517235 Z'/>
+      </defs>
+      <mask id={mask1} fill='white'>
+        <use xlinkHref={'#' + path1}/>
+      </mask>
+      <use fill='#E6E6E6' fillRule='evenodd' xlinkHref={'#' + path1}/>
+      <ClotheColor maskID={mask1}/>
+      <path fill='#F2F2F2' fillRule='evenodd'
+            d='M156,22.2794906 C162.181647,26.8351858 166,33.1057265 166,40.027915 C166,47.2334941 161.862605,53.7329769 155.228997,58.3271669 L149.57933,53.8764929 L145,54.207887 L146,51.0567821 L145.922229,50.995516 C152.022491,47.8530505 156,42.7003578 156,36.8768102 L156,22.2794906 Z M108,21.5714994 C101.232748,26.1740081 97,32.7397769 97,40.027915 C97,47.4261549 101.361602,54.080035 108.308428,58.6915723 L114.42067,53.8764929 L119,54.207887 L118,51.0567821 L118.077771,50.995516 C111.977509,47.8530505 108,42.7003578 108,36.8768102 L108,21.5714994 Z'/>
+    </g>
+  )
+}

package/src/avatar/clothes/GraphicShirt.tsx

@@ -0,0 +1,25 @@
+import { useContext, useId } from 'react'
+import Graphics from './Graphics'
+import ClotheColor from './ClotheColor'
+import AvatarContext from '../AvatarContext'
+
+export default function GraphicShirt () {
+  const graphicType = useContext(AvatarContext).graphicType
+  const path1 = useId()
+  const mask1 = useId()
+
+  return (
+    <g transform='translate(0, 170)'>
+      <defs>
+        <path id={path1}
+              d='M165.624032,29.2681342 C202.760022,32.1373245 232,63.1798426 232,101.051724 L232,110 L32,110 L32,101.051724 C32,62.8348009 61.7752018,31.5722494 99.3929298,29.1967444 C99.1342224,30.2735458 99,31.3767131 99,32.5 C99,44.3741221 113.998461,54 132.5,54 C151.001539,54 166,44.3741221 166,32.5 C166,31.4015235 165.871641,30.3222877 165.624025,29.2681336 Z'/>
+      </defs>
+      <mask id={mask1} fill='white'>
+        <use xlinkHref={'#' + path1}/>
+      </mask>
+      <use fill='#E6E6E6' fillRule='evenodd' xlinkHref={'#' + path1}/>
+      <ClotheColor maskID={mask1}/>
+      <Graphics maskID={mask1} type={graphicType}/>
+    </g>
+  )
+}

package/src/avatar/clothes/GraphicType.ts

@@ -0,0 +1,15 @@
+enum GraphicType {
+  Bat = 'Bat',
+  Cumbia = 'Cumbia',
+  Deer = 'Deer',
+  Diamond = 'Diamond',
+  Hola = 'Hola',
+  Pizza = 'Pizza',
+  Resist = 'Resist',
+  Selena = 'Selena',
+  Bear = 'Bear',
+  SkullOutline = 'SkullOutline',
+  Skull = 'Skull'
+}
+
+export default GraphicType