├── README.md ├── avatar-512.png ├── avatar-640.png ├── avatar-768.png ├── avatar.svg ├── cli.js ├── index.html ├── index.js ├── package-lock.json ├── package.json ├── src ├── Avatar.js └── path.js └── svg.js /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Avatar 3 | 4 | ![](avatar-512.png) 5 | 6 | ```sh 7 | npm i jxnblk 8 | ``` 9 | 10 | Canonical URL: 11 | 12 | [`http://jxnblk.com/avatar.png`](http://jxnblk.com/avatar.png) 13 | 14 | -------------------------------------------------------------------------------- /avatar-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/avatar/4bd8b21ae617e5b9ceefe5127c81392436c2f8aa/avatar-512.png -------------------------------------------------------------------------------- /avatar-640.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/avatar/4bd8b21ae617e5b9ceefe5127c81392436c2f8aa/avatar-640.png -------------------------------------------------------------------------------- /avatar-768.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/avatar/4bd8b21ae617e5b9ceefe5127c81392436c2f8aa/avatar-768.png -------------------------------------------------------------------------------- /avatar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /cli.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | const boxen = require('boxen') 3 | const chalk = require('chalk') 4 | 5 | console.log(boxen((`${chalk.magenta('@jxnblk | Brent Jackson')} 6 | 7 | Front End Developer 8 | 9 | Twitter: ${chalk.cyan('https://twitter.com/jxnblk')} 10 | GitHub: ${chalk.cyan('https://github.com/jxnblk')} 11 | Web: ${chalk.cyan('https://jxnblk.com')}`), { 12 | padding: 1, 13 | margin: 1, 14 | borderStyle: 'round', 15 | borderColor: 'cyan', 16 | dimBorder: true, 17 | })) 18 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

Jxnblk Avatar

5 |
6 | 7 | 8 | 9 | SVG 10 | PNG 11 | 
npm i jxnblk-avatar
12 |
13 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 2 | const Avatar = require('./src/Avatar') 3 | const path = require('./src/path') 4 | 5 | module.exports = { 6 | Avatar, 7 | path 8 | } 9 | 10 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jxnblk", 3 | "version": "1.4.1", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "ansi-align": { 8 | "version": "3.0.0", 9 | "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz", 10 | "integrity": "sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==", 11 | "requires": { 12 | "string-width": "^3.0.0" 13 | } 14 | }, 15 | "ansi-regex": { 16 | "version": "4.1.0", 17 | "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", 18 | "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==" 19 | }, 20 | "ansi-styles": { 21 | "version": "3.2.1", 22 | "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", 23 | "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", 24 | "requires": { 25 | "color-convert": "^1.9.0" 26 | } 27 | }, 28 | "boxen": { 29 | "version": "3.1.0", 30 | "resolved": "https://registry.npmjs.org/boxen/-/boxen-3.1.0.tgz", 31 | "integrity": "sha512-WiP53arM6cU2STTBYQ2we3viJkDqkthMYaTFnmXPZ/v3S4h43H5MHWpw5d85SgmHiYO/Y+2PoyXO8nTEURXNJA==", 32 | "requires": { 33 | "ansi-align": "^3.0.0", 34 | "camelcase": "^5.3.1", 35 | "chalk": "^2.4.2", 36 | "cli-boxes": "^2.1.0", 37 | "string-width": "^3.0.0", 38 | "term-size": "^1.2.0", 39 | "type-fest": "^0.3.0", 40 | "widest-line": "^2.0.0" 41 | } 42 | }, 43 | "camelcase": { 44 | "version": "5.3.1", 45 | "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", 46 | "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==" 47 | }, 48 | "chalk": { 49 | "version": "2.4.2", 50 | "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", 51 | "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", 52 | "requires": { 53 | "ansi-styles": "^3.2.1", 54 | "escape-string-regexp": "^1.0.5", 55 | "supports-color": "^5.3.0" 56 | } 57 | }, 58 | "cli-boxes": { 59 | "version": "2.1.0", 60 | "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.1.0.tgz", 61 | "integrity": "sha512-V9gkudTUk+iZGUYvI6qNwD9XbEc0mJiQEjYT5/+RLhN/3GgSTjIAsltAIA+idbCEAdAQw//uaXRHBp+CETPjuA==" 62 | }, 63 | "color-convert": { 64 | "version": "1.9.3", 65 | "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", 66 | "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", 67 | "requires": { 68 | "color-name": "1.1.3" 69 | } 70 | }, 71 | "color-name": { 72 | "version": "1.1.3", 73 | "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", 74 | "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" 75 | }, 76 | "cross-spawn": { 77 | "version": "5.1.0", 78 | "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz", 79 | "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=", 80 | "requires": { 81 | "lru-cache": "^4.0.1", 82 | "shebang-command": "^1.2.0", 83 | "which": "^1.2.9" 84 | } 85 | }, 86 | "emoji-regex": { 87 | "version": "7.0.3", 88 | "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", 89 | "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==" 90 | }, 91 | "escape-string-regexp": { 92 | "version": "1.0.5", 93 | "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", 94 | "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" 95 | }, 96 | "execa": { 97 | "version": "0.7.0", 98 | "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz", 99 | "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=", 100 | "requires": { 101 | "cross-spawn": "^5.0.1", 102 | "get-stream": "^3.0.0", 103 | "is-stream": "^1.1.0", 104 | "npm-run-path": "^2.0.0", 105 | "p-finally": "^1.0.0", 106 | "signal-exit": "^3.0.0", 107 | "strip-eof": "^1.0.0" 108 | } 109 | }, 110 | "get-stream": { 111 | "version": "3.0.0", 112 | "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", 113 | "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=" 114 | }, 115 | "has-flag": { 116 | "version": "3.0.0", 117 | "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", 118 | "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" 119 | }, 120 | "is-fullwidth-code-point": { 121 | "version": "2.0.0", 122 | "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", 123 | "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=" 124 | }, 125 | "is-stream": { 126 | "version": "1.1.0", 127 | "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", 128 | "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=" 129 | }, 130 | "isexe": { 131 | "version": "2.0.0", 132 | "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", 133 | "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=" 134 | }, 135 | "js-tokens": { 136 | "version": "4.0.0", 137 | "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", 138 | "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", 139 | "dev": true 140 | }, 141 | "loose-envify": { 142 | "version": "1.4.0", 143 | "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", 144 | "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", 145 | "dev": true, 146 | "requires": { 147 | "js-tokens": "^3.0.0 || ^4.0.0" 148 | } 149 | }, 150 | "lru-cache": { 151 | "version": "4.1.5", 152 | "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", 153 | "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", 154 | "requires": { 155 | "pseudomap": "^1.0.2", 156 | "yallist": "^2.1.2" 157 | } 158 | }, 159 | "npm-run-path": { 160 | "version": "2.0.2", 161 | "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz", 162 | "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=", 163 | "requires": { 164 | "path-key": "^2.0.0" 165 | } 166 | }, 167 | "object-assign": { 168 | "version": "4.1.1", 169 | "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", 170 | "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", 171 | "dev": true 172 | }, 173 | "p-finally": { 174 | "version": "1.0.0", 175 | "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz", 176 | "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=" 177 | }, 178 | "path-key": { 179 | "version": "2.0.1", 180 | "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz", 181 | "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=" 182 | }, 183 | "prop-types": { 184 | "version": "15.7.2", 185 | "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", 186 | "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", 187 | "dev": true, 188 | "requires": { 189 | "loose-envify": "^1.4.0", 190 | "object-assign": "^4.1.1", 191 | "react-is": "^16.8.1" 192 | } 193 | }, 194 | "pseudomap": { 195 | "version": "1.0.2", 196 | "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", 197 | "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=" 198 | }, 199 | "react": { 200 | "version": "16.8.6", 201 | "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz", 202 | "integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==", 203 | "dev": true, 204 | "requires": { 205 | "loose-envify": "^1.1.0", 206 | "object-assign": "^4.1.1", 207 | "prop-types": "^15.6.2", 208 | "scheduler": "^0.13.6" 209 | } 210 | }, 211 | "react-dom": { 212 | "version": "16.8.6", 213 | "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz", 214 | "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==", 215 | "dev": true, 216 | "requires": { 217 | "loose-envify": "^1.1.0", 218 | "object-assign": "^4.1.1", 219 | "prop-types": "^15.6.2", 220 | "scheduler": "^0.13.6" 221 | } 222 | }, 223 | "react-is": { 224 | "version": "16.8.6", 225 | "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", 226 | "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==", 227 | "dev": true 228 | }, 229 | "scheduler": { 230 | "version": "0.13.6", 231 | "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz", 232 | "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==", 233 | "dev": true, 234 | "requires": { 235 | "loose-envify": "^1.1.0", 236 | "object-assign": "^4.1.1" 237 | } 238 | }, 239 | "shebang-command": { 240 | "version": "1.2.0", 241 | "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", 242 | "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=", 243 | "requires": { 244 | "shebang-regex": "^1.0.0" 245 | } 246 | }, 247 | "shebang-regex": { 248 | "version": "1.0.0", 249 | "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz", 250 | "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=" 251 | }, 252 | "signal-exit": { 253 | "version": "3.0.2", 254 | "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", 255 | "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=" 256 | }, 257 | "string-width": { 258 | "version": "3.1.0", 259 | "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", 260 | "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==", 261 | "requires": { 262 | "emoji-regex": "^7.0.1", 263 | "is-fullwidth-code-point": "^2.0.0", 264 | "strip-ansi": "^5.1.0" 265 | } 266 | }, 267 | "strip-ansi": { 268 | "version": "5.2.0", 269 | "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", 270 | "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", 271 | "requires": { 272 | "ansi-regex": "^4.1.0" 273 | } 274 | }, 275 | "strip-eof": { 276 | "version": "1.0.0", 277 | "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", 278 | "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=" 279 | }, 280 | "supports-color": { 281 | "version": "5.5.0", 282 | "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", 283 | "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", 284 | "requires": { 285 | "has-flag": "^3.0.0" 286 | } 287 | }, 288 | "term-size": { 289 | "version": "1.2.0", 290 | "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz", 291 | "integrity": "sha1-RYuDiH8oj8Vtb/+/rSYuJmOO+mk=", 292 | "requires": { 293 | "execa": "^0.7.0" 294 | } 295 | }, 296 | "type-fest": { 297 | "version": "0.3.1", 298 | "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz", 299 | "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==" 300 | }, 301 | "which": { 302 | "version": "1.3.1", 303 | "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", 304 | "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", 305 | "requires": { 306 | "isexe": "^2.0.0" 307 | } 308 | }, 309 | "widest-line": { 310 | "version": "2.0.1", 311 | "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz", 312 | "integrity": "sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==", 313 | "requires": { 314 | "string-width": "^2.1.1" 315 | }, 316 | "dependencies": { 317 | "ansi-regex": { 318 | "version": "3.0.0", 319 | "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", 320 | "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=" 321 | }, 322 | "string-width": { 323 | "version": "2.1.1", 324 | "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", 325 | "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", 326 | "requires": { 327 | "is-fullwidth-code-point": "^2.0.0", 328 | "strip-ansi": "^4.0.0" 329 | } 330 | }, 331 | "strip-ansi": { 332 | "version": "4.0.0", 333 | "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", 334 | "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", 335 | "requires": { 336 | "ansi-regex": "^3.0.0" 337 | } 338 | } 339 | } 340 | }, 341 | "yallist": { 342 | "version": "2.1.2", 343 | "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", 344 | "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=" 345 | } 346 | } 347 | } 348 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jxnblk", 3 | "version": "1.4.1", 4 | "description": "SVG avatar for Jxnblk", 5 | "main": "index.js", 6 | "bin": { 7 | "jxnblk": "./cli.js" 8 | }, 9 | "scripts": { 10 | "512": "npx repng src/Avatar.js -f avatar-512.png -w 512 -h 512", 11 | "640": "npx repng src/Avatar.js -f avatar-640.png -w 640 -h 640", 12 | "768": "npx repng src/Avatar.js -f avatar-768.png -w 768 -h 768", 13 | "test": "./cli.js", 14 | "__prepare": "npm run 512 && npm run 640 && npm run 768", 15 | "svg": "node svg.js", 16 | "dev": "npx repng src/Avatar.js --dev" 17 | }, 18 | "repository": { 19 | "type": "git", 20 | "url": "https://github.com/jxnblk/avatar.git" 21 | }, 22 | "keywords": [ 23 | "avatar", 24 | "jxnblk" 25 | ], 26 | "author": "Brent Jackson", 27 | "license": "MIT", 28 | "bugs": { 29 | "url": "https://github.com/jxnblk/avatar/issues" 30 | }, 31 | "homepage": "https://github.com/jxnblk/avatar", 32 | "devDependencies": { 33 | "react": "^16.8.6", 34 | "react-dom": "^16.8.6" 35 | }, 36 | "dependencies": { 37 | "boxen": "^3.1.0", 38 | "chalk": "^2.4.2" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/Avatar.js: -------------------------------------------------------------------------------- 1 | const { createElement: h } = require('react') 2 | const path = require('./path') 3 | 4 | module.exports = ({ 5 | size = 768, 6 | pad = true, 7 | color = '#000', 8 | style, 9 | ...props 10 | }) => h('svg', { 11 | xmlns: 'http://www.w3.org/2000/svg', 12 | viewBox: pad ? '-24 -24 176 176' : '0 0 128 128', 13 | width: size, 14 | height: size, 15 | fill: color, 16 | ...props, 17 | style: { 18 | display: 'block', 19 | margin: 0, 20 | ...style, 21 | } 22 | }, 23 | h('path', { 24 | d: path 25 | }) 26 | ) 27 | -------------------------------------------------------------------------------- /src/path.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = ` 3 | M64 0 L64 4 L76 4 L74 6 L94 14 L92 16 4 | L104 20 L100 22 L106 28 L102 28 L106 56 5 | Q110 62 110 70 T105 84 6 | L96 108 7 | C92 116 76 128 64 128 8 | C52 128 36 116 32 108 9 | L23 84 10 | Q18 78 18 70 T22 56 11 | L22 22 L26 24 L34 12 L36 16z 12 | 13 | M72 40 14 | Q56 30 40 30 15 | Q32 34 30 48 16 | L30 48 17 | L28 74 18 | C28 81 37 102 38 104 19 | C46 118 62 121 64 121 20 | C66 121 82 118 90 104 21 | 22 | C91 102 100 81 100 74 23 | L99 52 24 | L94 40 25 | L92 42 26 | L84 38 27 | L84 42 28 | L74 36 29 | 30 | M44 62 31 | A5.5 5.5 0 0 0 44 73 32 | A5.5 5.5 0 0 0 44 62 33 | 34 | M84 62 35 | A5.5 5.5 0 0 0 84 73 36 | A5.5 5.5 0 0 0 84 62 37 | 38 | M57 88 H71 39 | A2 2 0 0 1 71 92 40 | H57 41 | A2 2 0 0 1 57 88 42 | 43 | M53 104 H75 44 | A2 2 0 0 1 75 108 45 | H53 46 | A2 2 0 0 1 53 104 47 | 48 | M33.3 60.4 49 | C34.6 57.8 37 55.9 39.7 55.2 50 | C43 54.4 46.8 55.3 50.4 58 51 | C51.3 58.6 52.5 58.4 53.2 57.5 52 | C53.8 56.6 53.6 55.4 52.7 54.7 53 | C46.8 50.5 41.8 50.5 38.7 51.3 54 | C34.8 52.3 31.5 54.9 29.7 58.6 55 | C29.2 59.6 29.6 60.8 30.6 61.3 56 | C30.9 61.4 31.2 61.5 31.5 61.5 57 | C32.2 61.5 32.9 61.1 33.3 60.4 58 | z 59 | 60 | M97.7 61.9 61 | C98.5 61.2 98.6 59.9 97.9 59.1 62 | C94.3 55 90.1 52.9 85.4 53 63 | C82 53 78.3 54.2 74.3 56.6 64 | C73.3 57.2 73 58.4 73.6 59.3 65 | C74.2 60.3 75.4 60.6 76.3 60 66 | C79.7 58 82.7 57 85.5 57 67 | C89 57 92.1 58.5 95 61.7 68 | C95.4 62.2 95.9 62.4 96.5 62.4 69 | C96.8 62.4 97.3 62.2 97.7 61.9 70 | z 71 | ` 72 | 73 | -------------------------------------------------------------------------------- /svg.js: -------------------------------------------------------------------------------- 1 | 2 | const fs = require('fs') 3 | const path = require('path') 4 | const { createElement } = require('react') 5 | const { renderToStaticMarkup } = require('react-dom/server') 6 | const Avatar = require('./src/Avatar') 7 | 8 | const svg = renderToStaticMarkup(createElement(Avatar)) 9 | const filename = path.join(__dirname, 'avatar.svg') 10 | 11 | fs.writeFileSync(filename, svg) 12 | 13 | --------------------------------------------------------------------------------