Merge pull request #7 from bradrisse/master

Individual Pieces Showcase

README.md

@@ -57,6 +57,29 @@ export default class MyComponent extends React.Component {
 }
 ```
 
+To showcase individual pieces of the avatar you can use the Piece component, for example:
+
+```jsx
+import * as React from 'react'
+import {Piece} from 'avataaars';
+
+export default class MyComponent extends React.Component {
+  render () {
+    return 
+      <div>
+        <Piece pieceType="mouth" pieceSize="100" mouthType="Eating"/>
+        <Piece pieceType="eyes" pieceSize="100" eyeType="Dizzy"/>
+        <Piece pieceType="eyebrows" pieceSize="100" eyebrowType="RaisedExcited"/>
+        <Piece pieceType="accessories" pieceSize="100" accessoriesType="Round"/>
+        <Piece pieceType="top" pieceSize="100" topType="LongHairFro" hairColor="Red"/>
+        <Piece pieceType="facialHair" pieceSize="100" facialHairType="BeardMajestic"/>
+        <Piece pieceType="clothe" pieceSize="100" clotheType="Hoodie" clotheColor="Red"/>
+        <Piece pieceType="graphics" pieceSize="100" graphicType="Skull" />
+      </div>
+  }
+}
+```
+
 To explore avatar options and generate the React code, please use [Avataaars Generator](https://getavataaars.com/)
 
 ## Collect options

dist/avatar/Skin.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as React from 'react';
 export interface Props {
     maskID: string;

dist/avatar/Skin.js

@@ -1,8 +1,11 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    }
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }
@@ -19,7 +22,7 @@ function makeColor(name, color) {
             return _super !== null && _super.apply(this, arguments) || this;
         }
         ColorComponent.prototype.render = function () {
-            return (React.createElement("g", { id: 'Skin/👶🏽-03-Brown', mask: "url(#" + this.props.maskID + ")", fill: color },
+            return (React.createElement("g", { id: 'Skin/\uD83D\uDC76\uD83C\uDFFD-03-Brown', mask: "url(#" + this.props.maskID + ")", fill: color },
                 React.createElement("g", { transform: 'translate(-32.000000, 0.000000)', id: 'Color' },
                     React.createElement("rect", { x: '0', y: '0', width: '264', height: '244' }))));
         };

dist/avatar/clothes/BlazerShirt.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as React from 'react';
 export default class BlazerShirt extends React.Component {
     static optionValue: string;

dist/avatar/clothes/BlazerShirt.js

@@ -1,8 +1,11 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    }
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }
@@ -30,10 +33,10 @@ var BlazerShirt = /** @class */ (function (_super) {
                     React.createElement("use", { xlinkHref: '#' + path1 })),
                 React.createElement("use", { id: 'Clothes', fill: '#E6E6E6', xlinkHref: '#' + path1 }),
                 React.createElement("g", { id: 'Color/Palette/Black', mask: "url(#" + mask1 + ")", fill: '#262E33' },
-                    React.createElement("g", { transform: 'translate(-32.000000, -29.000000)', id: '🖍Color' },
+                    React.createElement("g", { transform: 'translate(-32.000000, -29.000000)', id: '\uD83D\uDD8DColor' },
                         React.createElement("rect", { x: '0', y: '0', width: '264', height: '110' }))),
                 React.createElement("g", { id: 'Shadowy', opacity: '0.599999964', mask: "url(#" + mask1 + ")", fillOpacity: '0.16', fill: '#000000' },
-                    React.createElement("g", { transform: 'translate(60.000000, -25.000000)', id: 'Hola-👋🏼' },
+                    React.createElement("g", { transform: 'translate(60.000000, -25.000000)', id: 'Hola-\uD83D\uDC4B\uD83C\uDFFC' },
                         React.createElement("ellipse", { cx: '40.5', cy: '27.8476251', rx: '39.6351047', ry: '26.9138272' })))),
             React.createElement("g", { id: 'Blazer', transform: 'translate(32.000000, 28.000000)' },
                 React.createElement("path", { 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', id: 'Saco', fill: '#3A4C5A' }),

dist/avatar/clothes/BlazerSweater.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as React from 'react';
 export default class BlazerSweater extends React.Component {
     static optionValue: string;

dist/avatar/clothes/BlazerSweater.js

@@ -1,8 +1,11 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    }
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }
@@ -29,7 +32,7 @@ var BlazerSweater = /** @class */ (function (_super) {
                 React.createElement("use", { xlinkHref: '#' + path1 })),
             React.createElement("use", { id: 'Clothes', fill: '#E6E6E6', fillRule: 'evenodd', xlinkHref: '#' + path1 }),
             React.createElement("g", { id: 'Color/Palette/Black', mask: "url(#" + mask1 + ")", fillRule: 'evenodd', fill: '#262E33' },
-                React.createElement("rect", { id: '🖍Color', x: '0', y: '0', width: '264', height: '110' })),
+                React.createElement("rect", { id: '\uD83D\uDD8DColor', x: '0', y: '0', width: '264', height: '110' })),
             React.createElement("g", { id: 'Blazer', strokeWidth: '1', fillRule: 'evenodd', transform: 'translate(32.000000, 28.000000)' },
                 React.createElement("path", { 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', id: 'Saco', fill: '#3A4C5A' }),
                 React.createElement("path", { 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', id: 'Pocket-hanky', fill: '#E6E6E6' }),

dist/avatar/clothes/CollarSweater.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as React from 'react';
 export default class CollarSweater extends React.Component {
     static optionValue: string;

dist/avatar/clothes/CollarSweater.js

@@ -1,8 +1,11 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    }
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }

dist/avatar/clothes/Colors.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as React from 'react';
 export interface Props {
     maskID: string;

dist/avatar/clothes/Colors.js

@@ -1,8 +1,11 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    }
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }
@@ -20,7 +23,7 @@ function makeColor(name, color) {
         }
         ColorComponent.prototype.render = function () {
             return (React.createElement("g", { id: 'Color/Palette/Gray-01', mask: "url(#" + this.props.maskID + ")", fillRule: 'evenodd', fill: color },
-                React.createElement("rect", { id: '🖍Color', x: '0', y: '0', width: '264', height: '110' })));
+                React.createElement("rect", { id: '\uD83D\uDD8DColor', x: '0', y: '0', width: '264', height: '110' })));
         };
         return ColorComponent;
     }(React.Component));

dist/avatar/clothes/GraphicShirt.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as React from 'react';
 export default class GraphicShirt extends React.Component {
     static optionValue: string;

dist/avatar/clothes/GraphicShirt.js

@@ -1,8 +1,11 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    }
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }

dist/avatar/clothes/Graphics.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as React from 'react';
 export interface Props {
     maskID: string;

dist/avatar/clothes/Hoodie.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as React from 'react';
 export default class Hoodie extends React.Component {
     static optionValue: string;

dist/avatar/clothes/Hoodie.js

@@ -1,8 +1,11 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    }
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }

dist/avatar/clothes/Overall.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as React from 'react';
 export default class Overall extends React.Component {
     static optionValue: string;

dist/avatar/clothes/Overall.js

@@ -1,8 +1,11 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    }
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }

dist/avatar/clothes/ShirtCrewNeck.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as React from 'react';
 export default class ShirtCrewNeck extends React.Component {
     static optionValue: string;

dist/avatar/clothes/ShirtCrewNeck.js

@@ -1,8 +1,11 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    }
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }
@@ -31,7 +34,7 @@ var ShirtCrewNeck = /** @class */ (function (_super) {
             React.createElement("use", { id: 'Clothes', fill: '#E6E6E6', fillRule: 'evenodd', xlinkHref: '#' + path1 }),
             React.createElement(Colors_1.default, { maskID: mask1 }),
             React.createElement("g", { id: 'Shadowy', opacity: '0.599999964', strokeWidth: '1', fillRule: 'evenodd', mask: "url(#" + mask1 + ")", fillOpacity: '0.16', fill: '#000000' },
-                React.createElement("g", { transform: 'translate(92.000000, 4.000000)', id: 'Hola-👋🏼' },
+                React.createElement("g", { transform: 'translate(92.000000, 4.000000)', id: 'Hola-\uD83D\uDC4B\uD83C\uDFFC' },
                     React.createElement("ellipse", { cx: '40.5', cy: '27.8476251', rx: '39.6351047', ry: '26.9138272' })))));
     };
     ShirtCrewNeck.optionValue = 'ShirtCrewNeck';

dist/avatar/clothes/ShirtScoopNeck.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as React from 'react';
 export default class ShirtScoopNeck extends React.Component {
     static optionValue: string;

dist/avatar/clothes/ShirtScoopNeck.js

@@ -1,8 +1,11 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    }
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }

dist/avatar/clothes/ShirtVNeck.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as React from 'react';
 export default class ShirtVNeck extends React.Component {
     static optionValue: string;

dist/avatar/clothes/ShirtVNeck.js

@@ -1,8 +1,11 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    }
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }

dist/avatar/clothes/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as React from 'react';
 export default class Clothes extends React.Component {
     render(): JSX.Element;

dist/avatar/clothes/index.js

@@ -1,8 +1,11 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    }
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }

dist/avatar/face/eyebrow/Angry.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as React from 'react';
 export default class Angry extends React.Component {
     static optionValue: string;

dist/avatar/face/eyebrow/Angry.js

@@ -1,8 +1,11 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    }
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }

dist/avatar/face/eyebrow/AngryNatural.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as React from 'react';
 export default class AngryNatural extends React.Component {
     static optionValue: string;

dist/avatar/face/eyebrow/AngryNatural.js

@@ -1,8 +1,11 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    }
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }