{"_id":"@benmidi/avataaars","_rev":"4-a354e4d32c935c4303b7df6d0e04207c","name":"@benmidi/avataaars","dist-tags":{"latest":"1.2.4"},"versions":{"1.2.1":{"name":"@benmidi/avataaars","version":"1.2.1","description":"React component for avataaars ","main":"dist/index.js","types":"dist/index.d.ts","keywords":["react","avatar"],"repository":{"type":"git","url":"git+ssh://git@github.com/fangpenlin/avataaars.git"},"author":{"name":"Fang-Pen Lin","email":"hello@fangpenlin.com"},"license":"MIT","peerDependencies":{"react":"^16.0.0"},"devDependencies":{"@types/react":"^16.0.25","import-sort-style-renke":"^4.2.0","tslint":"^5.8.0","tslint-config-standard":"^7.0.0","tslint-react":"^3.2.0","typescript":"^2.6.2"},"dependencies":{"lodash":">=4.17.11","prop-types":"^15.6.0"},"importSort":{".js, .jsx, .es6, .es":{"parser":"babylon","style":"import-sort-style-renke"},".ts, .tsx":{"parser":"typescript","style":"import-sort-style-renke"}},"gitHead":"437ca36b9bb205b723910ab2c7c72061ec3d9047","bugs":{"url":"https://github.com/fangpenlin/avataaars/issues"},"homepage":"https://github.com/fangpenlin/avataaars#readme","_id":"@benmidi/avataaars@1.2.1","_nodeVersion":"13.3.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-fuphUnDD/QID81SecbX63h9U2A6bnp/7jduvhaGM1TBpY22HwUYxdq9sS4NLoCz4vHMS534hksDYkvIPl2m3yw==","shasum":"d20ef36438346b0ee75b310f8f445b40e045ce29","tarball":"https://registry.npmjs.org/@benmidi/avataaars/-/avataaars-1.2.1.tgz","fileCount":365,"unpackedSize":1038225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCSkhCRA9TVsSAnZWagAAOzsP/iOVPfWPG7rZ/eHsYivn\n7wFMqAIOUHtGM2AxUg5xO9nPv6QFpxZeqyPLFndGcUDn+Tcx0q8U3ogWZbhp\nW9mWl4JxMLmU9dKkB4MfaxVX6mA5AxNDeCA8cvbnwb1hsumHXnQt6Fnl6xbg\nubF2ABswL/KrHgt8ePICPuAENJutctoDa9pD/KfRu9s8O6UHC9hkq5vk0fT+\ng4YD25FodS+Msgh5+R6BWz/7r9zqCOACcuB5tFJjNNetJkI7/G/iXuWe6HQf\ntUFJMk7bmta/NgqDgIUn0zil3oMqQMH21pBz0FGW1InWkm9/KBMynCquiEg5\nkuLTk+N1r3u2hbAsHq8wK1rRm9lt60yc+B2k0QiD5nnIl566nGS7kMyHAdD3\nKOBjWcO+01WIHoiikKqfTpbuTMfCT+b/P8aQq87kjG6NF/hdKdCQcx+cCaWj\ns2HHHx4EMGBKNrHZt0gyNQ681x/s6wQ0YkKY+iEn5+GAv/zN8ea0O8B6rTLR\nmX45SE6woDIju7A8K+SLswvFm7U9XLTspoweH0bZN24M0Eos6L7+SErBCkjp\nL4I2i2ohuh3LUf0yKmJ9GD5Wj+NB4G/cXyrCZIur0bgZhMMz2UrSJj0J8em4\nYedyYsMXtUmW3aEmffRPkS1OXDe/wIebQaSoiDjicvbuq+B6gVNizz9476g/\ndqtY\r\n=S6Rr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEib/efb8Pf3ydkKYMhOR92rja5w2lFtMxLm29nRVAMnAiEA+SWuSIV0+sGak2EVrctAoiRPKi1fhk8yVrVqOK+KXBM="}]},"maintainers":[{"name":"benmidi","email":"ben.wilson@refinery29.com"}],"_npmUser":{"name":"benmidi","email":"ben.wilson@refinery29.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/avataaars_1.2.1_1577658657403_0.9467509981462714"},"_hasShrinkwrap":false},"1.2.2":{"name":"@benmidi/avataaars","version":"1.2.2","description":"React component for avataaars ","main":"dist/index.js","types":"dist/index.d.ts","keywords":["react","avatar"],"repository":{"type":"git","url":"git+ssh://git@github.com/fangpenlin/avataaars.git"},"author":{"name":"Fang-Pen Lin","email":"hello@fangpenlin.com"},"license":"MIT","peerDependencies":{"react":"^16.0.0"},"devDependencies":{"@types/react":"^16.0.25","import-sort-style-renke":"^4.2.0","tslint":"^5.8.0","tslint-config-standard":"^7.0.0","tslint-react":"^3.2.0","typescript":"^2.6.2"},"dependencies":{"lodash":">=4.17.11","prop-types":"^15.6.0"},"importSort":{".js, .jsx, .es6, .es":{"parser":"babylon","style":"import-sort-style-renke"},".ts, .tsx":{"parser":"typescript","style":"import-sort-style-renke"}},"gitHead":"13f9beadc1469ce94c20d69f580d868f4dcd3c78","bugs":{"url":"https://github.com/fangpenlin/avataaars/issues"},"homepage":"https://github.com/fangpenlin/avataaars#readme","_id":"@benmidi/avataaars@1.2.2","_nodeVersion":"13.3.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-3mA51ztKlmy0FWhYVJ2IpMKT6AP8xmco+yhERk1dWxB55JeFNQKKn0NVtJXX66hZZSR6S8d4tUqI40/oT0avoQ==","shasum":"1067d2b1495b1907ca2f0745ac3148e82f594e59","tarball":"https://registry.npmjs.org/@benmidi/avataaars/-/avataaars-1.2.2.tgz","fileCount":368,"unpackedSize":1050247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCT1ICRA9TVsSAnZWagAA8lkP/i36REywNQ0xEPIAASq3\nAEV/Jzp1bVV9Ey3I4vcuz9K5nGIXGmUx6ndW58a+KAzZ6DVUUEzd0lURrwts\nv6PHZo95zvzXkH4H2BRj/XZ/SWzJRUDz+Ky4l4zZhPYtrem33YcFvF7qloVY\nbRLB5t6BAPFPpOvRo4qczF1dbbPIlDtZzQAxQre0+ciFD9Z4eltVbf6q0tVD\nEzROPjkIE2WmudzXv58jwvXXdVsGaBMNx89jHH9UPjx+kG7EDIKznn0/1vhX\nCQolfmuTQ1DbPGiribq+jUwQNLIbuegMTbSy32eC9GzCTfzILuZxbEeHWr7k\n+g5Fw5upIUo4WUm6fYKcPNlo6TtU/t9qKTKzQUgnxtAsKaFJs3LlMDN3Tqmp\nOHF4glZN1dQ2PVcEhdoUGU6m5OKIaRw9gtb1sURJNlbMugLJqMoXuFOLmrq1\nr2huWLbdCpXojO1VSm04xDpJqSlX8PruE1EkZsbxO8Y0t9s7+7pG3bmV4f22\nVjmRJcE7gui+7wbE7kEV0CEyxmohaWHwwkvSHy2Qud4cHeROkmcvYXtFeUtp\nDpkL7O0UQu7GhhMk6rKlKLA2dxH/GrsBcplbJsx5tzToXCN7YI+9Z6ZZL4ze\nypWoJmgB5vAvmWikA+4ybSx/pA/BNu76sFQS6TO3EaqtEVpDBEpJAUDd8HOd\njmO+\r\n=QrIk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA83EHxs9MURSFBm1/GC1ixQZMGDx4LK8HWk+JYu9gsiAiEAvh9qU2HyEc7SEFybqi5ts+y5CqD5H00KAqqoI1pCNi0="}]},"maintainers":[{"name":"benmidi","email":"ben.wilson@refinery29.com"}],"_npmUser":{"name":"benmidi","email":"ben.wilson@refinery29.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/avataaars_1.2.2_1577663816131_0.8818657538590782"},"_hasShrinkwrap":false},"1.2.3":{"name":"@benmidi/avataaars","version":"1.2.3","description":"React component for avataaars ","main":"dist/index.js","types":"dist/index.d.ts","keywords":["react","avatar"],"repository":{"type":"git","url":"git+ssh://git@github.com/fangpenlin/avataaars.git"},"author":{"name":"Fang-Pen Lin","email":"hello@fangpenlin.com"},"license":"MIT","peerDependencies":{"react":"^16.0.0"},"devDependencies":{"@types/react":"^16.0.25","import-sort-style-renke":"^4.2.0","tslint":"^5.8.0","tslint-config-standard":"^7.0.0","tslint-react":"^3.2.0","typescript":"^2.6.2"},"dependencies":{"lodash":">=4.17.11","prop-types":"^15.6.0"},"importSort":{".js, .jsx, .es6, .es":{"parser":"babylon","style":"import-sort-style-renke"},".ts, .tsx":{"parser":"typescript","style":"import-sort-style-renke"}},"gitHead":"640ae5abe6791f953589560299445fad77017890","bugs":{"url":"https://github.com/fangpenlin/avataaars/issues"},"homepage":"https://github.com/fangpenlin/avataaars#readme","_id":"@benmidi/avataaars@1.2.3","_nodeVersion":"13.3.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-AqtsZknjB0J0mVimDw4ZrZoXDMuBGNlX6XQNkGmcvGniyTi+N0eoKbeBgz/69VFnEdAKkRseLmgtLIs5pp+9+Q==","shasum":"071fc358742e6246a8a4900fee5b7a8e91690725","tarball":"https://registry.npmjs.org/@benmidi/avataaars/-/avataaars-1.2.3.tgz","fileCount":368,"unpackedSize":1050255,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCT6NCRA9TVsSAnZWagAAa3EP/je16dC2nxpeu3IMyYck\nMT8BwaFfyCOAsG96nmKlExDhZT2ErCi+7KR8gYmBPouaeoSQcqaOsSzoYswJ\n7cMsDcZdENM2iZd02SA/fWBJYFjyKyUiaoeSpccgVYE91WBWhYVoytWtWcul\n9kfG0yy0GeYTL/LSYvaSas3mnIu/oPmExtXxoO/uN3DqEj2OJAQgpPLtzwG+\nYYHKFfY8SMs8NJB4ovu3r9Rz61+lA7QdVJYFNY/BnVEx/+GrMOt+cZAoeRcQ\nGE5vbX+tUFr7HWQbdWUTTs44TX/jfWUKV7MTECPy1uR9LHj7d4cy8S31Innj\nWw73V75uOBSEj1AAcMfj1rTKM3GZBsKtTKyBcoUOnByMvgALJDd8fLw4qEl0\nycRexX/2On1g+dpRD5sbkKK/5b9nAtfHRLYKzphAuEbdN9wqG8HGTRs1I5kQ\na/EIsM2nuUw3WS6qa4CkqfZ5w+QT+BlQFNoZprkmDZY2/O8btjPDsNnQPvpj\nyzW2dTAIQoCAc7E71SUTiOL8v5H1Dv/jQiCg3YqDKsuRzlk7VFnG2vO/Lrek\n6rH8tbPyznY9A9CUbF7qAlD69+JbyHkO7koBaA9SDlma/yJ6rB1tBTt+AZaR\nzziNFT5sb+QecYApkJP/2PsdCfJfS6J4BNjAAoWO4yhpRjXcQr3X9lJfyoGZ\nqJEu\r\n=+18C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrvM+YwH6gSBh/iySXbu2K/eIGUbN6MvsDUc4wqik45QIhANJPYDPUACUyXk4DXVZHErSzyPpzPXeuuFxy0tWAAKpW"}]},"maintainers":[{"name":"benmidi","email":"ben.wilson@refinery29.com"}],"_npmUser":{"name":"benmidi","email":"ben.wilson@refinery29.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/avataaars_1.2.3_1577664141107_0.6028953886925676"},"_hasShrinkwrap":false},"1.2.4":{"name":"@benmidi/avataaars","version":"1.2.4","description":"React component for avataaars ","main":"dist/index.js","types":"dist/index.d.ts","keywords":["react","avatar"],"repository":{"type":"git","url":"git+ssh://git@github.com/fangpenlin/avataaars.git"},"author":{"name":"Fang-Pen Lin","email":"hello@fangpenlin.com"},"license":"MIT","peerDependencies":{"react":"^16.0.0"},"devDependencies":{"@types/react":"^16.0.25","import-sort-style-renke":"^4.2.0","tslint":"^5.8.0","tslint-config-standard":"^7.0.0","tslint-react":"^3.2.0","typescript":"^2.6.2"},"dependencies":{"lodash":">=4.17.11","prop-types":"^15.6.0"},"importSort":{".js, .jsx, .es6, .es":{"parser":"babylon","style":"import-sort-style-renke"},".ts, .tsx":{"parser":"typescript","style":"import-sort-style-renke"}},"gitHead":"14762e7575bcd3285cbda12f7f58a78fcb220685","bugs":{"url":"https://github.com/fangpenlin/avataaars/issues"},"homepage":"https://github.com/fangpenlin/avataaars#readme","_id":"@benmidi/avataaars@1.2.4","_nodeVersion":"13.3.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-NhPMpCE49elGCnIrVBY6Tt9lQI9MDNTUowohPDNbl1ttJmBSjH3Bded5fitv0q3ceAQnDaCcP3MBVnxjpMTtkA==","shasum":"ab380349d81c1a512e5c194fb58ff4569581cce1","tarball":"https://registry.npmjs.org/@benmidi/avataaars/-/avataaars-1.2.4.tgz","fileCount":368,"unpackedSize":1050291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCUJqCRA9TVsSAnZWagAA5jcQAJ7oR5emNhM2tJ8p8x1l\nb+zvcVxO3E/dNJ1rOXvyzxvKdUfuBqn+UljnSwU2wkEX9D4Q5FagqZVWakaj\nGDEEl/oke6xqYeVlak1HObv+A7QR6pBhvWcDM6nQ4KodukPgUhfd+zW7Oqyh\n+FHsYHMIdJX34jQTbvOSXKaVpXyomM7wIsLOXWd2BSFZ6J7V3wFRHdd0iUAJ\nNBUJV4zbmAtAKs4C6M8FsMdTFgZG8ZUq6fc5tBHlX5jqaZAEXTvBkzMem6HW\nh4sU23A4b9DRPFctRfHio0rGhT0zyZRT6XkrJ6+m+4X7KxeV28gSTF0unqgg\nn0P0KWXX/iJRUHSLNdl6k324/KzY65gXJ0LRjduShZgIxaQhtWVEuZETHMAr\nXjMquZhHvypj/8vq5Qsv90zvsAC9Mjo1+E/r4GQOVlDyjVWVkSZ0AtZALP4l\nRgVtWiAAdmOucUxYX3unAMBMTNQZgFV5f3InNfHWlgFh4xxy1eDilZYEib9o\nOb+hpP0H2Lo4rLMmY5nWIdjgnOao3iF8YDHn4iWf493ZJ+pE4KhjS7j/VUVw\nHQn5TxTOBeoNkkoJ6VsxxlDQJn6zCoT2U0lSTYDBtBKQyqbizvDcc4BfypJD\n40SwPYnJ/oqyjv7xrMXIdHG2fkL2WNYMGBO4bmb++bkSNBk4tWu6wyB+f6//\n5E1M\r\n=puLk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIELqzAX5wi6wsJnfxMP7Xqw/U6uc2rCo+WdpaAtinpoiAiAXnfQLEwp37u6ypbX6oMRvyBGuucjMgwCM7x18YoARxA=="}]},"maintainers":[{"name":"benmidi","email":"ben.wilson@refinery29.com"}],"_npmUser":{"name":"benmidi","email":"ben.wilson@refinery29.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/avataaars_1.2.4_1577665129655_0.8800438763973548"},"_hasShrinkwrap":false}},"time":{"created":"2019-12-29T22:30:57.365Z","1.2.1":"2019-12-29T22:30:57.596Z","modified":"2022-04-04T18:23:09.947Z","1.2.2":"2019-12-29T23:56:56.393Z","1.2.3":"2019-12-30T00:02:21.398Z","1.2.4":"2019-12-30T00:18:49.851Z"},"maintainers":[{"name":"benmidi","email":"ben.wilson@refinery29.com"}],"description":"React component for avataaars ","homepage":"https://github.com/fangpenlin/avataaars#readme","keywords":["react","avatar"],"repository":{"type":"git","url":"git+ssh://git@github.com/fangpenlin/avataaars.git"},"author":{"name":"Fang-Pen Lin","email":"hello@fangpenlin.com"},"bugs":{"url":"https://github.com/fangpenlin/avataaars/issues"},"license":"MIT","readme":"# React component for Avataaars\n\nThe core React component for [Avataaars Generator](https://getavataaars.com/) developed by [Fang-Pen Lin](https://twitter.com/fangpenlin), based on the Sketch library [Avataaars](https://avataaars.com/) designed by [Pablo Stanley](https://twitter.com/pablostanley). \n\n<p align=\"center\"><img src='avataaars-example.png?raw=true' style='width: 300px; height: 300px;' /></p>\n\n## Features\n\n - SVG based\n - Light weight \n - Scalable\n - Easy to use\n - Easy to integrate with custom editor\n - Comes with [official editor](https://getavataaars.com/)\n\n## Usage\n\nFirst, you need to install the avataaars component package, here you run\n\n```\nyarn add avataaars\n```\n\nor\n\n```\nnpm install avataaars --save\n```\n\nif you are using npm. Then, in your React app, import the Avataaar component and put it where you like it to be, for example\n\n```jsx\nimport * as React from 'react'\nimport Avatar from 'avataaars'\n\nexport default class MyComponent extends React.Component {\n  render () {\n    return \n      <div>\n        Your avatar:\n        <Avatar\n          style={{width: '100px', height: '100px'}}\n          avatarStyle='Circle'\n          topType='LongHairMiaWallace'\n          accessoriesType='Prescription02'\n          hairColor='BrownDark'\n          facialHairType='Blank'\n          clotheType='Hoodie'\n          clotheColor='PastelBlue'\n          eyeType='Happy'\n          eyebrowType='Default'\n          mouthType='Smile'\n          skinColor='Light'\n        />\n      </div>\n  }\n}\n```\n\nTo showcase individual pieces of the avatar you can use the Piece component, for example:\n\n```jsx\nimport * as React from 'react'\nimport {Piece} from 'avataaars';\n\nexport default class MyComponent extends React.Component {\n  render () {\n    return \n      <div>\n        <Piece pieceType=\"mouth\" pieceSize=\"100\" mouthType=\"Eating\"/>\n        <Piece pieceType=\"eyes\" pieceSize=\"100\" eyeType=\"Dizzy\"/>\n        <Piece pieceType=\"eyebrows\" pieceSize=\"100\" eyebrowType=\"RaisedExcited\"/>\n        <Piece pieceType=\"accessories\" pieceSize=\"100\" accessoriesType=\"Round\"/>\n        <Piece pieceType=\"top\" pieceSize=\"100\" topType=\"LongHairFro\" hairColor=\"Red\"/>\n        <Piece pieceType=\"facialHair\" pieceSize=\"100\" facialHairType=\"BeardMajestic\"/>\n        <Piece pieceType=\"clothe\" pieceSize=\"100\" clotheType=\"Hoodie\" clotheColor=\"Red\"/>\n        <Piece pieceType=\"graphics\" pieceSize=\"100\" graphicType=\"Skull\" />\n        <Piece pieceType=\"skin\" pieceSize=\"100\" skinColor=\"Brown\" />\n      </div>\n  }\n}\n```\n\nTo explore avatar options and generate the React code, please use [Avataaars Generator](https://getavataaars.com/)\n\n## Collect options\n\nTo build your own avatar editor, you may want to use lower level `Avatar` component along with `OptionContext`. For more details usage, please reference to source code of [avataaars-generator](https://github.com/fangpenlin/avataaars-geneator), see how it uses `OptionContext` to collection available options.\n","readmeFilename":"README.md"}