{"_id":"@githubprimer/octicons-react","_rev":"108-3b4e8efa5f2ffd9b9c6f47a80a25e72e","name":"@githubprimer/octicons-react","dist-tags":{"alpha":"8.4.0-alpha.1f4f276b","latest":"8.5.0","next":"9.0.0-rc.c8c7f64","canary":"0.0.0-a271831"},"versions":{"8.0.0":{"name":"@githubprimer/octicons-react","version":"8.0.0","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.0.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"11c72f75d9d0124bc801db71b786055651a2a448","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.0.0.tgz","fileCount":7,"integrity":"sha512-0dBJ8Pxe94g1RzULybp0zDWiFpZISAIaRY4LP8ZZnweJgyIoLGXy/6bGycJnPHfmk5sbhcuzzNDufLLDA2vxWA==","signatures":[{"sig":"MEUCIGQcDgR9+0Ohr516C7FO5c92ZwgIFv1vCYwk/Ej3LWPPAiEAk6b7zgovbOLEf4nxVdX4S6JXWvsdOQrB48bmRW7BLdY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbR+u4CRA9TVsSAnZWagAA4lYP/RUm3FspPHpShI4qyC94\nUGcSyB4aPu37zwYTVksi7WQW7X3/xHfoyTktnqbioyI3nF1etJ4I8alDUy5f\nNfIp+70nFdNcm9W3FsVMjLH+ym+pN6gKu6jAh0NFyjMES12ep6MvBdNCH+v5\n0s3bI+1NSGJ64X4N2/XN3pfAjg9919XKqX+qy8dRFZb8N6BHt8UF7TSbD7iN\n2nL669y/5K+f/6IYYLwnoCU8Z2T8yEyMW5AFV7FBtiNUW55Uw1jPqQcHScFt\nPdKgilrIrAnpFOwqdr0tK0gma2yNdK1GdeTig5tIA77gl755K4lPwIKvNLJJ\nnH814JD7wlmjacCghIWn1py/SSY8X+3ktJgAJ/ZXgpo6yfXTFG2nEvlw5uyg\n4WbvplG9f5ZZXQRkUL6g09ttRLp9CpWl6bSLhA9qkhwsVrycWeMINXHiNF/r\n2keymEDoCNRqpaog2CCAuNBduMHoFsvoTJIO25FDMrSqHCBPARalMaKheqcA\n0QcIDXmNIQi2svrr3/TfCoBOq5ocXO9hMQouaw8zTJg1cOjRUTaBqNWeqLVq\nFPpYRzBogB7tUoM+1QVbX73ODjM/LxMQW+EBd1FaOQIDZ6jXgyRT2hTxuP0L\ntreL1dA/Adib8hgnlNbtoR53l6nKmwAGADGAZu38Abtev2J295RVhFuqda6B\nF4zX\r\n=/4B+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","module":"dist/index.esm.js","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"script/build.js && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"emplums","email":"eplummer26@gmail.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.1.0","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.1.0","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.1","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.0.0_1531440056721_0.2729904616938643","host":"s3://npm-registry-packages"}},"8.1.0-alpha.654d9e0e":{"name":"@githubprimer/octicons-react","version":"8.1.0-alpha.654d9e0e","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.1.0-alpha.654d9e0e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"2899b9559cfe34718296addc6163f88fb814c759","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.1.0-alpha.654d9e0e.tgz","fileCount":11,"integrity":"sha512-5f74muDjCpx8HDVk54sfhhJjuUVj2wjbygJCua0BoH0SGKXrpGXghV0TX+GjxYcjs45QBJK8lOqQA+28pSewfA==","signatures":[{"sig":"MEYCIQCjPaPtJuh4018fU1R2z0zK2L5+LCRAf0IOrWeNdudQWAIhAIfkKwTU6f6fv6chGlh/nEqfYyksW2Z0wrTHVqF7DxZc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhbmGCRA9TVsSAnZWagAAm3EP/jK+lX+VhcLvqAXPY1FU\nYak63rsm1QmaaOmIGyNKrItXlLbJF96+Ul404QeFmPrIEcGS1O/PGtBpSEda\nWcHSQzLFTmSbsANI/v3mdo4MV4pT0wqhN2J8dmhWvmrLbIuAseuadmF/TqZN\nOmiHrPOzrDumucL6QFjyQUflrFuDYkewiVSqgnXJntLQAw7Eue7qiJVjYEQ7\nhFeZzjo48VsrdJz6NF57YE6J0XD9xKHUG+HENEjC4FH51xlizhySTAQBMi72\nVSFY4qPB6VhUXmBO73qVeSAhW9NR5QzTSuWrkuiOKdmmgy5qD+hxywSIn352\nmexMEnTQNuZeM69uminYe4pHfKAkzYPkBNWWea5ddkYlw3D6yzppoCVgVfPK\n7HX8vxfACeFcwtMZ8TjA4zgKzMoq9goXgwwmLO9yzcV1AFsAdCSeVRIKpLRY\nb73Ec9FqD3Q5nRXKepYNqXD3slbvceKyT+CwLIzaP0Mj4ll51tokRgUHpnc1\nSyrdsAjfmGfOSBZWWMzbMYIiYzf92AJvnUL9lk2W4wIzT72Ulj/KXD3Uirax\nPhgPwn4kOeBhlhIxIDwxuARC365p+3jdb6QfxpoxvCgdVeh1C/l0os0YBDYC\ncgIGs7cneUoy8yLbcGx9jGWEJnYWM5c78Ps5u7iAFVUj5ScLTrV0qKE2uIoP\nY3yN\r\n=Y95l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"5.6.0","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"8.11.4","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.1.0-alpha.654d9e0e_1535490437989_0.9267157818335472","host":"s3://npm-registry-packages"}},"8.1.0-alpha.f38b1615":{"name":"@githubprimer/octicons-react","version":"8.1.0-alpha.f38b1615","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.1.0-alpha.f38b1615","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"d4ef3d5e09fbd95e379fab95acd70f6a87601f24","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.1.0-alpha.f38b1615.tgz","fileCount":11,"integrity":"sha512-RTC2mJDZW/6wwVHXEwod1fCAiNHNOlIv3Fs4iW8zTkylwYrL6tut0FKFb5r6DfvOqyZir7dHfw+bnfxZr9yaNQ==","signatures":[{"sig":"MEUCICCPF3Ig9pr8dYjwF4yQiXp0WKRpIedf9fRW5kDATJ5uAiEA5MvulFM55Qce9CDN8jp71TyZYsIPPSJ0+TgKdvdlX6U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhbuPCRA9TVsSAnZWagAAFnMQAJYW284qUoe0DU3aZ8/J\ndv7CAO8xlnAF8k4unyoEGbHk9XeRBcaceljQrR0+XPdvwxJFm/B5UgFhSJET\nhz2caWdFo/H1ZjqDtvKlG+mQNOl2AtF3GDImWFZyRfMyULvoiaM9wAiREyZC\n1slsNFPJNLdakCCMpuNpvRjCljuSefaTfkJQRbOgYVWF7cedMs25Woqs7u1x\nhjCQr9RUfjCZQjqbCTTAm7Ay0wD/OVA6w91QXvgd2tamJ8d5OSOaSUbZHLCY\n/144tX4tOXrE29BLITID2kFEwYqNiZfEoyQclqTjVjT+lUNe84rzdQvqGOSw\nc4NmphYSjoC3cKI7TJU6PgUJVIYo5oLqTCIqllsqachve0maF0asx9GvRAHo\nbUn0itecnlls6J4YL4or+HkvhPHWWQgWWaN6NL8nVozngXedNM1dGiVvh0oz\nAqfxjZmk06sDaHhWPDdcH5DHPZy3iuY4tgeLojCBez1+LM98U+H9WhhyPkzN\nhlTqHQ0Cnx3Fh8DWh7TzYSQSrQ6WoZ7HEMUwn5xKwipvUWrzg9nstbyaQgZa\nm0Oy5lX/oW/bxDlWwg8/zA20wC1nZRrIIrZ48S8ybCXE3jV/TA3cD3voiq+S\ndbdNNok+yIcp5xbbNlreNtIG0EVyEgVc+Wb9108VAxYWsrFzy2FJTy5mpyqK\nWdbl\r\n=AUVM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"5.6.0","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"8.11.4","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.1.0-alpha.f38b1615_1535490958614_0.22222223833415988","host":"s3://npm-registry-packages"}},"8.1.0-alpha.0f7dcd39":{"name":"@githubprimer/octicons-react","version":"8.1.0-alpha.0f7dcd39","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.1.0-alpha.0f7dcd39","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"405fd6e4046f3447f83679987b9c31be0baab7c4","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.1.0-alpha.0f7dcd39.tgz","fileCount":11,"integrity":"sha512-F94cY5Banagh3Bm7FDC8H7UtxmYYjOCJqp5/TC2aShyzBxLCyaRbxEoFOO3K6VbDvVV35YD0CG9+hMFx0Ic2dg==","signatures":[{"sig":"MEQCID0ZOGDeeJkqEd/GAuH05PBzQTzbYG/9G4nYpTxyasOeAiBpJlYQ3CCakumSRfQVwAM+vSQiepVGIXgbfZVtFQNwTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhcWLCRA9TVsSAnZWagAAHyYQAKLrWHQZiQVUQjZZWQxd\nR0LWvMA+Y0YUByQejqZZiWkHlDeWXuBl1Sqn/P/haBil5n8u8jbKBQfywL8a\nCPvvEJwycrly+vZNOINg+k3qjMq4taiUm0CXFYSUEYhCJ+yUiW5EJwy0sjjF\nIuQLuBzZG0cGzxiK0PjiC0W8Uimfo/L2d8P0f+bPGZ4YgnhwpHAcf0tApr+7\nN/DV+D8wtflQDleiYYSEKh2YU3cPgnetCjGJKb0Q2N2LAYfCJ2njyNy/rD7t\nLe01gmh1DNbnDjK1xRo7OCRU7Bh0VP8hdzz5OpJGAZQNTnx2zf4RVj8ZU4zs\nvDnlGVFg+b+1hHy61TkNwYPd0GZm91/G8l+udIVU4/q8A1SOP7v0VYs7HcpE\nZq10CWH2uqWdVVrh+BSaIjEbt78OfSjx6BmbqwXpVEcoI447e+O9jZKh6iUn\nnLmicaosMJxSYlbM8nIRlt3s7bbkO1ZfWoXs1WflXgyJ4c7rIWjtHrGWZ67k\ngTrG1BtFazNYCj2VfQVy8WfhAsuwPb7WbQwnqUdvLayQXPzpKBOiSAg2b+gU\ndawq2DgYY5sDqfbmDdIbgjB0QBVOOSOvkU98NsfWpW9zCd+bOXv5HU8o70Gf\nPRs6eog/+N1wgx3ESPFVq/GZ2hFyIlPjn4JTorP/g0BnUMQCmjGrAVz/Gm+U\nDgJs\r\n=c0y8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"5.6.0","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"8.11.4","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.1.0-alpha.0f7dcd39_1535493514672_0.9643210276495453","host":"s3://npm-registry-packages"}},"8.1.0-alpha.389cfd40":{"name":"@githubprimer/octicons-react","version":"8.1.0-alpha.389cfd40","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.1.0-alpha.389cfd40","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"c8adb954753fb518353cacfd36b6625117b77e36","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.1.0-alpha.389cfd40.tgz","fileCount":11,"integrity":"sha512-g6d/xueKiPSbgL6B4gqQ6zIwdnbMGnCntmC/8GtP8meoDtADLY2W1ekQ2726LisTc+GpLgBikXU5g4MDauHmYg==","signatures":[{"sig":"MEUCIQDfGtcGZgDCe8J12sdykbNeD5gSRFnXpyD7k6IWhB8qqgIgbS92StPeZlDyL0sHP6nhuSdWy3G4w6mStDZKEgEvx1E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhcjJCRA9TVsSAnZWagAAOFMP/iXbYaAqG5ykxP/CgWvm\nbXFl4Zyt5XJxgVFAnMSMnUW0DFG/Tr9EhbgVBDow950hgKPBEFwhV5513klz\nQETVlfVB5VChzvEznmcaRSILIv/WgG1hWEByVCZGAdh2OUDtcVLg7dwZmSb7\noRkzmkiOva57Z60Srwg/1E1WTceg0LjcyINl8W8ctaYSGg867LUfIkvHPidw\njcYypygrPm3pCbk1gcIssx7bLu/Dgg+I8oI74vWbYJWpPqtr/b6LfAYANVLe\nI1qcGWp7pU0Ap21hisZ41KnzwD0Y+DGIt4TVwr/rUhs7uVj1bCZdpJ1J8IFm\neZgyRTQ2ldkTKUReVcoTJyQJ8CABz98aTY7d/rPfVF+EpDrqFxKqptc91yxm\nN7BeDPD3qNg4IFEf+TxLIm4xd9rQAtuUqlcwHluYkt6WBzZnYBRLJpms/oil\nXMqnB3hedK/Br2UK99AgeEv8NiXA4xwQyYmLYk+UQYA70o6UGjLx0fpPqosJ\nr3cf6SUJFCqrQOQ/oJeowHdzrkv3xraTINXrGvAnNEu5Lm2o+8PEpDp6jpsl\nqhnk2bIvPuJeuMhOr3wv8j9GR4UZwGC5C5x7iYkRDu8U7NX9GK4wqq4H9Xeo\nEOErzWXG+6Lor9MU+qEA/wmucVb+zok09/XyQWEM/MSh4av9HGp73H56hWFf\nMHnl\r\n=hA4b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"5.6.0","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"8.11.4","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.1.0-alpha.389cfd40_1535494345071_0.609362549004772","host":"s3://npm-registry-packages"}},"8.1.0-alpha.10b70995":{"name":"@githubprimer/octicons-react","version":"8.1.0-alpha.10b70995","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.1.0-alpha.10b70995","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"378b8e440a12fb2d59e4761329a1d8f342333a7d","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.1.0-alpha.10b70995.tgz","fileCount":11,"integrity":"sha512-9KZz8fy2MeHG0Mo5ENiVGWet4PgbCr85U0lB56DIs8RJVqhUqHBiQaqPqNFnW/Efy41X7lwHAeQFPLbbrWSMgQ==","signatures":[{"sig":"MEUCICzLtVflmzxafX6UMiKFHVOvekbKRWdHGlAHqUf+91qoAiEAhG+W93Qg8rUrqdzrSnhk3zqthw89uv9B5c2FefX9dQc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhcp0CRA9TVsSAnZWagAAsNoP/2zNT9MkmZZ7xf+aJYn7\nHP2PXdk1d6DKtTDCXokyNs0nuuHgxwfAdJ2/esIatr83rkMMahIrmIvHwv8B\nnlKszaP4v9WBx+0Em7a7Pvd+QN26btLVxLz7TCOaq2T9k138h7OJCo1C34JJ\n4C8vlAnY59+vfb+lzQnEpJP2srUl7BXCK7RnEuMcu7T9OUAxTERPLLxbQzdt\nGV6lAWg/OBnC4uwVY9wmWPvkrn76Er5HqH2H1X6NSYo/Xjp04GWCc9GkdEZ9\n5QHB5PcA+H1550bC98cIgitktDe4D6153v4Ga8EpKFlRU7dbli6EBw4dWDtX\n5SwUMGK+YSuNe3v/fNLnJuUJ7h+sZYeMY777dHoNOX4r2piaJi6zhGlbYVQx\nz2l96fofOsWIilmqQJNxUJ+Pfq7V3LeRwVirNlmkdzgbaqgimkELnEpZW1SU\nSTcNpZmzQVQOrPu60cjJGElvkIpumNgliUTNWfVgQ6IwAhIiWPId6/HN+i9M\nurlPYlrX9Vy4D9RT0+bBrreVyEfBOJ00LkbTNim6IMumXaFdO9qZ+831qQP1\njxcBz5GFgkoJG5HsQ0C/cqVThkdSuQ3lJRsVcRx/Si4oLSO1wHOM7z6QoEZ0\nBoB1vRcNIxm7tN+Dto2g16jGHm/PwKjXnyLO4uItO1zcapLx7D/sfQUX104+\nj2v/\r\n=i371\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@primer/octicons-react.svg)](https://www.npmjs.org/package/@primer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @primer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@primer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@primer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@primer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@primer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@primer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@primer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@primer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@primer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"5.6.0","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"8.11.4","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.1.0-alpha.10b70995_1535494771873_0.7468088586836477","host":"s3://npm-registry-packages"}},"8.2.0-alpha.fd92766c":{"name":"@githubprimer/octicons-react","version":"8.2.0-alpha.fd92766c","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.2.0-alpha.fd92766c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"bc657e2d65a51fb20e0a973613e6788fb9965a80","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.2.0-alpha.fd92766c.tgz","fileCount":11,"integrity":"sha512-W+SHMfvNAblpSi+4DWvCs9nns78xERBZuqmW2dAB12EDX8xp9POtVPWJnkNQ2SAeA8Wxvl+uxzPdhzJdFR6a0A==","signatures":[{"sig":"MEUCIEFlbvq+Po0TUbfOIimgWD+5277v6oxV5KHjOqTy4vSpAiEApGvEbTjB5eBs1gNu+0kdjN42KbQA3f4yTb/nn154CKM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbiDVUCRA9TVsSAnZWagAAG44P/2Hgyd5KEjUJ8YQljwqr\nd7ZDr/NFUZbE80XDcD1ldmf80VSHNJ1DjbtI6xgpe6GAL1hrprINOWmGFmVr\noW7FFjooSVtCVmKPRRKOPYEHLeuIGaUhA0SEcv8dM3XSAodCGhgYle6UNpuo\npnQJWaHLGsICPhJTsx72+C8RztpI4RdMJKh2zO4G/9zsuvcGrQEYYGse+mQl\nrb7xpgQXlOPEKfNPDk7ZMet6aEIYzLB3eJ/i/qVfwgtmzFbF1piKJs3869Tq\nXYnqPuc2Wog1X8IcPtHF0gTYn+qyU9NqosWqYmBAZFmIA7uXNjUNLUejCIYB\nqkqsgRQlMDsB9hxB7B0RRUnZKKHk5KH0Ct4ngomr7rkHG8ZUtbBtHzrekRJb\nPErBisoJk62ck3zQ9SKYOw1CuhJ7wk9+AKsoJ9eNhAjASWegsbxg1HG2w4ic\nGKUbNzDOzy/BN9cvngp/7gv38qdAsDXLcFtXxJS/s8TLV64Hyj4PthqN6vYL\nk1lEK/4BG03Ox3ItMxFI7W3wLd8N/L9JOf2mBjN1NrlKpx1noWM2PfrifgXQ\n7rGwgv5IAzDiOjtiVYDy+DVI5wl9TSWkeRjxmBeiau2U7JlYG+JdRdl71ifL\ng8IEVZTlyXJ6m9AtkpjOTYCRT1zCcJB0x5G3QbJGfM45z1wIgVmDgjOqAYtN\nA+FS\r\n=bjt2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"5.6.0","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"8.11.4","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.2.0-alpha.fd92766c_1535653203334_0.769699551268781","host":"s3://npm-registry-packages"}},"8.1.0":{"name":"@githubprimer/octicons-react","version":"8.1.0","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.1.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"731c40b6b231dcee731f0f2d37c67e7ee857bd6a","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.1.0.tgz","fileCount":11,"integrity":"sha512-BvUQWjXHTd6bFcibtFclmNrXd7FWnN3csvY7gZfPPr7plcHHPdgKoLNy1CwsCTVsNLL2jM4FkIvemBoFZeZn5w==","signatures":[{"sig":"MEQCIDclb7s75Rasy5VyA6Vv54SJvNYrmUAcGSZbTgjypdXzAiAgEglf4fQd+DmJJPPnrG6ooLPM8TWJJbVUY1cvxsftDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbiD6dCRA9TVsSAnZWagAAEE0P/jCvfnamyUIswJ32NwBG\nJUb1LbnImlGFkv3DVQDbaU3h01LI+HmJ9i/UvMEQs+I99pQma3EGXAiJa2Oc\n/n1PicfMJDTEMxbUMDiXwcF7q4M9ehCWzuhEJ9oTmtAsUc8i8JXYGwhZUTx1\nwwb1bcjigwyoiAKWRwv92dMjcst1/8M49M+/L8Bggy1kEkSSEkPV2Xc5M0qZ\nGD18cb8T5/+CsiqO14B2mM7/rJJ5qt9Yqjd1oCxJHbkiysPLJIRTHX4WPz48\nBZM2P4liG+SqKXOoiGAgx59PA9RKfJkZuo+k73UtqsSbqVdNRqGWlsLtv+Zo\njXV5c7B+/JCKYdJ+I54OzUOf81JvEStS8j61rRRrpncwhFYNUoGU+msHs2DD\nMc3pQdOvRzr7yT9rSuAvIM5NaK4UVwUV5S/Pj35XQGhP+ih2o3+20ZzBgJfb\nqnwcVsRKkxfXmdbjl6mewdH4lJE8fUiWtsm3ErlMfo1LrugE5HUe20Hdd9zR\nY5xALsiKGBNCYiLNmnXbtV7hDVfvDciLI4GjOJR3AtXpZ2DH1T/F9XZNTbi7\nUgaFPjIr4U6alrMXP2Sq06cY8/ZS/wI38g88VBuvWA7ofh6YDHAr6aDrucFE\nZJr1DCo1m+9pkMZIPO9cdDn9gmVxaPpMmZXPPWUdL12NzRA7xL51H1bC7qkW\n/t3h\r\n=9Hdd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"5.6.0","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"8.11.4","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.1.0_1535655580851_0.6492927347689963","host":"s3://npm-registry-packages"}},"8.2.0-alpha.b2d34911":{"name":"@githubprimer/octicons-react","version":"8.2.0-alpha.b2d34911","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.2.0-alpha.b2d34911","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"529ff6a1fb5adf7e1dfa9720e840c3276eb39744","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.2.0-alpha.b2d34911.tgz","fileCount":11,"integrity":"sha512-sAwf2u8IiNIYJcWiARBKq7AwlBcn0Lca3qic8YVQ6Th4MLqVwQWMrxpiIBX3inA649N/q+vNxyCy19uWEjKcwA==","signatures":[{"sig":"MEQCIBZkE6ER94joevbLApn7bxXV/xyrvTR0gpoeNAsUYVMcAiBzQksgz0QaQ0hPptKXWS043dIwmRQCKgsQgiydl4LJFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4yEWCRA9TVsSAnZWagAAmGUP/2a6mtkPX/3J+lJcuMtc\nld5jwAIkPQS/HQIsLVnwp8LUu6zZ3lr6Dyr3UoZ2OCOcO6ZLxvv3qMEVrtcd\n1WkxaP5Z3dq8B2sZ9+1JX8sNxntlMDm8vyGh6zU576eFDUMsAQzWAgXfrCSz\nfj6y4TrIVYPR1uzENyNuY4vMBdlsO+72MKDYNf1l2rBPPBIg+YYxIq0QKici\nINyxwXVkWGV3vG9hynPZJP4eoZ1JCZ0GH8FWVVmBq16Oye/+/ISw17pUhGt8\ng+o5V0g+zVKxFoA/M3YsMbijuOOFnz6L5WJO8LIPTw87vCK54a3zL0o1D4Hk\nqGzK3I1L5B4vyclpRMJNjFGnD6KkLFAUwPaeeHRGPInWhpEychBns8T9Vxyd\nIh/vc4G6MuIlGxqxsLM5yvzIXdSXoWP0WdSWVnrhKMk5llnhCjpNvsWDY9zF\nLxOOTLwvx57JJvdv+gCGf7O+cu+fgMye3t+M24i8pV/RgIj2xgVEAZDTSCe3\nbaC6hctW+X9AF3AvU54+9U6yp2jLOx0LvpsKSy0BnTdTnHVQ4MT2g1mdgf+1\nwTXky3CNNFrbqxP+Ptb6cRcBp2TgYrOwhrG7oi9N31vsE2D0VMAA2rrJAP1R\nXVzSPgbnA0L9wBtPH8lSA9XNu2i4EaX/AprrLltCYXqQTdsUqvlzGRP7ricr\npe8L\r\n=oy43\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.13.0","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.2.0-alpha.b2d34911_1541611797559_0.007070220187234577","host":"s3://npm-registry-packages"}},"8.2.0-alpha.4c94151d":{"name":"@githubprimer/octicons-react","version":"8.2.0-alpha.4c94151d","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.2.0-alpha.4c94151d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"b12d8da16481bfc9a8abb801ecf2ca579292a66d","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.2.0-alpha.4c94151d.tgz","fileCount":11,"integrity":"sha512-eb6VznpG86abm/3E8A8ZAyc92auNbfXFpdFit8j06gWHk+UMIyqlTOqnrleI3/rr/Rjc5+c2hrZVmlO2IPZFhg==","signatures":[{"sig":"MEUCIQDXhKXS5fEbBKczcn63FO89gXp3mi/q9SkT2tuyrmOCmAIgdHea/13HP1QxZR6ChqtML8zapUP8ApPD0Lj0q5jmMCk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5ID4CRA9TVsSAnZWagAAkdYP/2adYuKmmEuLmLmf2+OX\nHwO4J46BO1IyNa9A3qeeslk0Xg089rTu9p9xSy8bJUmB4YGRctQGjsEJiMIP\n1ox3JVUNuXXpiM3g3QK390WheDpx1EStUUMKHG4wXivkbvBLNwerv29IZEKH\npVmTLjVVs2AkswV6Hm7lcPgCRO2+YaMR4nrx7+3JGplTHMNue4T34V3P6JzG\nYbBchz1i4XqI9FdbdFwZnNnMWDqFD71jBTC0OUFMDW+1FgR1JKrjAoCnz6LG\nQXNd0TYPfsdtLhjCnIg/QZhVyDTFPgt8R0HHiPtLOnArInFM83ZfFU5A2Yqm\nFJMFwUwRAJrSrs1KNDIcZ3+HoWkvrnLQLlYRqdy9I37tAEy1Rgs1iIOABBtA\nCQp1VMtSC38cHGWHNa6fpup5lOeViMskj8aDecGKmJqVEBYpylq2+tEvYdT4\nL6nyFw+68EKpQVRNZbjeQVBwQ5Tyt75Rv4Q05eHWWbaESXRnloTQeAPzElyE\nUBsSaoUvBYat0dF2iDrlKC8yDvqqhdW4RZrEJWJ0L0f8+EbcM+fOAsBdJTLb\nkFWnwSo/jiX84MLgJi+Q+NTDCmqWmWtfLdzwBHvfRlsDjbmIwXx0F6D/Qokw\nRhsslqifRRyDlbdFGOb3z3Pp9TVQYTr6VwBKLulupwOXUBk0RtyOqkAJfmiF\nOScR\r\n=1oTj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.13.0","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.2.0-alpha.4c94151d_1541701879523_0.15267249117503856","host":"s3://npm-registry-packages"}},"8.2.0-alpha.922a9dc3":{"name":"@githubprimer/octicons-react","version":"8.2.0-alpha.922a9dc3","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.2.0-alpha.922a9dc3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"ada754bc146226eb1f635a696f82b47c8494193f","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.2.0-alpha.922a9dc3.tgz","fileCount":11,"integrity":"sha512-qHBq3VSzgW/63p4zhTmAn+9CoPvO6gD1c0Sz0e0aQzut3c+oz0PbZF+unGt1ZYKEPBxaaCn3RbmZTDCggxVQQg==","signatures":[{"sig":"MEQCICx72wM6lswelDeS3PElfpq8kw+vUyoyajid10zULG8uAiAa4RHmrhmiuDlw4ujmxVbYm/w04ed8xXh8072+MNS/EA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5IYoCRA9TVsSAnZWagAA6H0P/1CZUs2fRi8R9w8U18k1\naMWqTdIIzmwhVU5Rhgt3FpMRxGv2zFWG/5GNuxClOdvQGW4W+Aut9BLnyoZ6\nMv14C8n21YPPvYdDAB8KnDlFWHbPy7iybkWmMiUsEkbYoeEHmiZZ2KNHbKyN\nnT7SK9RbzTJyYlsfq2CWyfwbwcVrb6SaVL4zjvz9LXDX6MqjzPk+CB4+LDiU\n4qekGTjLks1hsJAd56N8TWv2iXPYHYpc73oRsnflE1I2XZ/W2jme/HMIn8G1\n3hRB3HNADbOJjEhD5hQkK7rTun5GmCu2VK3sAVDIGGnrZccn/NDxEE9x5TW3\nl3yD1injfrNBrfbY4Nk3S/xVXEDSwa61PSXXqdIdm4+sMIUrWIrRUDBgKT9o\nRiWLSAN9zBOE6OboNMFDqpfLZ6bhGj6sQjnMJ1zoyawPrzJToPv2zFPbsM/c\nMs0JwYKKzuvqPHRe/JjQKv+q7a6ZUs9cncIuf1NmoqGERDH/1fL4lnLdxKU4\nq3+ajSM4O/aj3+ppPsXRJTwyji9XmybKT0WePlS3Ig/3GzZGMa9OHZPuqGEu\nY1XFvN3Abmhs9Zt6/2C7oSdn1stJRGXMMcBtK3YpaRMMuYn+WNatoMYlEO7Y\nIPOZ4ZWIhak9NPiaEiUKNE1e64OuN9gQn+cxEcIZxdr1AxepY41FTAYYXsJW\nt1cr\r\n=nGn4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.13.0","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.2.0-alpha.922a9dc3_1541703207727_0.7563385827493039","host":"s3://npm-registry-packages"}},"8.2.0-alpha.54e3a20a":{"name":"@githubprimer/octicons-react","version":"8.2.0-alpha.54e3a20a","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.2.0-alpha.54e3a20a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"0e57107bfc8791698bdc9e30a5a1c60c87b43d38","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.2.0-alpha.54e3a20a.tgz","fileCount":11,"integrity":"sha512-nFI0T9ECTHZ+vpMbkaEcLYGo/sjSCaN8jLVVjkDtXS7XY04KrAJW7wR4wF0A0A79Uta+S1lOoyhWJBUe0pbXpQ==","signatures":[{"sig":"MEUCIQDM8tCq1JaCDK5HpAilBcp8tbyS3Rxz4wo96RsMGSlvaQIga9kZy1W4DJPLAuhVp3NQtFWs2cJApM6nUrnPnBfGN/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5Ke2CRA9TVsSAnZWagAAZuQP/RzM0DYJHGPW+ViBCf2F\nhGPm1RwoU1CluIROpnPam7HHeMRTPiUTz13VuXobfuK9kgKJi4PqBeKKxADN\nKh1tNRdvDsxR4DhYR2hQp9ck7EboZhHW74WLKFltV4BASOnmsFus+eWV2cjg\npdbqoZvfGlOGdIrJNt9j2c3tYZX2+44BWWPpnNuygxhuS2wmerw+FFMsMk7w\nH9PJ1zpXV4WPdI8fdinhAk7I123RW7p54Azp5dj4EHyffrABvvJHSI/+uEea\nb59OQIO53/783NcyjRrb3UonN/4rpLRkkzocthmmNCZ6KtP/3hdzO1rgzsRf\nAy/9n19sp36YwSyC2hEHIpeZ6GhHjVYaN/6BKiZNw3C6SRrbYa1tlb3SWnUn\nwgX24PGYLjKG+nyOFILQZcq8x3YWKGYM+gnWMnutsxjKz+WoQqRAN53NM8EB\nIPVnIgIPawrVFvqU6i5/OCIonsFB2Mj2BWlCrCSx11YGXpFs4zKhL5N4qcgA\nTcUjdHbA9j0SVkRvpte02KI5CRUHXRofxIiiAtTjF1KZXeseHUVYcsSQL6AH\nw3m3cAOKVsqohTkRY6Jhet/c1un9291k+l70cP33rlaT7xKFf0QpXOYQcC4I\nMruHwgwtVEWoeChk1KWnZnjpOFLoN6gU7zegCks4yQNxgtmPHhjCHphZa3wv\n3qqg\r\n=GBMR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.13.0","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.2.0-alpha.54e3a20a_1541711797053_0.45266374383488994","host":"s3://npm-registry-packages"}},"8.1.1":{"name":"@githubprimer/octicons-react","version":"8.1.1","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.1.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"63f880d491869f7395854778e2da2465ee866798","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.1.1.tgz","fileCount":11,"integrity":"sha512-2Zt+wx3lVuo3fmJMU48RrvcGyLG9XmZsi8NUKcmk+klVLGJFTpvS5y19UrwSFtbvRm2qw9cMr080Oya4WogGTQ==","signatures":[{"sig":"MEQCIDC+BMwUF85qRuKLEROcO1isXcrM9kr3V/7PPnezQgArAiBvRIF3vPsAbLI+3ahmZlZD5yA8s2+cEeAB3c3w7YOmpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5bmICRA9TVsSAnZWagAAfn8P/RjhhvYlRHQuUi2Cs4fn\nQsge62kHib0ahuaGTrvxevNXArn0eqpNokQzgGPhxArDeZ242ktXoI6ihhsf\nqDvH7gLWdWtnRWi5cQli6s9bxo9/mEFeyW8Pl4K2xVr7MJGk/U9vg3zSzRbB\nRdWxRhxmcrg5PtdW+tIfzh0kGsv7teibOIkaU4c7UL1S4Q8wIMeyLzTfCOm1\nvNFoxvuw2VdyzGGSHNDWqWqO4H9L2vq1X4wcLxZg3g//qXO00TAUHFlq1vpY\nsPdl/dn4TmLlTJJhFHFIX3Ownv6iCB5Vsf2GWCNcbgbeX4cJA8A88ifEq3cZ\nVnxXhtDNRc/GnD5Db5LyFSJ5/eAtSzUOS4HCHcvr+TJuFAGYZW+V3Q1xHaPB\nDODUHr8ZRXkRiGQ9mF2w2gQUKbMwSbgdlQT3KFmbwrMU1W04pL+Vn1pEGZvL\niM2fSgHMW1z827dKBSiZuh6EsYW1tv+LPd67HrQW8wXQBoRMLp+inP4m+zCz\nf4Tv/nAzz+FBolFoQHb9BGRODZ3YraaiGoGwY5tdkRUyVB5ADRPkpDnrILun\nYEIzZzFm7kI2gDYue0ErBo7JX7wu0zgqPmTAAjSgdWyVW2z18M2q/c8kXGD6\nmM4gk+NkJ49isg2bzBGtBL3FiVDzvoC9XgPNJb9TWSdcA8XpmiHQTxHT5+zQ\nwymx\r\n=IdvH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.13.0","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.1.1_1541781895818_0.37804912839704374","host":"s3://npm-registry-packages"}},"8.2.0-alpha.e533a200":{"name":"@githubprimer/octicons-react","version":"8.2.0-alpha.e533a200","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.2.0-alpha.e533a200","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"04fed2473f547c7f5324a29d0f8b377bad81ffc8","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.2.0-alpha.e533a200.tgz","fileCount":11,"integrity":"sha512-8O3Jkyh4AqETB6iOeR+LEL8IqX+n64Zth+9GBa/CTnyD0/MViBKB/iViLTsujDc7GiAE6zHEwBn1YfL63onA4w==","signatures":[{"sig":"MEQCIGONuqDbBCTGppW5eMyo/UbgE/INw5DgKvy/eNUR5H3aAiAn2qvpO1u39MKpzydkjvCc7YrODZ4mK1hT4FWDnK+sBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5cwbCRA9TVsSAnZWagAAQ94QAI3m+fCBeu2xdjLzpz+S\nfdE3/HXKQau3LbG7TQpt56+2L3wH00bc2YbBEx6vs6GPL9tc6rK4p3c7vRao\n9z+cVkLZq2xBsW85JTLCvM6Vfzac1gTy1HPdy9uoDihEgEkW2N69Vu/nOBEa\nx47dBRKDyu796NrEpwhdHOGjnoS53xAIcSgBAYqILUjy1e097lnd8xQSnPeP\n7qhCvcHzG1xYh3yHKYE32c2Wi7niMYOW3rlmCebMCFEqD6VKR+DLZIxRAM17\ntJMLntouIZ4Pmxl6bHyPEImlY3cZxhHQ/qfs8yCw2Urv6UVSqaufo255g3ZL\nU2+sWG5jbEoCqx2pwYnPSaxmc7a4tLN290JUR1Xae96hy2Kro5UDUKRJ1JKQ\nnCEVt8uxUXscap7H3DuYUt/07X1Zw0x4QwZW4D1+ddotpKLfIzYDLuwnqqwC\nan4hPuuQ0DX0K/N4opbirTb+cNF6EYyDTu0umrVdoqkckhkfL31gaTQ4blEU\nOR+z0nANJEVDEPXBYTgdBkRoPRcxJGTvn4Bh458OFwVZV4TBTX452Fzz/fZ9\ngcwg2YUbl/0bKqhi4V0fjHngBhv/qMKuU41e7dtjD1vFTdC363ws38IeXGJC\nV5TGnoKd0a9O8Yd23SGJyHfOLeSEaMryZ9QDCyOT4QxsVe8GybvhHo+fVgEa\nuxi+\r\n=UgI7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.13.0","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"8.2.0-alpha.e533a200","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.2.0-alpha.e533a200_1541786650946_0.19953986169401183","host":"s3://npm-registry-packages"}},"8.1.2":{"name":"@githubprimer/octicons-react","version":"8.1.2","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.1.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"201ba2fb69c8ccc9b8b1c9ef67df68a2ab43bbcc","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.1.2.tgz","fileCount":11,"integrity":"sha512-HMggynDdrNxlIm4B8V8e883+3Fwe1wXvvN+X57/ZDpkRv92bhsoK+4s3grbEpTtpzbYlAD/0X40IpUkZlZH4EQ==","signatures":[{"sig":"MEUCIBm5V5pBoi3mjjj6DvJw5LHyb8ugQGFGikjydmIJsPQlAiEA0INd1VynYWV6ZF7ijBVEaGZyRQuaHx2oskCpiNfzwQE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5c7VCRA9TVsSAnZWagAA5xIQAJw3+71oc1c3UrnwYfgi\nDjE2lYClRkxUA3BAgpOCqRvkbkQyf7aM5E7KG4ufYdQ5JEHUr+o8qw+rW04m\nMUvXT+9yiedt8cfmnyloxhf/UO7y+blAisjTzp/D9X5XsbWnERSzHz028zlw\nPey30zDdfKuLfjlYGadqBMm+/L3Ikl+5EU60GXnTYSrVqNhAig9LhzXuN10r\n96T3GqWzx9i5lj03euFl2WIE5lNI0ulKMZEuad7utGvg+RwCpD4Fx8uSPgGz\nx79WP4okqhSEKe8GL6aoECDAPIXKYEYflggoKpl0DM03jU4Ph5lCxS+gUerB\nupCyPuwl6E4/qzibqasKoEIUE/f71M6LESWCfDSHkVipS1EYkD2JSN80A5gF\nTIdAHEBtS0vIKqi5o7yKusOAkZmYEM1wtw/8tH1xNzRDu+AMl5on8yEASL1l\nOZCW+ZWZmmBqeoGYDgwRXQ02ocEPKv3AbDNsK/cJgDnHhqY965c3sL3I5g7V\n/lz05Pj2eqqK5ZwUQENn80WaXAfetEJR6n4PZViuMFyp7aMuOXRZMROVshPw\nYue9zUisKmbCSyt2/qbYGgWL5BE2+EO75E2GHoHaWpiQFKrwuNg/ez7krxpW\nZUAyXCf4cW+RqIRJoM1Wox6nPuApjrm1oayzJ/k+KCQXDUeDiRAof6jRoU83\n0dGE\r\n=IQXS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.13.0","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"8.1.2","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.1.2_1541787348351_0.8500943247917756","host":"s3://npm-registry-packages"}},"8.2.0-alpha.84b7d794":{"name":"@githubprimer/octicons-react","version":"8.2.0-alpha.84b7d794","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.2.0-alpha.84b7d794","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"8527fa9d015e630302f3d5c114a469f30c788e68","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.2.0-alpha.84b7d794.tgz","fileCount":11,"integrity":"sha512-K9egbN9VhaZpErNHa5h7S8r2qGgoHQ//PbcDE1fHJ968Vm+7kQJlw50oBNa7cc0jlM9IwDDyBFOGD4Xsk0nVzw==","signatures":[{"sig":"MEYCIQC+FbkbjJW7+ZMTP1K3nb/VwtTaJYCidYqQ+fSJIzi2XgIhAI03DuCpScDlE8pGxFrv25vYdy2ZMYUnuQFaBIWUES+2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7gzQCRA9TVsSAnZWagAAD10P/Rf1oeYjB/dsej2zVDqK\nzJCudXfBmAZ2OAsNpJXBTCOpKUEW0KSmdC91QTVlJhwuJR4DpXfIqPHg//6o\n8h+6rC+jeZniE5d9fsKrkElmL9XAaGrNcjkma+rVDWeWO3cK9G5E3jJd5qgQ\nBvS358oAn3lLDPcW/CKk1DCB+e/KyYZo38bocsgYtxFv/OJe/6vV8jbFK9RD\nOOe6FKuYMdfcTqejumBu5ZlSAvRUa9r7X344x8+XC5d6OhY8q+d3kf0DkMNO\nGsMmGBX9VlQpgr/MTbeOnUizlhiOCoZ6ACkhS5DeLWLwFQ16tDRPQvXMkzjx\nIdao/LwgPLag4d8ZeWTWhzhuJ2XUWfhOjIvDsmOKDkahcZxjNzySIl/XbOAA\nwBQ7AhvWAXGQ8ZC5c//vuGY0Rq8MkjlVQmfbvNtBgREB2xLN955dvP2ai0yo\nCOHt8lcitZDPyjSpcE0iogQ2dGwX2CA7119IMvLV2XHASUxm5WsAK+gCe/rs\naSYUu2dA+ZaRkGJUOd7P9+gy5TZwZPKi28VaVpoV+D2CkMiIvOmrSNiJDvac\n1dNQXyXPDwKhtBhtwvl4PycVkrohyjqe/DwtF6ZU6mMdPir8bLtfNPqKsc3J\nhPnyaacnov70oITnCMG9DftH+eEoun5MCmrLZ4uDaVI6sqgdchxjBBN6S5ka\nkMYQ\r\n=IFy9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.13.0","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"8.2.0-alpha.84b7d794","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.2.0-alpha.84b7d794_1542327504093_0.5888550591025601","host":"s3://npm-registry-packages"}},"8.2.0-alpha.02477e4a":{"name":"@githubprimer/octicons-react","version":"8.2.0-alpha.02477e4a","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.2.0-alpha.02477e4a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"e373aaaae371bbdd7b88784b95b30fa0e5a668a3","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.2.0-alpha.02477e4a.tgz","fileCount":11,"integrity":"sha512-DNZkMjzDIrP/EP0x1gu9B14Q2QiXIAWxT6NZs1AaOaK2lq1KFF5O/fWsw4Mt8CAkaMgBtvAX7aK0N4uPypqVqg==","signatures":[{"sig":"MEUCIAZOcExzVwYggm+sztG27p4eaHRFhK58Ljg+tXRWi/0XAiEAuFpQIs0ELgniwlesm+aoKjLiIGVYIJ2HRhW/jm7MX0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7h3ECRA9TVsSAnZWagAA+soP/j1lH10B8H7YrJqvAUFK\nRXiSlyUjg+IQtIo8zC3Kr/UN9MfcqvdTLJibaYbHX2cwtnsQYYJyQAhczHQ3\nBI1DO68eZZWm8oApzE9RJ0edqAJ7lH2i0Q2XpFxAmPKqPhTPbq4zZ5DfyPFN\neIQcnKi3MZdTdyg5I1YkbWNKOxCgx+GrL3h8NFCrN1yn62o1JZudB+fKlzbG\noXyMTTveJeiUuxgDsQdedCAJjqYF4yg8/4tUiW3rM4esNNZ05CDgWD7KIQth\ngi+4EQtgFPmt+cuzJFIVdMo9F5Zj9ZRl2yrRK6lU+2lbYlwrIY2iajQHidYX\nBd0ZVkR8Fp8qusexj3pBhzWPMX1f03nLeih9yFrlkf2MwY1Y8tigJYAdL0EW\nxrkd+V0Qeg06GNjhQjSavLMXIZ0B2g+nzLv1n72qQK5+3VDsOyDBO/VZ2wT/\nacIP7SDmuUzCeHlhSFTavnm22tSeG7Nmy5hfxdSrNyophQlNrW7wwMwwvIOw\nLVKHUAmyMXtO1dmn6W/fdUSsVqvK1lpZByi5zqX+aPGLLXEJisGasJ7vBoJh\nczGaD78azq+rTs0aGJz/qVBnf1O+wWQofL0ni+t4EzeKgdBoc6hGgLClo9M1\nORl5zw5RCE/STQU/BBECeGmj1Uk054clUbex8aTsH4tAGtD7R/TuaYqc0KkR\n5jQG\r\n=oPCf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.13.0","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"8.2.0-alpha.02477e4a","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.2.0-alpha.02477e4a_1542331844313_0.24884778777804284","host":"s3://npm-registry-packages"}},"8.2.0-alpha.2edf502d":{"name":"@githubprimer/octicons-react","version":"8.2.0-alpha.2edf502d","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.2.0-alpha.2edf502d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"b3af24f35166ae03b3bbb5b3a259038e5da87bb9","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.2.0-alpha.2edf502d.tgz","fileCount":11,"integrity":"sha512-aPy2oYkz7H6k8slDx+G0aYWmS3waB6SHxcirFyfhK34Fm+FOgSVneIPSzsNprYGg7ZEFgn7eYvY3iA3ETbVlng==","signatures":[{"sig":"MEUCIDJ2FH8ao+S/pKLZkduUPxXWrZeWEkzVGhtLW7fSTL+uAiEA5ZaQvCywzHDoJPikfKbZSmwH7bSqZ1wa0RWUJjMqEFw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7yqOCRA9TVsSAnZWagAAhPcP/iTjUYM/ly4p7Q766FvH\nhNFxO/IM0UfqXiIvE1OqqXv1YpmCDZYbaiYrGso96PVx1lvOXJ0LB6ndiZTk\n6YZRGUkXuc73GYBbMEG3L8Pa4BegHNyDVmqmTKU1nQwk86F3V7JhMYZp9jBb\n7tqWXt0Ewp24FH7AT/TkYuGvEsj9uOmpBxdispWrIRQQqdqDZIsplzeMR/oy\nrYHi4l7j45WdCjq47TqjOVcr1ZP18vJeEDsibEgkhqCnkRp/pSAFf79phQup\nPC8J442X4CVPCsVmliJQOiHGL20bMXZjR1ataIcjPusiplBxn88Jc4pohAqq\nBNwpfgnjREqHQMS2eCdLm+HX3ei7rdfqwdPR4H1tbJYxOvCMjyN1yd7+3RFt\nisNoKjJDdRsXw2ZIe4MOfNfUDxTye8Wlks0GS/A4osii/AVT4RWZE46Ai4S7\nnKBHzyMxbA2FJFt+l8FbjfcbtUnA/x1xj80CHrhp3bJi2qVhEvnIIpM8s/2F\n6yTVpi/USRWULPvvJsj35oP4J+iBfnNn1vzKWSGnR/wunoLVfEa/X7+WrVNA\nevw20IuECSLc6HUABZRnaKOUniZBsExW4tHhr4M+jdXNMQ5VtU9xE7ug5d+l\nrgJd4Kvd1W5LuNEWu7SBJGok1xTYHGwm1X4jRu8fBeOang1kcke9QhkUkW4l\n82D5\r\n=HYNt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.13.0","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"8.2.0-alpha.2edf502d","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.2.0-alpha.2edf502d_1542400653710_0.28111543349680423","host":"s3://npm-registry-packages"}},"8.1.3":{"name":"@githubprimer/octicons-react","version":"8.1.3","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.1.3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"05d5f3caafb1a4f60636b3912c40263121173f0c","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.1.3.tgz","fileCount":11,"integrity":"sha512-RjI40DiybnKKurDRp/eTZsi/I2qZ4lM1Cta0HsC/ZDOqdjEGA/7oPpH4/2bMMQ17q03RJUlYwLzFF+LC36XFZg==","signatures":[{"sig":"MEUCIBN6V+aGdFYzzVnbhaFGGL8t5tSfwz/UCSdSLkBEdBB1AiEA4FSycG6A68olyr9MJIgfMXIvCOTRQ38cLh8+kkPA3T8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7zwhCRA9TVsSAnZWagAAoxkP/0M4n+DL823s97kCCmvf\naEoDOTNxylmfMKLjQrMOch5WIh00ctrfKqwgxhaZuuBr55zx40BgO/ZcCVvU\nKPw0BMNmX3i9RjXYpE6Qz3F9ZyzvsWJJWvV3ZHHTNXyQL6MvszefiTEs4c13\nkV6jVUj1xWVP7rVZCoBoFupj5Xb3yYfTH02F8V1mcSUCfED6Vyx7ak+7HM2l\nRCXe5/tMzcI9RpP8vTeETGDDj851cSYHXBu/CdRTJmYonjhsWqCGWQKm9WeK\nrgRw5eK/9KOJmhTBVuxsHMQmS/iVA7FEjg8xny/Vb/xeDIrvbWvgg2dcFoGf\n4g+/8lIqJ/BJt34NmEkg22qjZARaNUiEqp/biOnPaZu9IT8sJtIv/EqEQotC\n8qPwBDY3QaIBxAlcCa4Kvnu3D5xTVsnOAHslZWNNvDIZVF2ITD2OGNHEe98l\nJUWKe98adgMZIdEf9l7TmM2zrOke6/naYdkaSirRN9aose3N3vFCurHuXj9J\nCdKYzeDobyE3aE/b/LWLt2ciYJ6JyfEmJbPnxK37UFlelAEDK2Zki5wlVW7k\nee0mADyksV1DRjiI/+e7WCrdG9bU1KakjzT4o80uH5iHtreVyEhM8YNhrB7K\ncel/2T73kBNZyW9VvBrMaaqAjwKn7vjl4EZ/B+JDboNmFOrql1BK+2Ncq5Dl\nNkGf\r\n=1VrY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.13.0","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"8.1.3","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.1.3_1542405152227_0.517248036343172","host":"s3://npm-registry-packages"}},"8.2.0-alpha.c4b0d3f9":{"name":"@githubprimer/octicons-react","version":"8.2.0-alpha.c4b0d3f9","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.2.0-alpha.c4b0d3f9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"c170930725bc1d7eeb16b93a7c48fa9dfad99342","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.2.0-alpha.c4b0d3f9.tgz","fileCount":11,"integrity":"sha512-XKidZs2HuK/8H+UQwBtq+Uo2NWbf6uVpxA09j81cE+6y4PDGyxlXq7NiJzqMMn9a/b2Lu6gRNEOssfNgzl3YOA==","signatures":[{"sig":"MEQCICGK/eppcQlB+CweW7zplZDyIZWLt/BByig3kK3BhjBcAiBVIF5jTXbSrmIyznRshwHYmMM9K63c1U2ub+jk314uTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":196377,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBsc3CRA9TVsSAnZWagAA03oP/jFIZDjGE2fxlZWl9C7u\nPtBPk7xDwW3ggow9tEuTBox+5Rl1CIYDyfRPnh+57AT2SXia9K7u7/Ksqxse\nXq5o+ZqAoEJ96EHYOYpTKuJeg2n68rq/oY+HQI2kKG0goB+bcpxcsr5eNmhb\nUrUdgfcuumbDDwF493G2RPNYvk0r+efu79DDQx8VWaCTCNqKpyCRRFYeJ5+w\nhggSEGvEDnRA1Og5pAN2J4vxioIrC7eilVRyh5z/n39751TBC0qv8eE08nXe\nEF5VobKXt6avcScneyzl+OnTS45KRD1WVTT/xsfsV1/1rCTtbjZ51ujqXsmD\n3gCkVHHG2pE3dUQWKAeyQdBkpsWcJIyz/mvCeaw9o4RepwtxLqFjXneHHjUi\nUkl7CumiyHMbxOrZXCo88j4WsgQwDTt2Pt0UdMLoGbyPCNh1AkrW5DPoJxEp\nCRH3ACdA1s/so9fhutnkfcwEOdYgOG8E4m1qmQUUh+Y0qSJgBnntLgT39ql4\nEZSsWVg2L0KV7M6/XI9QU8iVpPslWS78Wib3qaSEsXOy/CD2GcL5gb9gDZVI\nRfqsrnvfdJINV6DBcVdqtMuqeVh1rN6RPn1PCuge7EXQfOEYCSvD4Tza/nDe\nAHKcRrRqK5xQS3JYiOVmdPKYP4giPqOht1TsbLbzuxpOsTczjFo9WuDP15Vb\nq7Ce\r\n=naeq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.14.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"8.2.0-alpha.c4b0d3f9","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.2.0-alpha.c4b0d3f9_1543948087018_0.9279572124090352","host":"s3://npm-registry-packages"}},"8.3.0-alpha.1279dfdb":{"name":"@githubprimer/octicons-react","version":"8.3.0-alpha.1279dfdb","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.3.0-alpha.1279dfdb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"3bf5f78664e2ccac338385c0af7c4dce1dfa986e","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.3.0-alpha.1279dfdb.tgz","fileCount":11,"integrity":"sha512-/tafKDSj3lAcViuVKD80xIcbw5bAK/fNrDg8J6EpD4R+zVRJ8HcyOPD/1QQuyT7EzIItNV91oAuSrXjajvyE5Q==","signatures":[{"sig":"MEUCIQDDVdK7WzCSzLfijnPtjf6L0Z7vRwzKEW5hr1qauCCMjgIgNzL81J7+Jx4LwsNVhYEF/JfgwvUkQodPv4MHBtS544U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":196377,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBtVdCRA9TVsSAnZWagAAersP/R1iq3KghjDl4bua7NGh\nzWm02+ydZPlAR5JEHv3DdW+XJJzdqf/zJNC4FKZ9FUA1UPQPyYu1FuKTqZkv\nk8/7zxqO+pG/9wFVHMHwi50HkhpTkEa09qO8c76Np7xpuFf9LzF3mXQIv17E\njFNvGb9Zp4DTYm8y00V4bgKqr3jnmobxVVbKcSaj2Yg/VgWjEQp/hablGEJy\n6bs0EhJvnwoE8K9uQGvUQadfCJQJpVXpJXH3KdHMbFO0ar9krsMxwLwtVjiy\nmUw/3djPH0nentryu4kSaqGRHcC67uc89mdp3626Csw797C4p7KbMfWtZf9l\nDaJYeBF4ibtxmLkDoQAchvSZPQCgkZryIJJuqWX2Pckwn6mIe5N0tdu0HQC5\nt75paQ3J8YyFzPseIJvvTJDNnYKdLO4MQ8wXHk+GLF5OiK4JDf3ceFTCIASQ\niEk8S8aa+E5ZXTjQXI7wkzLjgT/Q4TyUhmEXSBsoRRY08bZTA0wVdnpzq8ED\nQisdJsA0jXjL9rC5fTJNpGw7Tn8kidQdY7fZ30xMypJ9H5q/twr7cXzZDyj8\njLZgJ2zJdBFJMxyae5VgCa5KCaZ0G930JzIKgj3XN2tEb9ZdARh485jMFu5J\nTzrOiTPl3U1E5s788pfvgPf3KhNvEMd3jap960I+6Gtdyr6bErS2PdIGOMK1\nGCH6\r\n=fFcC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.14.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"8.3.0-alpha.1279dfdb","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.3.0-alpha.1279dfdb_1543951708578_0.4882423504834912","host":"s3://npm-registry-packages"}},"8.3.0-alpha.d5b1062c":{"name":"@githubprimer/octicons-react","version":"8.3.0-alpha.d5b1062c","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.3.0-alpha.d5b1062c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"bf68e6307e62a71d4619e70ebbecb5faae3aebe8","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.3.0-alpha.d5b1062c.tgz","fileCount":11,"integrity":"sha512-ZKLm127fr/i/iwn8bYBZYPJ7znR8pFgGIa3jnspJ2LcDrGd5O/TA6Wvgy2+NxemrY6P6EqQG+OBTxRtiTy0Qvw==","signatures":[{"sig":"MEUCIQCB72Ts0Nasz6bWkFZGctrPmtrCPnoQFGN3jzDd/ySZzAIgZ2+jr4ZfktHx2dm7ReT/LVkAswtFsfQq/gQQcva0KLE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":196377,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBucvCRA9TVsSAnZWagAAZ20P/0ep2KY8dp/1YbSNTnrg\naVjMhDMw0ZIiUhALFCvr8LAYIRPcV20CpZtakVHOBLwuE9cCT3EYshACDFV5\nsfDUsuuDojubsDv9U5zhsd1o2m8oEb13UxLan3Mz8nvhD0+T6/Sj6+fMiMlr\n7oTMDy/h/w8FpGoYHkcggnjyarTeIqbCGfuCuvPCrxK5AxC3VeQIugqOyIiR\nFZaSrETccryF3oVGcufr5am4b044cdMPbIytXywvWV4V0vLQaRCs4WOSX+zr\nGBHYw5lknyU7epLZFF/E6j2xtZKfM0mwfWJ6ZFXrQrU3DnEMqIF+Eed4p6t5\n3+/9aGtGCixy6d1vOAJWseLTCO9f97wMYYSXLktU2jnju6D8k8glVObQFqDI\nSbx7IwfW9Gd66NnuJvvWUfLtOnhXFNHo3jEm07qp/8dZb8T3Pi8jPZacpMIu\nqI1lRcLpaQdC9OPlBc9cfNAEQ/8TLge/cmYTPKVAc9LHzx9ep9RSOzO2RMj8\n2ilWvLPoyLEfw0T77VBSl3a2v1y7yNOnf1bX7poTrssbF+ry/EnZysC2dcsw\nCi+G+T+Ea+c5EiCOfsRtwJDFkcktR3e5ghO7iyoka6LHNPvRvJZAw4Io95JX\nMp6CBdY8o+/k6DK+jKEeLMy2z3hD7bip1CMAwkpXvl39GEZgXfP0Dn3LBMoB\n0Y5/\r\n=tmsd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.14.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"8.3.0-alpha.d5b1062c","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.3.0-alpha.d5b1062c_1543956270428_0.5500262115887669","host":"s3://npm-registry-packages"}},"8.2.0":{"name":"@githubprimer/octicons-react","version":"8.2.0","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.2.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"a95bbd4c409fbf975c94e2ece4881860001f134f","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.2.0.tgz","fileCount":11,"integrity":"sha512-WUb8Fd93j7RvAS5GOFJafPVDYxHon+g/OZTF0vAGFbYifrb11ejeBB79hm8Xi+E33OPPGCA3ZpqhPJU+5gvczw==","signatures":[{"sig":"MEQCICYKPQhgwx/iFbPDCR6mZurgt+E3RnvI9PC7EsJQXmibAiBnhaLvsRcT0eppPAeeD8efDFB0w9QUSLX0K3RLV1NAXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":196347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBuzoCRA9TVsSAnZWagAAObwQAJATbfzxgjFn1GervYBw\ndsLmmS2zSOKdpfhIGNq0WTX4FqeY/aKsyD16zRCTsg9lavSolc4b9HJLlLQd\nsRkn22LpwHXC2Q0D1IGpPS61Mk4xrXXZHEexlRMnN5ldUfw9rNTMXNfs9YtG\nFeA/2jM0O4x1DvUtjbQbiIHMBfPi0ohhw8R4TjjwXdvXRBRhVxoHfRQAS1/T\nNwrzs/CAzmNxLdQgHpEYcO9ANGENKGR6vzCkD4xJn0/Lc61nfElLg2QKY1cY\n44VFO4TlWQWqzl4D9AuERhCQr+GAGQ8IBQz2EgJN9Kzo4MPWih4MWq4TU8VR\nR/7/FJ7HwpxbYilX654JRe2zlsjKNaDN3wPxxy3IIrFqAdOB0vf/1JdHseQo\nDh+gQn+2ZUTyruiSav2abaJX1oL1HDdLA8bvKSsucBKp3y5FUgEAUqwl7aYG\nSnd/ZIPQeEfOHFlgCbnx2I/vzKKE33J9xFw00ymtaPckpKSj4l3CY9r8BHek\n4LAgyT+oVfLaXCPurrN9PYT9MuZtK1gPXCQHJXFPpI7JMRKtj0Pi99qwqe7U\nZ6zIcaTLdyM7HrEOEYc/lNi1CSdJdcxR5PCSGgjNNdaAcowTnzIGz68wZO5x\nkJ2q1S+boydm7qbpV6nJtJjkciFGP5FiiWS9PmcSLLPnoy4WvVmSkMmGDbbT\nx125\r\n=Es7D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.14.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"8.2.0","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.2.0_1543957736065_0.3097467362562014","host":"s3://npm-registry-packages"}},"8.3.0-alpha.6aa0af0f":{"name":"@githubprimer/octicons-react","version":"8.3.0-alpha.6aa0af0f","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.3.0-alpha.6aa0af0f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"6f7bbe92fa456766ce409a81d1110683f59d8f65","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.3.0-alpha.6aa0af0f.tgz","fileCount":11,"integrity":"sha512-J7F7HYaSETkbapTIChxy9kudheBhV76kFGYSk/k4RVjscuGJp6lP6qJvMX1f+VEqQ4oSESmZC0IGcAJQwROtiA==","signatures":[{"sig":"MEUCIDhloed1wjW3SBD+JQ5xmert4YIoZ7+kL8W6yJnxavPpAiEAtmrUnoOjCJScAnF/+eSgps3piFUte38GPrCCxn2QHvY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":196311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHDrNCRA9TVsSAnZWagAAqlAP/0BAQtJ/Byc9st5rxBys\nmNaiGV0xTsT1XhdDYGP8N8N8NMDHI8bOd04Ilryf1tUymT5X1+0mhUSBTQ02\nxDvikkARGNEegneHRJYHOQ3yU8K+r0JaBuqIiC5tOz3KXB1cNBih3bU6fnJW\nOMgYxBV3RDnbXEY+SXWvGQPDZs7PShlimqOIX4R08c/XbBTwV6Ik/9FSVflk\n30Q4MlRpX5TgJosLwwgNy4wE8up30h5RznhLbg6LoQSKMhX3bIHRg+1GGFJ+\nRZE/y+VzhEmN+KDertZALHyv2zRzn9XQudXHfC9HXJdLiULDAMlTP4bPBIXF\nwjfqbUk/o3cpahfyG0aaECiCSJGunklZEsjiwEZe70vost/MkWxYg2Mkpxgg\nrYTqyz6ggCjFk4c90EWD/v23AS3z++XIbe0juu+KrjBQoPkWY15sTUB5qzwr\n+EENvPCSjz2ZUI3Xb/y9QXR43SiH+VpKTugZU3SQZLiKQI7sy89axBDMDSNO\nP9j4VkkoJp2/9Q8/Nm7B9awAT737UyWgMtHYokj0YsahSLNTYGGYZP9EvTub\nO2Sb9szRLHIjuN3uB0mtAGUl/0+yZOSQP/I5p/PmXIR11ii59l/ZZki6Hz6v\nQfuieu0pL43HhxUi3xvqyXREDj0TGk3vUuV+xx3T07yaHA61p0fFaltBoE0k\n/N3w\r\n=JzHE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@primer/octicons-react.svg)](https://www.npmjs.org/package/@primer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @primer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@primer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@primer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@primer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@primer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@primer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@primer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@primer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@primer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.14.2","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"8.3.0-alpha.6aa0af0f","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.3.0-alpha.6aa0af0f_1545353932849_0.5661303510004296","host":"s3://npm-registry-packages"}},"8.3.0-alpha.7f92597b":{"name":"@githubprimer/octicons-react","version":"8.3.0-alpha.7f92597b","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.3.0-alpha.7f92597b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"fd98f3e7aaba8fcb93950b339222941cd22c5a90","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.3.0-alpha.7f92597b.tgz","fileCount":11,"integrity":"sha512-3ESHAk8uO+kBTWyUXFxbKM3NeOWWoIcUuejHiPXYzTCqLKPXafu3EYnovABZXhZmVMXHKD5m5R1uH/skuE+muw==","signatures":[{"sig":"MEUCIEl+rLkvyE15lfl/s/85u1Pkk9f34BeCBhyqV/wHHjHoAiEAn1Z8Um+skc7bYDK6dbV0wq3kU2RnqbCwptBTCGyevOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":197180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcMtJ2CRA9TVsSAnZWagAAgIUP/1edCLqrsszzV/mCupdF\nlhR7DvvCzw0+UOmW3FJ/qkvmXLOQnggg5BhLTlyWroRXSKFB32bhiQZFja6N\nAp7PGD0RkdYfFwJW6MXNBayTlDD9UCkUSN0BBNo+wJ+GJltGib1JcS2qdB2d\nnbzlp2gnvejsqGDSaUeNo9LQFAWwdkwBecfqbMDWslBoUPu3Ol/WSrUNfwO/\ne5Pj+ZOBNH/ZzazhLd5K4IJ07TjE059/QcAOELWKREy8RP6v+Np9OEn15ZMT\nZRePUuBmWNcQWELuE0qPacVp8afMdfhj7cGNsL+N9z372kYGO6siQXUtJBMN\nljsJvR6xCx2EFl67XroUmv2YtmVKz3s5p7PfN2mgFOaGFUfub1SPADNp5Bih\nsih+HCjw6HvWDnpILdgDTiuNrtjn15fIAKc1r76h4CwUzFz0DBl3d0nO6gVt\n2znMBSys28fQnf5fmyl5EJq2mGTbT3YKLrt1kG87soqnHsGGz6uQLoWV0yR7\nWX9TzEBimSKfY9wFd+ZK4Y1vUA2qCoRAFDg99kY9VvB52x6KDrFZX7tAeYpT\nWCqPEcTffX4IG7sNyJkPG4TTNEsYLpH3rN24bXrAFHtXCrmBvuae5h1vPHMX\nQ43M82e7ft6Mqm/cn4qmwtx597G6dF2pxn/qPJ4RsNOJGhoWVy66xJ7W1CEx\nmKqo\r\n=MEbr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.0","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"8.3.0-alpha.7f92597b","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.3.0-alpha.7f92597b_1546834549771_0.051913646302675254","host":"s3://npm-registry-packages"}},"8.3.0-alpha.84b9714a":{"name":"@githubprimer/octicons-react","version":"8.3.0-alpha.84b9714a","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.3.0-alpha.84b9714a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"67285808e66a9149715004f3c20cc3bb708e7bdf","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.3.0-alpha.84b9714a.tgz","fileCount":11,"integrity":"sha512-o9S3SioHfJ8rCjpFA/EWXbYpuWhKWsg4omI1uxTg4it/4ZpJMViV8bUk7FQIBIJGa9zxRCXUPKiFvA/rvlASoQ==","signatures":[{"sig":"MEYCIQDgEAH5ieHaqz/PV/L12R/ZQnu5Hvej5BZO059YpHP8DwIhAMUY5KsexOl4MOU3mK9mCQn3jougYNwxBMkJbKTOdZBe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":197180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNTSlCRA9TVsSAnZWagAAYMAP/2oaRcm0Zwqyr3kb02XC\nZfHtT2J3sVGauPs9VCOUS1BJIIYeqHVFqVjfJCinwIwW773StY1bNlhNTx4i\nSo/7va70AqKWxu3bQWExOVKIBg/XS2q+z3LHe2ty+49I9Oek9Pzk8mu7lVby\nqJgLk2n4jFIpP3oxyUeXSJDGf57/uxBqkpOzkFFhUrFJia3rJZVK5eEQakvT\nf2zWFpMtfFqLCN5Ed+lHsvW1PIAYbWMGpsxr/6KoDGlRzR2sY1uBm5rRCYGC\n2TQCQDT58II9APQuVvt4m374wVRobCyL2mXjMgyW+F3dSy68bmIQEDNpZNJw\nnSsyvQAom/k2dUztvN0TbbBMGFob3wWlFunyiGW576aWrTYF7SnwugBU2Hgu\ndlIE4HKRyupBPQ0hbOrDiYh6/9yslrYV4io+34b2n6Ion14367WZzWTvz5cw\nohY9uxglhOlU+rQiMyu4Vsrxz0eOGO9rUpuTxhR233eR/ccGDBhMZL07PAEx\nnuudU5qZ3c5LaB321UwBSfMLWRcI31nFX8Taf2GmaxRzcW0Zi+9ZZyfmBqMR\noOCmQEp5mNoAGW7iX0pfIZ/HLOKXjGyWkNxxXOKQHSQaGS4rCYidsQuoxvNH\nChkeZxzFIGFpULUvZdGEZ6O54KpTacI9/MarMG1m4DRksoGtbpciwUjnLNOZ\n8e3o\r\n=eGQJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.0","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"8.3.0-alpha.84b9714a","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.3.0-alpha.84b9714a_1546990757051_0.11900056800635306","host":"s3://npm-registry-packages"}},"8.3.0-alpha.7cb9c615":{"name":"@githubprimer/octicons-react","version":"8.3.0-alpha.7cb9c615","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.3.0-alpha.7cb9c615","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"57d248c5ca74dacb6f09b696d4ed8bd60ba38116","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.3.0-alpha.7cb9c615.tgz","fileCount":11,"integrity":"sha512-ZBIirz0jtLr9nbWp5D2zdRf91kac6ErRYqfJWRREGck53jWfOql0w6yvhQpxJH7ZwBFFksoDfU2YktRIY9TGWw==","signatures":[{"sig":"MEQCIAUSnFTo1KHlrpDNsCKwiCapJ7F0gmxNcGeRr+Wj7N9oAiBSXf90cR+lx7KGqAWdS2ZCm9uxCJY7fGs9hjIXMKw7UA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":197192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNUCMCRA9TVsSAnZWagAAtEEP/ibAGkYRn5+fHpqhZuiz\nywofBPaUJ9aRWWbmZXEzXdAMa4n5yGgLdQAwkEuj25JFkmkKGiHX+/rOcv24\ndblTSZ5IhlTQglkXJ9JfU6lmeVbse8u7eO8CdKknPDgeHrgsvay+iqkUrFKL\nXfth4zuJscRc6M97M3QLa8rPDzEyRAGDfuJU+bzBHVeM7NxNZYUEvG6i24GG\nUhkBBLiLt3U5qkFEbkWZQbRYMgDKFbe7txqw2HJMQW/u98rivNmPlSMqpNNa\nd8E8MY5wBI6fgnFG5FGbxYagETE/tBHJ7MG2WRSq3pb6bjn/+QcIo2pmQD2+\nzA9/pLVkcag8fndx0gMKZwHb0+vmmObJ/fPCUK6rG9dFTqCMF1juQ61kqvht\n+h6A0WtjPoLWTGhDTWWqjLq8CG1TS5Anx96ExIMidsapDrYnOW75NgHr+ETD\ngalKhSyfsnAHCwvex27RBpVrWMeADiXdGQ7/IynFHq+IIIeKbryEqLiNkMDh\nnewT0S/6+Vhvp2K+fM6DumEekRxNrgjn4dP5+IgRBqal4u3hGyzAJnBX7pPH\nec08DxhA87gKxGXQMd+sq+xRbGKF/Yh8HBP3XKQne115fStpDsUb3LUdG6OC\noAd+aECHIiDTqYpPqKAEzYJG6hhz4XHyCkX0aoXiMo29yd4O4uTlv82F9Kb8\nka10\r\n=ykgE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.0","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"8.3.0-alpha.7cb9c615","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.3.0-alpha.7cb9c615_1546993804290_0.4121957874634381","host":"s3://npm-registry-packages"}},"8.4.0-alpha.4585d562":{"name":"@githubprimer/octicons-react","version":"8.4.0-alpha.4585d562","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.4.0-alpha.4585d562","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"aed7033853148c95a42c02e6f40ebe4e3460cab6","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.4.0-alpha.4585d562.tgz","fileCount":11,"integrity":"sha512-ulcSQpRWhT27LywPsK0OOA//Y0bMb6uNW5L0JidRiLFbg8Ie2SSzA0PEBF9ObpcYX3orUo1AvjpXZm1ZqsEy4A==","signatures":[{"sig":"MEUCIDQJIAtCJ1BIfgsqQWR2y/Eyr/XSO9Yf3x7eOeoVAL8LAiEArbikUy0hgUpOsnxfiBIgInncMyDqTBRAWZBPaCIvtFQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":197180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNlnnCRA9TVsSAnZWagAA538QAKMwVxJcTOX/TmIae//m\n4llShRInsvfjgTrKJDg4RXdaIC5IRpb8uhC1dFBDg/ahBxnqdPTEcP/wlGgu\n5tNnZOTxPvK2Sc2pS8Kw2nnh89zilii+4sF7Hj7z7wI5I71nUj3P4jIF6lwu\n7CoilgxhisNOY8b0YQmuR+Evay0Aul8d8g3ArQ6HVaChBh0nue5NrSp+PO1X\nePn7GXti9ORXe3eOzt07fek+OmjFwsBPeWnafPdfzKnoNgHS6CaI2DwmVIJ4\nxwtYNxS9UTfHckJvAJOmCfWZ/usCNzDBqw3bsFSMQYccPokDQe1cCc4Ke8uV\nDsDULF1nvNlOdRc3paxFZdpdhVzNWNZ5yJYDyjXR7w0JQM3Ux/VyUDOJOoK7\ngCeG3EknzD8T4+8Pb9zgo4Q7BCwt/HwLscVz6+t6X9IIAlYLcAREs/++mITk\nvHP6q0DdPRvyM9AIJLIgoSUsjFWtEOfwPn6EPKO2uriCDI4DA1szcW5Cvtpv\nLjQodlOX8YjthFhJvpqbr4Pnv01zqLseZ7zI41fZV05d9uWVveKIaJ67CTNX\n8DVT1WMGzo2EqjgClK2nmSW9xHXCca/7fyUAU3C082KKe6sE84OaIT/39Tus\npPQkuUaHzGgFXs29Ayxo19Syecq8IHSrIDSgxXE7jkxQ0nVmSyJ1Sz3oClvV\nVBKv\r\n=FFVN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.0","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"8.4.0-alpha.4585d562","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.4.0-alpha.4585d562_1547065830948_0.9484754771810215","host":"s3://npm-registry-packages"}},"8.3.0":{"name":"@githubprimer/octicons-react","version":"8.3.0","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.3.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"93894243eb76f4a6718f7d94fbe0d349e1a6dd16","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.3.0.tgz","fileCount":11,"integrity":"sha512-txquKlc2YDMMoekc3fG43eBdsMedumhbig9o8K8MYACMHLGbfhp9yHvaWadnrG6vS7XAztPnNtdkgUW5LHnqcg==","signatures":[{"sig":"MEQCIGuYfajpgFIEbw+hGZz/J7phr5FD26LjupmMcsK7BujuAiAkrsXgmpfSVOD5WqZEFji7stPWjQMp6iii1Dzqb44Jxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":197162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNmWbCRA9TVsSAnZWagAAJIAP/Aiw0oEAbmh3Sih3p6jL\noKQa3svIK1ZyoQY4/9hWUHEn2V1XFywa7la9REeLRv+oxLt584wj4XYQHeGk\nwR+1uR4Qe8KgLY7UIoOa3pXeA0rNZp1K/HsK3A9DEae63Bv/arWsJTdgg030\nuCy76gLA8vq6rktIWbeEr0TfQTz2BrOAUiZHe5mcla2PLb/up6z2PXQ8chMh\nW+NEVqn24M+1EATse06qVehBe0s+MNcFs8FSZmHyarfxfrTpeyU1KGcML/js\ny/Uwx/VEFzc+8x08pytGP10W5pUZ+xIcPRU3nQuEFrWsk72btjfiWo/VE6G9\n/xw0ilbe0HJmfbJJcH76+EMjhMnCyVnvif9hdbfBNXVM2KvO3bu3qCoYlGh0\n+lPSHsCy1yIKw6v3JI0UsUH06hAcrmrvSSTmn9qXllYMk2MWhSNz4WuyRvO+\nZJy3fezxXOKG2ldKeMjx3DTDTF2SnPKGMdT/TVvvrgX9mfmh+FWYln14HFvg\nB2AMpWRrh0UIyQTvXN2JTWvkStdB5+wIQHUPlvNUhUnZ/6xPKtpy5o10muUD\nwCY8FmqDipi3iZU6M0qO4j3oYkj12uAC8YWmA5ySQlYwjDFKkj3YyJAYhmru\nrQEzR/1N/eG9HK1ZQKCLpWJh82fGX0dBXboSYbppcvzZxbmROKAzGC16Ae3m\nd480\r\n=u5LU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.0","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"8.3.0","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.3.0_1547068826666_0.4681608340221257","host":"s3://npm-registry-packages"}},"8.3.1-alpha.4caf950":{"name":"@githubprimer/octicons-react","version":"8.3.1-alpha.4caf950","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.3.1-alpha.4caf950","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"85858b154fca6891983539aec6987842091f588a","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.3.1-alpha.4caf950.tgz","fileCount":194,"integrity":"sha512-GxjpvYRyPHzqi8TXWsplKi7euiLGbF2aToyNFeyDGMeLzVRaQByHyokYpsKr6De3Ny2697sPW8UUiTTKgRIqaw==","signatures":[{"sig":"MEYCIQCvivHu+9tMucIcp/o1JN5vzxbgg6jS9NRJCe0lYGnVzgIhAMXKSTFHGILKmoYgXU6ca67Hv059+cqOUUl/WXA1WoOn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcU2a0CRA9TVsSAnZWagAApa0P/1He8nSqfDP8JDtyFcYm\nw47h3FCt8IEMae3lQpwJQN9qvHjpQAihoE1LhF51qxNd/Or69F2hXF0S2xVb\nlsci5dnzbUrvTobOzp87H25w8iddT9gZmiI8fBtcnHR4olEJKT73cy1ZG1yq\nkpK97z6g5bTxJh2+nRV6SkZXpV5affWC8ylmYlD/bPKNx/va/pKeaXEV42S0\nORaj9No+UwXNkdm/BQesYj2i74mAdvEylviLUJUkzdSL6uSr3zgfoT/DBP6L\nOAfwX7PxJuE9xZyQFe7DSXtbFMz+iKH+E2ogPCpk7ibad2cDXeTizE42lga+\nfoM4EPdfILPpcZ5liA0BSAkQG++AUfAe2N5xdZXSkMGN+EKBpeuyJI9fiwEV\nrHMuNJ8THhHoNJzpXMmzFNcjYN6VBkkBdWfJDlqqUxtDqBa2nzJa2TMec4pd\nM0tSvdlYXMV7vQl8Docngb2kBReRarJXaWGa47unZMkG1FIhYqRCylWrgPve\nmTspv7YcfbQuIrpT6HLpo5b9KFWqbpxca/zam2ne6FM7uHpRsyOB8EurzX3V\n6JeYxrPnXUVuQuF9wyvrsUBSx4namyq9cniV1BKXLT3p7S1UjmfbXarn0lbQ\nlQZ0e0dCCvxt7uCiqNLUPVnA+Lcrk8bMAhGUHbVSJshZ16T++GMdv4JM9tfc\nVQCm\r\n=Mj2k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.3.1-alpha.4caf950_1548969652313_0.08637930780128378","host":"s3://npm-registry-packages"}},"0.0.0-d9c97ed15":{"name":"@githubprimer/octicons-react","version":"0.0.0-d9c97ed15","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-d9c97ed15","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"aa8388ba76c5fcf6dbf3c3c84e1df8f0d8b423d0","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-d9c97ed15.tgz","fileCount":194,"integrity":"sha512-iY9eLDyfyFDxJus+GD2rboXSipOuL5y6xBRqAA0ZeZXsiSVle08Z4Sb9gl8p6ixehF9Lx9FXyC/lHovROmgdGQ==","signatures":[{"sig":"MEYCIQCDV6uIAfxHlqovvCpubeCFH5CHjR3pIZoVvhxg0y11XgIhAIN4A0kSGYxOGw6mxubw76bCjo33+V4LioojIYYewUWx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcU2yNCRA9TVsSAnZWagAATj0P/iVtL3GYTvtnn4d2FfKC\nMXxQegON9JvL54EGtVTomKFpgvih6eBvXtaIBfPr9VeN8b6heV7TLbmt8s2a\nj6zL+mHyaefRtUdj/dSD7D5aeHLYBzH261CoNJv+pLnEs2I7hTyhAxz69IF9\nXy5o7WsVZOTmaKXOjN/g+lzxx/BtR/n1tF25kUtHpj/L64TQxBZjCRcqKpFc\nWEpERNMfHypnRkk0EkKUTfGF5DJYj1aPkSNucpV4aSZH+1RQws/AfULM92bL\nY7j94SMWVQ5DDylBnHeaS7oMyfOQnlo2Y06/hdWo+4n09p6cOaO/s8FUYPoy\nHyTJo9n4w6r6KNStBUcQVcHbRxzpK66esN1kH3ddtDuVOmAFyIfkCZTrf98/\nkjR13YUB8f2Ja3bqu1nk4V0bCd/tm4iDsvO9o4CceyJZwu05aSn9AfF9KBHZ\nrgeeF3+F6xgLAIh58l2uRwP1gi3kpgFJ4O7xTR/oKvXJYTzvp7HcMd6lIsZ9\n1UeDa6hp5KuhPsxzwIkshtfZ4Dz2HLvZOKOjcvUEb16XJ/UMmAufTCNHWEwP\nRkJpuGzYVo4BLg+HEIC13LEQ+Y+LtmKwlbzdvAZRooUIALHwsbCXIxxZo+1g\n4jY1ZKdSAfLxqcUHbbs1cIJM+UO31wuZev6aBk/rRMtk3ZG/75tbiZfNfbdx\nRRAD\r\n=fAzc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-d9c97ed15_1548971148904_0.4690778153023969","host":"s3://npm-registry-packages"}},"0.0.0-afb86ad68":{"name":"@githubprimer/octicons-react","version":"0.0.0-afb86ad68","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-afb86ad68","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"5533d4247bdd455a10bfd39be8a7c927d461c233","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-afb86ad68.tgz","fileCount":194,"integrity":"sha512-epmGF5CMdmpHMqQCsRbGIebEreMx3rJhmG1xmwqtsd6alXlTrqq0P6u7vD9PSGx+pccced5uQdTI2Y0qo/WC8w==","signatures":[{"sig":"MEYCIQCBr7A7ndGCzLsKJWjsmZXQQFS3QG342alCl31sXKAPLQIhALN+qunC18X8GDvCFGY/ApT8iJyRIPEfVyWetg3vMKTY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcU25CCRA9TVsSAnZWagAA51AP/jA816myXnGvnxGhmVWI\nHAYbagJ7En17SC9CEfxvCPlJ6SUEiOQ9o+GJjn5SEXEhxwerBhGoS3w9XDqV\nkBt7HBphsL2GACwp9TJeK6HLC/f/zhrHe/OU2Ca680cqX1jNAcPdoBxlI8Kj\ntXFM11DTbLZVAZ5LNfiHPE3MMXeMqr1JLKMficLcP5XzFrsjLzpQKcPpQdOr\ntPA4pltW/gJvlqSZmtuMbPYvugwkl/elzCI3Mgj4BoPwpQcGfiC63OWt+10g\np5PKl+avDcmUi8OwMWOw6DlGI0Mlvne49GQAzZLmGplg7gCMKJnfMFynrw6U\niHP89F3OIkkcs29SN0/ipYBwr1qs8WWd0+CjMowMDSx9icZeB2ozEVCmYm1O\nf+gZ19dMiNlyQFFQ8vyY4Ex/JTsnLCbiyspfDryP/jJj9ewTXXOX6wnCiDpH\npYIO2WqrvdBgD1f7pdY/97sZ6B2uwTGspQwpS8JtOS5hItDwd/XQ60lCs1en\nvfhi3LTODSV+fPZ4Va+cfNz8huKeyJxx0Gz+/hrwz+VaMAkSZUq/Ej6iAo1S\nmZEYUH+lQm2v1rp5g7iIxEtBbnewbnVqHtPDq6nLkEuJvuPDTaX3uchlgrTQ\nhYx5OKkUZLmo33BR92Wdoa0GWg0JjiLwDmhwW7YvB8XXKD9CCw+fARaqo46I\nzWlQ\r\n=eGo1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-afb86ad68_1548971583999_0.47409992691689595","host":"s3://npm-registry-packages"}},"0.0.0-882a0ed25":{"name":"@githubprimer/octicons-react","version":"0.0.0-882a0ed25","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-882a0ed25","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"3ce214c0b9485b86f1d2a4caf23348e5b26a76ea","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-882a0ed25.tgz","fileCount":194,"integrity":"sha512-RGxkODm7+r3k+tNHKWiP08fWo/yQdSh00ULDGRtyTVvlf/zuZa3e298kcsTC8T2BBsm07bi4L+x1SM5CkFDPog==","signatures":[{"sig":"MEYCIQCmbUSvCILiybPTORvmnfZzJm8hh8H+X5Z6NHnbpB7kSAIhAMaHaJeG2whfS+mAiHArTmaeJLKmiVTKcO/Y1ySmiCPX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcU26pCRA9TVsSAnZWagAAml0QAKS8QHR4E7M5gj5EbAK1\nkdOxmxvMnJJmezLchy2KV468BTf9AI7zsmTwUy0WVfpyD9cymuMPTYzPuOrI\nBDlg6TKGEmKxTzFqTL5J9vRUgMzi9CToerJNMWNbi1TXPA6sSasxbaLGJ4+g\nAq5xIj3Ie0hq/BP9DFiizG9PemmPIT/tuzPc1dUyg2Ato7OoZeLjeEIiiVfm\natpgpWSx6MUqC9gaugQkYTRJmpx+3TSmYVGL9JMkF9dkQzCWxX2hpMOG0XuU\ntCzX7J/UjjAiMYam3EnDKGd4CtaWOqNmFgkgVhZnZWfU2byTPPLKc0a3TrT1\nOPh7VwLtk6Kkkf9iuCJjk2HGeAwjazGHf8iYpGhLl5iQaH4aWwOWDWFoDNIp\nV1Y+kKYnCD6NHb6h+r93HmXOm19j8OfrTOZ3cBprFyqYTtbrcWikl1y8l1AI\nTX2vgy48xH+xGXJpoWCZYTw2lBwApUZzZdA/P5S32dnIVuc9Kq4EXlac6brY\ndjk3Fzu5qBYiTK3Syy8DIs6UCsFZhEDTYXdt69GXoZbEnHD576NiID4mUmgS\n5v6fBS6Xjnxlly22hI6A1KUxmORY23hDEeMh8onxc2pqSmX5NmA5kqHRZvtf\nyLeLLOCWNfl/pWZfNHCJQrLtRj2JjdxFm3MmfbUui8gCn5EtVQOMAq1aBoZF\nZiN1\r\n=SpZX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-882a0ed25_1548971689456_0.671131929688231","host":"s3://npm-registry-packages"}},"0.0.0-ccf081821":{"name":"@githubprimer/octicons-react","version":"0.0.0-ccf081821","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-ccf081821","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"162ad6f9b0fb954c7e8480e15d0141c112be5a20","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-ccf081821.tgz","fileCount":194,"integrity":"sha512-bWU4SngmUqyQM+nLIqnFRUUzAmKpfW5fSeMn81SVRI3zkXeowNx58Y09wZrLCgLIQldjBVXMD71Go/IX5QIWHQ==","signatures":[{"sig":"MEUCIDN2v4jSaqOdDnl7Cbe5LwVt5BYy9A31hON3K6mDhCUdAiEA40ppusOletpsZVcWoSzTi+YWpzO0HiND/2ojwVdEjWE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcU3ZzCRA9TVsSAnZWagAAi34QAIx32xltwop3LwKgIf9v\nSZht5PMoYvAMG57xAtrXkSfZLBY1mR6seOqgu5rlwufKhudKRJji3KHqaTXH\noZqbD0xqmE6SdshJxjOeBuzPgRHvT8rjTqxRBh05CYkjl4k1La2ozoJkfABq\nwNz5h/kw78YwbYjRDKMKk8ZUbpxhscyd6e4JDxvcAY5OQjdnFUUBRvIuSKlC\nladuNTxY0y6RAS+ws1txMuXkMRt75DaRfPM4rKLj6GYi6AzfiGlZfQhh0fZK\nI9il5AsHDGKveuTTp39t0+Uxxwdr5DKQkuQ6V9fUgQXwes7vxsMLn8uyjx34\nFOatmY7W3LymSQ8zS+4mrnulDEUOz9TXZHhIN5q1w21VXY9Yjcy379912qiX\nXhP3goVwRbiYF8ZTpEPupr/19xNzlN8eT7VJEAPFM2+4sPgXeErJ7a70qzi3\nqv6hf7x4EzRgtZqtujJC4YDbYIeLYN3EoUhkHWus/EkXHzNk8C/fCADlH/Le\nyM14tD5HkByuK4wkOVFmvKdNUi+jpN0GKSvlLHhKKKhDMOim5NrvLs9WOM7e\n+TFDmkXdWrcgehJRXKuv3u43NrwGzn/kpbuW5zUsaktyj7tyv6+6187yn+fr\nniIvD+c7qZXQKheHGnPlnWfKFqUUSEmchSLtNV1FlgPdr0p7Ss3uPUCA2wN3\nQXe4\r\n=AAtH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-ccf081821_1548973682886_0.6415046125825257","host":"s3://npm-registry-packages"}},"0.0.0-34faa7fd3":{"name":"@githubprimer/octicons-react","version":"0.0.0-34faa7fd3","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-34faa7fd3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"30c19a8a6f11854abfead45c7d83a8cb9ccbb8e8","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-34faa7fd3.tgz","fileCount":194,"integrity":"sha512-3xadk/9eeW++L3PW/waSNHP7T6ABfFTpOAjGo+IV/dMH1HvlAYs0XMSRDhcwSAGD8dKxkjFWWuMfEqWEzNXE6A==","signatures":[{"sig":"MEYCIQCLxfgEhRjWLLziJxSysJVVOrmPlfOIj+a35miimS7gTgIhAMj16//hotfwexUx3pfawibrCgBOjRhpK3uk5zO9kY6R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcU3c9CRA9TVsSAnZWagAA54UP/jP/NEOHObk/t+VAFhEn\n8P0FkbTG3qQLOtWJEwUA+TAR3pw48D2lkpqIadsB3fBwrh/yXvTlvRI2QIvZ\nSbebMIub0Pw+PevI8v4C6ig4PDAwU+Gmj1RXgVOZeu82SCDfqYMcvUd3uTaG\nI85E54GbvEJWiTcm818d6wcz//7zywlFt5YZUJvy5VN4pC/sd71wkY9/spWC\nJQYRJQwOjgAOk0vG1DeIpTqaSzfcfLkckBl1TDdpDnFYGj+mH5pdE5yYjtBy\nDozCOh2Mi7anKQf0X8iV7xN43HxHeYuvNZStfZBlgs+PC10VtfJkOJv/PopN\nOCfwE3bfndqwSG7Vt72bQ8mlQUzAh7vCcpxtAIW6fJhdN+XwLEOBULkCZ8pG\n7yZDCC3qKffXcJ4p0G/tCMA9GZM+TnuaUqA0VzHOC5lDs97PH+VB7Fezeu0l\nzA4Dwtp3PiDTy1S00yAw0/CLFE8PQKG4wBp08rIcrTayO3ObrwjPUmB2jmSl\n/7dRXOED1swgXrM1QXS/rXD22p+h6rPfjqX00yI+cy2hSgRMVZH9eQgLYiFZ\nzRIbEXFXfznlkCZQNFxosQwPIydvC/DeOnLttbmQ3eHI5Ix5/BcWGcGft0nZ\nRanpnq4IDolqhE1t6P/qD3M62y/6fTeKmMof0X6vIZ7d3D/LIiZUu5CXbJGv\nFlxh\r\n=AaRz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-34faa7fd3_1548973885083_0.6788603048305932","host":"s3://npm-registry-packages"}},"0.0.0-077b223ac":{"name":"@githubprimer/octicons-react","version":"0.0.0-077b223ac","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-077b223ac","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"5b8797195d04187408f1c91a51b37fc07e1e117d","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-077b223ac.tgz","fileCount":194,"integrity":"sha512-DbgGSUH8D4DS9gw7OBrJ66xVq8jmV+T8ETPshHwcwmtZgCYvRYzYZ7Rpi0I+B6Mc/xOQnlAIL7R7DfamPFjQcw==","signatures":[{"sig":"MEUCIQC202AxPrqfjJ9KPVKPrahj5nCNhuwx6Pd410kR0ZwnewIgbFcVm2iD66fuVOFrDURIH4uUlELhiDi0KCIwGQVi2J8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcU4BGCRA9TVsSAnZWagAAfnYP/A11dysKCQ3PMU2Wfvkr\nK2wIbDkJPDBzZD0lh4maqgQBbNuVy6jAImR5TzcbaQ3PwPefcLiAqNwRXjju\nyDSg9VPyjwpVuTNhhCUJChDBBCH2xIm0iyCuDaCnHOFDH3ZdZFP5ws9jDml+\nYPPhfTDfWJf+HMKu4wn4jXxp0GX2TeHciZQYjqRLTqXpFRN3fIziD2ZoEQRr\nTeZAgmaETB463INXv21/E+M6fyMVnXw7KjV0XHmZCf7lef1YJIgi9uk1kNBB\n1Nebh/z+THvazuuEUPwv93APp6d+arWaS2QovRpx8+OwjhwEz1tEkjJPtu3R\nSEtWzveVEJh1O+dbK8rLrKcLMEByUfNIIDdr/7xILYEd3GZCS+txxx/rrFxE\n0/R03yzVbz1wPldeFGQjjktqcherb6Wby+FnmALev/zkr3ig0Dx7O/Fi5eZ6\nVafTTy0ZvqNK7Oazxo6GnPKbWyZsIAFCPM6lJhBBJ/bs6bC43+YvHWGTpUz1\noP3MF5kRb1olgxMxZtamn0GCEKWi2YS/8IAudTMWNYe1TSQSa/MigcyOWe+H\nOTU99vJ8366MnGjqhcZBCVTvuOigqX6oIVZ4tDDop/DKLK1EDNQYiB+GpvIX\nZ05U5a4Tcm1cg/uZbpukEe/IyWSWxsdIx1hSay6kx3Bjs1CqPhEhdkAaT+1U\nbkS8\r\n=RL8J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-077b223ac_1548976197502_0.2725400307470467","host":"s3://npm-registry-packages"}},"0.0.0-84258b16d":{"name":"@githubprimer/octicons-react","version":"0.0.0-84258b16d","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-84258b16d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"14b136f84a0085e954f07184d01f174a67738d74","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-84258b16d.tgz","fileCount":194,"integrity":"sha512-nDqtZH8oQuem96I6dUQlO+DBvTo4k6AiaWXfAkRohc5LCz0URe6IiQNpzNGK4tk3LZOzU6rrNs2LB7TKSGao7A==","signatures":[{"sig":"MEQCIEHtrBgKKDxrsyy32pQL3cAptPHg3MJNeS3Ipb71VEczAiA1AIdAA+fkZjP4FRhw60N1X9nx0ynNu4Bl82EfB/+ybA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcU4B6CRA9TVsSAnZWagAA7fsP/RlBo2zBTYARvj8UqFQ+\nZiWy48XzOw2OrZcuEIuPvndL91zEelXJ65btUo3reZtrq+c/LoNF3T6W3G9Q\n7TruRYdBEbEw6F0UFBpTXvWO/TMf9rEAtOd1CDxNgEWla9q59YiEYdxfjALk\noPwVOL78X/jUBN3Cebs18YMaNJn33rMtV9SCV8F+J4NSGTo2f7NTir1mq0UN\ns9t223Ix0s4A7/W+pq6k6G7D8Lld3ChjI6Q+WbS06hU/SZ/8FbJRgXnBkSDM\n5uleQ0Rzaz57REWsqVkqJMThPsbkT9XMFIAjmXlVnezWghNpOR7/+xj9WE+J\ngK4MqUnyf6bGvbOkIoi+WcBaLG8OxAeRpwoWDBr+uCTJVJHt68a/9+aVSdh3\n/AcpkeTr3B2WkeCvEZOqlC+rAOkA5MGfP9FYR8AbcfnJlT4c+++zPErAN35w\nijzf5ILZ1zCLxXY5AbyLTs/QHHBjHdcHLrG5N/S+Zw/6lV8QPRbNk64F4cRt\n109llch1MtEdtBGb6JGKhHBNIXvNOX7gHc6ylwfhGBIz/nDA03BdgEJpyz5x\nZQ48vodQLbYkWOXh/ab5w55LK6NPzokJGd7Jtm8WwJGeSelLV+5B+8P9BieL\n7KJjD2kKS8iNiVj1YjcU9QYQ9h4zBBIQY+XRd0ilhXZ3X8pPnPVtWjwKaqpd\nYcGS\r\n=8sJx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-84258b16d_1548976250055_0.072213415264897","host":"s3://npm-registry-packages"}},"0.0.0-9776a3ed6":{"name":"@githubprimer/octicons-react","version":"0.0.0-9776a3ed6","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-9776a3ed6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"ed5232206964573769ffde79b3391de0aba6af50","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-9776a3ed6.tgz","fileCount":194,"integrity":"sha512-J4+DmmePuhgH/pENAqw+FGvMRs+cjNuaWYEWL9HPPku6qTmd6LZKpNlf2YmhDPgbk2I2wrZSQQ21Hwsbsie93g==","signatures":[{"sig":"MEUCIQD/YqqpzGcdRsrBLv156zqV1qiWtcSZ/Tq2XVyOu5fxuQIge0qezMA0fhu2hAcjvVXvcOh1YKKzPorAxJUl3k5sFIA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcU4jBCRA9TVsSAnZWagAAHwwP/A2YdM+3McDHNMJu9Jm/\nt6qYcv8mryXZRxKczYgEeMeHKngqWvzNM9LFP9TwEj1jiIa0ye+z31nafSgm\niOvlR3pgkqoLp06sdOvW6WIKFwS0UbJzK9LlJVU3YsLHQG6AGYAkcz7rm3iw\nbNFP/L5qDGKrA4+s4Mbf7XBQQyrQ76BCADj/IM7SkCjP+f4VXYC1pPMi1Ca3\nl2opONc4HwSgX52Tuyvdf9KEaP4xBB/Vu1W4H1Lxc/BVuk9zq6TsPIZJXRHg\noY31fMRKDWR6roW78gWDLG7eCZ0vvyrgXuw+bWAkC017TOoAurhqvt6DNIXH\nSlMXsucmM51fHGwcuGGwR6N2+dsexrfK+yNhigHGNwx2HlE1Fi32B/09FDN8\nz6CM3j6lwytENSlK7ZXPPw8R7e3OD0zDcxXvLSnSq76MXeORU043ncFtbWZ0\nOCdiC4QUo3ty8EnhbXF+X5dDLHBkVXek1gh/WhFKFj2Lel7sjdtPjIkyWqeo\nevPbQOMWe4I6XUs7VM6213ei3wCgL7mkMZwWY56rIqk2Dz0W0w9NW3I9dcmb\nB2M6NbfMgrHv9GEZRdTeJiZypsTYHBaQyczGXu9hvqiH4xBnF14J4g1ffKvp\nRdRg42Ht5y6GJbYB7HKtuYlL4Z71TJFCoiirnlEsa0Rb9F1695n+YG2xyeiL\ngVXp\r\n=ZZ1Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-9776a3ed6_1548978368364_0.9051473816889246","host":"s3://npm-registry-packages"}},"0.0.0-331f5d2d0":{"name":"@githubprimer/octicons-react","version":"0.0.0-331f5d2d0","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-331f5d2d0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"f5be566a0b36a056096f08ed5a981bd21ffab261","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-331f5d2d0.tgz","fileCount":194,"integrity":"sha512-Um57e3KnStcWA4m7qN1MjX+LbgLG0KYG7OmBqxffKmm5Jr5z8zSzB0+L8Geh5/tUmcePXjm/Ga/2PIRGyVt/Jg==","signatures":[{"sig":"MEUCIBF4yS/Nu4U67bUauAHXxReamfBuXut4VBSel8TuX0sZAiEA9CZsGylyF1HXB4uBJbDRtEe6fFNYj4X1WvWTXSqPWMM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcU4pSCRA9TVsSAnZWagAA8FIP/iKHr8gp4hVbgB9yULQ6\nmIrTRoIAs2FMRO5cvRqvrnzYu6C0e2D3XtTmt9R4nwyKKO/jQRD4MeHMhpY1\nUDUbKfVboSzG4CjwA8//iwpHD04hnlSFPmd1zi3FCXqSACGozUhru+v4KLFf\nqLOxfwRlxvHgbMgfr1SmCCVd6IdKzov4/J/NHl8aPW6kFfyU433mORDs/3RN\nF065T1Kyr9mvKHNG3pE0yIGzP3wi9Rfukh/ZO1405Zau6wwevqfWeq4xT8Ae\njpcqXDMw0sA45DRX1LHOpyHE3KEfpKG+DhCu007zRhGeTvevzTzXjGObYvrj\nWNiNNuiKCwd7OxGZ5X+4iB0lx/31fVW2hMqMO1aiz980/eD1ZY6ngyth5/WL\nfTHA6SF9CE62mCdOM6npJ102A1QZhZOO+r2weCqBcw9Md9Tk0dGIZg/WW72U\nPwUe7FcmzEHL9IUP0z3z6TN8AfZkv+CxPaDh00Z2qtP3dvcfTpkdCzIK6BRL\n2G7krYFRgojOkFBIifAiaoJkp/NmeNny10ck5Nz/eZfDh/80qyUSkwJ+pBXQ\n6/4+3Gm36zx88pvKKv1Ntlztm/ggXTnPijWqSXZMwVj7WUx6B16Uphhk+Cnf\nkZNmT+z/RuULqRGduLTXWraUtw2MjjIEQgOHpXCsXJD0R9aXt5W6PE2JXIcU\ndtPh\r\n=jmTw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-331f5d2d0_1548978770201_0.5434629710579404","host":"s3://npm-registry-packages"}},"0.0.0-eb6b9b10b":{"name":"@githubprimer/octicons-react","version":"0.0.0-eb6b9b10b","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-eb6b9b10b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"2e70a56021b83442f2d754de64f938dd45af70c7","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-eb6b9b10b.tgz","fileCount":194,"integrity":"sha512-467gsB9sludQwZYSi6F7n9zj6CYKywgGvtZZX1L/KJeeclhVa9cXZ/5Nsodh1w9mrORx6QU99BbUpaw8m8bCwA==","signatures":[{"sig":"MEQCIQCQX/PU4QTBSX4WWlvA9q5C+E5u1nz3b38sD/EyviTIFAIfPpdw3IpCgNCAysej2E/YGfxXr7SlImE+fvii5KjAAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcU4vWCRA9TVsSAnZWagAA5FsQAJwSTMkAySoq+33yKSTP\n5/5H7cl0HmJQ+Z7zW/FSD5DAWYqc3LcBKRJg0OKQhy53YDBtUvvT8Fl4AGWU\naoFumwokj+UqHT+kQk67jfeYIBupMlIJ8AXIar9LRwLCpBTmr5Oz8+vxCrNH\nT2B25e0AuKi7f7Gn3ldwy/WNPtbHOfXHCcGns+2dVctiduYVXhKp0b4C8zS9\nIIf+jcUWBS+TzXBVqLmQtYRmYX7G3bmlHM/reY3p7/AQrh8OZ8bwqJbQ3Vuo\nOQFrsXKGPNnIALyKC14IbQcR1rPlyesR1xtDjy8KUZKEMM5yMmUrE0APVbr2\nbpnpjNCJrNtvKtvmWekZzzr/ggmvtv5LGx4qOpKJK8fgINI0rrmLzElAt4Wt\nxorB3Dy3EBruvaYy15hKdaGJTz1G5BKWvtE2n7RJaifkYas/eCoqRWg5rRyo\nrDaxaZtbg1pMx18KRAnfvNDwxrIUKX6C9o8lO61GZ6HBsltE3G8XH8Q853kZ\nytJlsJIVdOFayP0SmrG0GL2YLl6uWpSXigVR8ub2dPeK9s+3slLIBlxb/mDe\n5zEXow6DpXeXFr2qg1sFRZnwVY7i/bzmNLuvAYTX34eA4a8iM/bssC9HUnRR\naGgUxj+qSwwDhLdZv/qKnm2Mq6oqCzBD0V6UH+R4/QYXJkAOxnsZQTrxxXcS\nCpDu\r\n=qf6y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-eb6b9b10b_1548979158118_0.21637174811196025","host":"s3://npm-registry-packages"}},"0.0.0-4988110f6":{"name":"@githubprimer/octicons-react","version":"0.0.0-4988110f6","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-4988110f6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"78a7be91995577bb4c306450458f93620d5083d8","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-4988110f6.tgz","fileCount":194,"integrity":"sha512-WOzNwYHsINWvD95fQiCnoqv8tNi0znN933kMV0qdT3O8+CNojFClAYUtmBhHBD4CvZyxyDv57xfGowAeFZ+3yQ==","signatures":[{"sig":"MEYCIQCESvNOteiyEnCFKBKgvCFwwcK3cu7FlItICy00TBkLowIhAONEV6vr+xFuWigSUq83fY+TF2CrKlPwZ/vxIncY4UCN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcU42wCRA9TVsSAnZWagAADMIQAIjEFSSCbwQ3GLu5/i5a\nsmgjyctEsR15PN/2xANitJHJ+QVUYUvB0p45EZz4vnyAR+ZMzSqbbnt2VkSA\n81CUHw/e+KbOi6DuiUv8v3j4Y9C9swpCEIhy7f/xh7CXiVMIjetOr2A7/UFa\nSE53ZGUQfE82IY/0hTcViSBBqcecXoY0/BXR+QFc5gWr8E/R2Dj9OfP5AOgz\nhRCiKO85KvzK7n7mcr0uDdV9nv+h2z33m12LyLnny/Z9oAjZHjBeD32T5Udd\nMTOAddU0LdCU23EQOZCIP6Gkh8RoGYJeaT7/H2BTnJ9WF5H6DbGrySwEB5dA\n6UZXPsq1yRIDYl4/FWmtKc6/RFjZ46RajJvlRtYrnCtmAIx482pK1wiNKUE3\n4X/HuYV7aTCzzYgnpSc3PUJ4rUjfE7Dxq6dqY+1fkkxRLlW99TFAjbnT4HmJ\ny8UxcYx+IntEeYreMazf3JUCUVm7H+qKLGN0v6bZ3Qs6oFi+zvXMmo+8KGLV\nUoQ84Sj7ONN1/JqRmkT8rpBwOjLTZ04JqiUiBWi6WhxBm5LUcD5fPoer8l8n\nYbsXNEflgqT2Ed5sHpM5984hMciBESjnTS3T6Zo3CXv2+5MYRf0lFYnCurHo\nFe8tYaxfx4zW00iJcFHF2e3EPeFdc5Q8/5XzGMPsVgLM37kfO8JYwk8jhl+K\n5/7r\r\n=Kk2q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-4988110f6_1548979631302_0.9478997945587035","host":"s3://npm-registry-packages"}},"0.0.0-e30d0a3dc":{"name":"@githubprimer/octicons-react","version":"0.0.0-e30d0a3dc","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-e30d0a3dc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"fbc2a9a7a4793019c42488b043523646b2b2faec","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-e30d0a3dc.tgz","fileCount":194,"integrity":"sha512-dCc0tYksPloopH7aw5CwK661559pd3W9URVFyDf8lYOADFuzm44qi9dzXYLuxd0YVCNKc6GvwvKwQrd2n/p4YA==","signatures":[{"sig":"MEUCIHqBRT8pIh7fURYKQlorBhS5Ji9TE2Q12ZVGKpcICSIfAiEA6IHKlEMQ80y90Yo5u//8mzhYMlPFq+Wh8HSZf246Fh4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcU4/bCRA9TVsSAnZWagAAlvUP/17UqtZ6SHHRlFYYTerE\nnE3fGJWj5VKJzb1grfKVCgGXw/DITzk3VWfGTXhxMS1ZV4MsDeZlTilBskQV\nHrwnuQ+R/nsQwX049ZrgTkX4yAG/EFb6/Jgc+oNqo660P2Owx/wHHkyP1Swt\ngdi638YDzdiqaw1FR4Jqeh9yZfszUwtfJOSq4ZrOssQtdCpHr+RKpHbl4C/N\nJavr7gmVkA6+aZrv91cQkGM+WR6SNsFvECje7CPYRZCnXLtElruEjcqIkNeQ\nt0v+763tA1gFD4d7Qazp2oQ5T7yTlmFewgacfSq9rBqXuwbyJ7qwENi+E3yJ\ni9yx5JlWfXd3BWspsqFZsDr6AVf9/CE8WyBgYuu8N6cK0e63468p0MokBC8b\nfEtSe8PHgW974CubQgUfe/gMx/CdtXd6Xvqynh3AY9AQlbzhHplfGWJCwN5P\nYWQdRossGtGV8iIRMg0W8ulvmBbi/3BuY+YG7ljHbygPUD3nEkLVIpe6mCQr\nG3KyrA2OKVLXTV6HpnTLK4iugvdVusUe4odb6+Qm4dKb2MVT/lEqXb6sqEeU\nytcP11kopxtw/pJbb5JFPv1XMKSP/bcFDFsK5VrA5pEQx57ckUO2RD4aRNXh\n3TMExYgGucK+SnDYvVgN0fxzIVBmma4PFMsrKclvB965Eo9HXaLPIC/CI1r6\n+cPI\r\n=eqIu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-e30d0a3dc_1548980187241_0.2440071324168569","host":"s3://npm-registry-packages"}},"0.0.0-d99a3d474":{"name":"@githubprimer/octicons-react","version":"0.0.0-d99a3d474","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-d99a3d474","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"4b2782a10b643440fa7ef3fed007f1b413b20b43","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-d99a3d474.tgz","fileCount":194,"integrity":"sha512-HFDuIuUBoKqLlqarJVSVRuaOClvFDCPnOlBZSV3hRRg+Ba5hxBgP1zsZM4479CzQflQALHD12tvgnm4Hh/B3EQ==","signatures":[{"sig":"MEUCIQC5Iv1/K5wOMacFVKG2TdfHmI0ud8RXQzozCcG0M2Yr7gIgFwdL/lU9XgI72OdbwNQKemTwYA+SrzAyuoG644FGRcg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcU94dCRA9TVsSAnZWagAA3Q4P/i7h1QFkTxJIma97LmOo\nlTHL/nb721q/fPaxYZeMxchZLoj/37LXTBUI2MrwqksE8dxMGa5BKZKoav+Y\n57AWGEhl67tOlyFO1drSQHl7vnfYCvzn4QAdpyzC/qRzrd6rSEhyxjiDpSVX\ng3UQuQL6+3QYc4FN6tzba3hAT3/VSvOTAKvNniWSXcMfMFeXuGrFTSQWo8vv\n5okNBd7MqFakkNHZOnmfnKXfJmciVwAm8SsSnJGohQeL/kfoIyTneUgcCYoK\nF+1TZh8VLA6Y3snh2LYxAiMVEi+xaNxNL/AMkiFImA7JAGCH/zMSh6PvEm4V\nk784apjO7dV06n7dwZCcVuTfDytyRYtBFOJzkj1NOJiA5JtUs+EyVFgc2awv\n6fCOcxiD6+YExcbakpQ5Ngz5SbAi8vuQcsnLE9j2CJWpVNq+Toorzz1JkIi2\npQG+o3FbxjS1XLEwj9ufYWPUnLtuKFYUhJLmSY6ZADFTBYhPb7nPZVlyKj6v\n+8LjssfCgRNXBfqc8Efoy3R8XSnv51FlVDO7Np+uNRpvf7vrn5QVeRBVjWYN\nKBxonNvYrH3XOlq3LWoRj8hxm54nXpSFQRkjS5fVnOmiTOyvg5IdxWNw6D/o\nfWT35lQau7hNH1LMDI6hh0RquSLoDh4+0gwjRxMX/ke+F644jvi+iK5emBFx\nVclJ\r\n=Ujxu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-d99a3d474_1549000221196_0.23726608678251715","host":"s3://npm-registry-packages"}},"0.0.0-664d0db92":{"name":"@githubprimer/octicons-react","version":"0.0.0-664d0db92","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-664d0db92","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"c355e1a8b38b3af870b3e605ef2855f26b39b893","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-664d0db92.tgz","fileCount":194,"integrity":"sha512-Q8RQ/Sj1vhQtBlQ6mm9SYenkwjwvOsph21SuHOIbP8hCNRrGuM8GFB2TsMI0SmeHsx0mCLqro1zv4cpyKne5yQ==","signatures":[{"sig":"MEUCIQCWqD7VRKw1s9ZJANzQ3vrX+OnhdMEAQbF6CuggG1WxBQIgaxLafyf/cWIw90tPf6csuHJ1z5PAl3Vei7HJ9Ygr1DM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcU+QTCRA9TVsSAnZWagAAQckQAJ7JPHRaLx/o3bYdDVIx\nBT4+yUjI1B6WSkzHAvKJTYJxR56Fm23reLsHCtncQNoI0Vh0GTsxbLdznf/z\nzNmuBwOQaOm+VVtZpqH4S/S31fEwcTwMphppj+H51PR9nTrxJRjdc2Vdg89N\ndeFF7HXe/hjBFM7+CfNem2T4WmHf2P9sStJsRJjqfBXKvQI33LHmQ/nbQlD1\nfxS1F6d2EnHe5oyNaXhDH6ufQCTvpzv4+gjdoQFNSGpiAN+eXnGUSSIuojVN\nJ0SUNI+bjaUKlNlNr53GBPgYj+beJ3sAZ68FFIylGx5HotmJF4oYvxC5BVBC\n+qQUGMFirTuAe/xA2M1IfeNq4KheoNBAHh5E4pqo28Wqypr1v+I9Qj1T9h1I\nntjViX+0LBig4f6Uhh5m7gRYlkt9LUNnGBNp2tVxkcSRmA7vsgfejkkGfPYc\nSlDLO5vqz4BdrJ7+aE+sTJRHxQm8YXMA2auiR0cWK8FW+vNI4VU933a0UoYQ\n/hsg13DALVS2r0kseRpz/nnQsyye5IVMj1ayz17PtilrCQTww9Bd0Je0cUX2\nSRukPF60gyvvyvbIyOZgxykv5423R6LepCpdK0P5V7HPKtX5G/k0Kmm8Xlc9\nNyPUZPfLUNPZcRMo7U7BQbhd3lgbp94dKn8eyvI/PVvTZ0esKCA5cD2ILkyX\n/Zot\r\n=Aitk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-664d0db92_1549001746836_0.8884973768898556","host":"s3://npm-registry-packages"}},"8.4.0-rc.664d0db92":{"name":"@githubprimer/octicons-react","version":"8.4.0-rc.664d0db92","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.4.0-rc.664d0db92","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"ff1718abda5dee2a14b162f3778f2b39480bd3d2","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.4.0-rc.664d0db92.tgz","fileCount":194,"integrity":"sha512-cFfhNzF3hnNB8SHyhJJLbGfBWpBU9SFUiJram+rITWOFaM5qgANwiS1dxtVi+5ehBhwBrEpOVj26jdkvsYgrpw==","signatures":[{"sig":"MEUCIQCpU1ZZ5VeZUmm7+kqpYeG0iaXQOWTSB4e8LgDxb/4XoQIgCCEy+/hLgzXaUVnYaQyxqz24VHrJPoexbkRcS5C/7SE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcVK/LCRA9TVsSAnZWagAAH90QAIIBebXuy+cHxR2UaDPV\nWUwnuEqJ+KtBHcAZREEIUPXHBFFzQBsN8Lyx1PlpOfXZ9A9Rwx6vsRIuRL9T\n1Z7eCyhZMPLhPcxSZQg1T24sSUx3jw1gNUC1+WE3Y8wZ1j15t6sY32exYGpL\neE88jNcN2J3JVvyp4Z4Uw0UVy5xA698J069fPd6ehpPKN1a2uN3IBng0Ss1o\nUd34iHz4tdhSg6YAynDgdkMRVlCx3IdvxEvtmRmfCmPjVhfxe5oo9OdF/aQt\nVfZDB3n0r3GVn7uyjfI06Y7Jftw8C42pA3aUfhC9nb1UuCWzviHJCYW7JltE\nlusK8BgNDiNbbbzQUFf05/9bvL8f7DSjBnd4EAi6vlac4nEOxj7FE4erUYtp\nhLiAVcucDr8ErrYV5ZDBEy00PHI6VkMMTGiTgKdQVS/TRwN/GHr3YqQ6J5Zy\n9b9Kij8sVtJckXebD/2S3j3BtBv7L3s3HNqL6pKwPAqz9WFcNCOa2FKbT/j8\nAmnnbI/idj9HcEIaNdy4OVm+gJRrUnNOULXHJPU4sYcs0rtJAM9/qewajvud\neoUju37ReFta/fRsTmh9lDOy6GYU3HTlTftuCxiff97BiJ2OplHc7Egqdrar\nZSjeiZlOKVIzRnkIaFZDNV3X+Uf4iX9BqAQC1ccWpe307X9N5VshkBgiyyeQ\nZiFK\r\n=wDMQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.4.0-rc.664d0db92_1549053899355_0.850961657665869","host":"s3://npm-registry-packages"}},"8.4.0-alpha.1f4f276b":{"name":"@githubprimer/octicons-react","version":"8.4.0-alpha.1f4f276b","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.4.0-alpha.1f4f276b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"e1fd9caa08fb9b83d0fb8af25ffdce7f63ef0fba","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.4.0-alpha.1f4f276b.tgz","fileCount":11,"integrity":"sha512-tt9Ub30P3VbCA6uSnPi9GvmwrmhT6HA+W9b+9uIentHuhP2r0mC/DCR5WGSQtZQHaDCr11dUxZI7ssS2pZaBBA==","signatures":[{"sig":"MEUCIQDHNNj3IR3/Irb0iHIcsqcs+8t5wJxTa/P7owhedCwB4QIgLzpw5RlAUXVHTbQIRHOXW/HKwvIA5TRLLSQvATMZNKg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":197246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWyDbCRA9TVsSAnZWagAAxtwP/3O7aQh2mR8ybL3xr01R\n5NVN7aqfWK/ZyR4aeAAmicXjdj9nyLAIdhx45JaablTSr2ZLYp3tQtjf/ERK\nD/xYm6pm/K6zwZhVlMXAD+qqzs8pkFanPkoo3K2J4SOxLDg84T9oQ1+sZdMu\nJjHl9OueXz6NtHNO3/p0b/T29dMawWSDm83m844XraAtLR97kqOCZJsAPzjD\nXDUlQ951uBH4MzZEc9tjXvbhTou1Y0E5U/RqQxGsPYBNSwsUW6QikoxXtMHf\ntWLEDQC+rgZC4EAlqjL37Xygv/xi6XwKiQkvsCL235UrHUAl8THucXMW82sV\nrbNnQ5PJLPjY/sgo4fwi/ycAkU83UV2YZMHEq+UMFpo+erdmvtoG7WgY0DLq\naJiu8VgHm/GFabqjEhPRRMMHXuGZ9XxMSRxrBgck4W96qiQSWwR3uEEDX/LT\n8x+5kt1garv7urHhi0yI7IripyZ46J9oA0/kECw77yabS8VFv8fqn1QmJc3+\nqtIeXD3R7kn877d1V4cH1Qe1vpAaxT30aaKrJXQiUPEmyXb32L7AB8cgazJw\nu8/tXEsM31zn1MvHov172Mx0zz8E81gdLjno1RSpeLrYnx7wy6s8xyZDHRI/\n735hh/a/B1UE7vgpsIr3x2vnXutkROmZhRXg2zKknTabNROttkuFz2YsJ3wE\nSXsK\r\n=TdA5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","pretest":"npm run lint","publish":"../../script/notify success","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","octicons":"8.4.0-alpha.1f4f276b","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.4.0-alpha.1f4f276b_1549476058443_0.4880590215227858","host":"s3://npm-registry-packages"}},"0.0.0-393f6b620":{"name":"@githubprimer/octicons-react","version":"0.0.0-393f6b620","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-393f6b620","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"71ef1d3d702effc84ba3aa7e0333c51009370ea7","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-393f6b620.tgz","fileCount":194,"integrity":"sha512-hsye1tBzsXY+zJHRIjKE2S/z+Beg1QNoiBH7LmknsmPTwknkn78GWq0qCxWsyvbCfAbxbVkX/2ZkHQc/qSrxTg==","signatures":[{"sig":"MEUCIQC97wHVXaXb+9YRbOJ7zLqtS4kPJdtVC55A1xqlj6SQ1AIgQIlDfnXyQLajdfqA+Kidk1k0sULLr5HhHxFNj9nzbJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXbU6CRA9TVsSAnZWagAAgZ8P/if83Mn1QS/ATgtRv8Sr\n/VhppJCVeWMaWqn/DDm7V/mJi6ElUhkWKFp1uu3SDUNXX9ohkwNQnbeKsBpx\nfiMMMjMJBoMw0D4TSYyo7RKTMsTLAQzpu99DAHKR+DrmzpEdiN0kAsoQv1kJ\nwfZLhFbLDGP5h0Qs+73671oWmzZXN3P/Go6Vs58X2FaKtg85bGclDQbLSbhC\nekFaHVqj7q7ev/ZynJMXW1i/wOq07v+5gZq8Qyqpg09TbBgivREzHXtY9/mt\n5BgwasP4sTestCQWvQACgTCP2a9hMYnTr0csqYqjC03YexJq8/mJ/qY7kThH\nITcGeg4lwbYhqOqamqJirrqEcTqlD/V6csep67KzjpQw7d818sou+WYCnRrJ\n8WoqcZgkk61t1fQDVN1Z+VoamS+XwhwCVXiJIsybaym0TYzH1C7BD+ydxbyr\nFJdfCNPA5dk4QhJjPrERQjqprlk3Y+5EMc1gWJDyMYqb/bTSFyf0k5n0e5De\nP9iRNL5IRRZHOIt3Wrj0mUoTAxSfZjmRNnv4HlT22sU1Xqc/8PsYNiwlBUeq\nmU2E3Sk4ILjIJS8DHcMAjcV31dYeWwygn19I5tjsVyUM3+sussZLyjIOcmVp\nfVoNIUivtGLGgUjU9j5s8DFy7twuxRkGqChjS+5RXrwTOQ7Z6lh7s8ysIPvf\nHpvq\r\n=8SeL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-393f6b620_1549645113820_0.9388399683295672","host":"s3://npm-registry-packages"}},"0.0.0-f86cce052":{"name":"@githubprimer/octicons-react","version":"0.0.0-f86cce052","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-f86cce052","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"ab1b89b7ac9b96f9c0ff45cf17c8120278ad53de","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-f86cce052.tgz","fileCount":194,"integrity":"sha512-GQ587Wufwdy9ddfAZtPqYJnDeyBZ6NuibM6q82sjxPeiRAIcYEM8Jm0pgDahxrrRSyqFqh4lr5a5WoO6ahiF1g==","signatures":[{"sig":"MEUCIQDlNye8ocNJP08uy7tOC0e3TLKYYP14Udf29w2knQkwfAIgRC1mnzZOAk/FZ7Xvk7tdZa+kkZUMniprJ3qIa/jyqVI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXbfjCRA9TVsSAnZWagAArUMP/jm+Xx+Pvnh8sLuG06o2\n4EEleOAx8hmAi6OkqIP5KFcK7CxpfC4TI9t4dvhX7Ah4vUkzb0J1QTs6o4Ku\nEAvsVgaJA6ByEG3FyEBLwcGiS9d8OiorhbPA/QZhBk6hZGfRuDS+r4ks/BOA\n5L9+YGL5cUyfym5y2ndL6AfGXpR95DHBH+VIT5DyihCvzoXpWDtJZpOZFHX5\nbiZlL/phy6TBx9scNDOg9xtThzfeBG973OtoI0ATn4Fh5le60JqxfM/499wt\nqlo5+Tx44gC6AFMNprSP9YX/dgqjKaLEmlq4tz9tjHW8FTjygIMWAcTww1vo\ncH1v0CYc9qcc/N40hu7+sHHvkjP68qmr9EqtcKbiS7Mg6DuLZnLOuM/I/bOe\nObKQZVUEl0qmT1NpVbAfzaWjquqyZiamy2oKUkvSLscBY7s5zVs1K8AVE6iY\n+w3xNMroMa949rxVY91kcpYWFP1xrQ4BCM7nvNLbhUz+aTTlyQR1Y6paK3Iz\nnsiPELvMPvlq5pKm4b6pPJsTyfWj31d2r8n/bMFSg6varsDJ7AoqCd2UduBj\n4MhDKRy7DGR2kKxrRzXKF3w5E6ydfMz9kR/ni/2lXmcbmB2SLpBVfd8siw7M\naU+rhSMA439sEy89TKj42zoVDX/tXb2aGmcVtN0k2sVdP+q9auJWQyurjZtW\noYVn\r\n=w5fN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-f86cce052_1549645795255_0.8106257104494332","host":"s3://npm-registry-packages"}},"0.0.0-34d72ab11":{"name":"@githubprimer/octicons-react","version":"0.0.0-34d72ab11","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-34d72ab11","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"77a14a41dffa347ff58d2d80c18b72f3856fd3ff","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-34d72ab11.tgz","fileCount":194,"integrity":"sha512-naXQVEII4+smRGFPLY/7JSMXaV6em5HRsfbGQ7sh8uM7yAFGc6Wmlfrg97X/YnWlU3YQvq7+q7VusSjs7VimLg==","signatures":[{"sig":"MEQCICK1DUMEgGjy/cjmoLNKGZD6Lpm4uHpN0X7yM0uvYiQHAiBvq8VSaiytUwYeifsNq6XWlqnb9gHhX+qa31CuxWUbig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXbjcCRA9TVsSAnZWagAAyuUQAJlB14KP72VYu2eDZZ66\nxO1NjgZrTpOaHs9Zv64PDWy4bUxzroTyDhzu66+RoQWNRe3YD6Wq2dczdApg\n/onDi+ngwkEZemajAetGvd2kc7rNWPAA/KOz49vtgViDQTyJW8k/msDIVXyg\nD0CPXASIHM2xWADGTHHSdgWi8t4UfRVXpgn4Oy12qk5qDEG5XDRY3rq2HWPF\nR8RUki5xjRK67hNGiSfNd6Ri7ovKwT5yB+2NYZMZWbljTHIyQVtsyAmADKCW\nMVUtacww0blyIgCqbRgtVWP8d8hOu2xng7IPidj8xOwDfp8NMY1h4swCrwGY\nOsqQxLnMDa9o9WUSJYeygbddiakr7H7o1hG338uNy1/CEbKshccjDBuf5HB4\nWLAcZ9qhS60xd1mwUGTaEV03T/MfJAiBONcPXhtJ5xMSxmSlo7Rt7NVPX954\nZIR1U8fzB/OAOwt3Zl7gOPT5qbCAgATxGu8HAZklLxS7F7xhyJDgryJuCjDv\nfuxmVgFzRgR6HuKpX7ZtK1CW4CRIUKbY52Ei7tp5JAIE0qIcHzbtGRaHZo2T\nAiPG6LPLkGlQ82Co8ljZeG56evejGEkcBQLXEdZYbh6T7WDZSkbbCIV67KlV\nLDjSTnzrCtCJmtD/cEszMSftdD7C2Kd0yDvWi3a2D2ZVSDDyjj0ZehMLr0Mv\nZT1Y\r\n=3ZWI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-34d72ab11_1549646043673_0.7826877307215168","host":"s3://npm-registry-packages"}},"0.0.0-472f062d7":{"name":"@githubprimer/octicons-react","version":"0.0.0-472f062d7","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-472f062d7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"935c82fb2a13a041d7cc617114401ce4ee304bfb","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-472f062d7.tgz","fileCount":194,"integrity":"sha512-9VQuzEf3/4jwrfKcR6sBdvz+TIyWcLzfj2eW0sQRJ/sGqrttkwMcdAJzneKO+qEkhrmNGcjj5kbd3kFZBEY3bA==","signatures":[{"sig":"MEUCIQDkCLRUhiYVesMSG0AekcLo5+A1YBNojU93bVST5G9OJwIgAtd5am6wfTifWk6C7/OEGkuvn1/vf3oxIxFw8JR4YMU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXcGMCRA9TVsSAnZWagAAHzcP/jyN+Sh/dbpbHJxt+/i0\n7rTMIM5mQoShHwvzERNzvSZF0NLr60nPQt++jqoGp6D0YHnfndGaoLflhp2/\nyQucs6+Hu282n1ZfJNnk0a2ufPjL/GG2LnmA6fot3HXnWFxb6Bgg0k+sZLkC\nb1CKaSFfKlQ260JS/89UNELbDeKU4nLpvOGEK3xRSD+pn/y2VZIti8wjFLa1\nkQwECVCYXr5WHGu8A2lKIDJpONq3P7mgnO6dfggzN7hmVmgZzyqY2fwQ9XN5\ngMOGc5lrseaeWfE/a5VvNwgDxkI6mSNSbdtE4EPG9H3vMS6ATwMqp1vSLmc1\nDOICBRTnGSX0o5+uVfygBfGAmE+dJvT81P8jDqyBSoPZXgRqd9q/MbT2oMEK\nWAI09OXWbTikFoPIF+K4BtSF2U6BaHKhbEmEsyYw/74kPzdX5579q89tqyQR\nJEWi6i9k/tttErf9iDi3zFikmcGRcHNOLmBJ6sZQrvnGDOF0jb3gDNPvDxYY\nDSYlsHQ0SRbRmnNgrfX7pbC5OWxTqfkE1RLR2pminksqePc90UfP93Zv6SmR\nljR5XbWmfG2KyGQ9GIFarRqvNdxGpozVHvrZQJmdrTX/san9ibjcMqcHU4wO\nKsZyQ5SyVKpBVui7cadSIkIIZ+fvVmin5WlnvaJcslonWEKijMmDC0FVU1mK\niOvx\r\n=yb1N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-472f062d7_1549648268094_0.12693840891630992","host":"s3://npm-registry-packages"}},"8.4.0-rc.f1308d425":{"name":"@githubprimer/octicons-react","version":"8.4.0-rc.f1308d425","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.4.0-rc.f1308d425","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"7bcfc792e227ae16819f72fbff36cb517abecaba","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.4.0-rc.f1308d425.tgz","fileCount":194,"integrity":"sha512-IUZNC0lBDr2S4it41bZh8NFLzmtGSlVPjsOe/lGC9+EzL5zRT+RrZl+l+E6nRW4s9u7WqRe7V+AecDLfvKPpXQ==","signatures":[{"sig":"MEQCIBFcWmCLsvTQrQkzT5hQ7QbTKKRY5bNQ+8EnNx27TbmEAiAGMaA2yKHEAio1hzOleGzOzuSGf8HKmwfPwjMQlecS8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXcPOCRA9TVsSAnZWagAA6ikP+gPzff6h5DeVo3FobTD+\nlXtncFg5g1gQtvv7v1oItp7s2UcBonU75wsOuDBsyGsnUuTK7U72JicG+ODe\nxkE2scC9BhNHUtFqHV3BcJWeBtmKIYzl5imwF9SOu17Rz7BNX9cqF/lFvm0Z\ni/D0rhKQO0xWWP6q48LqvTRLrt+2agIafhG6cwygfJr40TeYzAF3BnIvXD3m\neUEoCuBHwguk/UK7O4I2I/MyKPwKCTLmzuO/d106nRExbaLfej74An750KN7\ndbDe38qqCwhiQf7SitwbkkmGWLIWi56gmMJ75cQT9i6ybGwlwTngEsuhNNHL\nyJ1/k3OggESKwJm9bpJCT9+1aNrr7VWESQz3gd/pQo1G9GkNNS54/RQ9mXPJ\nCAB3DAuYKEzc5dKCUR0I3dHEd9c4oXfuCnThiR1iwvhAD76LeB4ED5BKRv3o\n/DgRInGV8srVWn2PKph6Tae0MZ8hr5TkBhx7yvKr9BeRjmvvEQobgUkuKSFb\nShdj4BS/QV2Z+uGT7dgZwPATQU5uQUrox5eC/30e1zaJTi5rU+AOS9uGHZwq\nt+LsFkWPJl6LwoS/vfMm5j0J3+mS068kfeyrrLbN7DYgwu4zk8nIndK8eMH6\nLBO5n8t4yIhQxneRh9K0cMX1IddLZYhOT7/f3N7BeOaNtQiiUvExDZESeXrm\ngoa7\r\n=dseN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.4.0-rc.f1308d425_1549648845534_0.9272988128046047","host":"s3://npm-registry-packages"}},"8.4.0-rc.953315016":{"name":"@githubprimer/octicons-react","version":"8.4.0-rc.953315016","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.4.0-rc.953315016","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"e6ee45daa182a6953bbab3a3299778cf9cfbe2c2","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.4.0-rc.953315016.tgz","fileCount":194,"integrity":"sha512-ys5YMtCndrl9QeEWjm74cnmVq7bBDiyyMuNyad+BxyDeBvnuiaTz3SeLMojYEkBn8nKWn2PdRhyLggWmvxJDVA==","signatures":[{"sig":"MEQCICQN/evDuATK7Kh6rAFU1jt3+HDSdhtqi5hoTiKLhy2UAiBRbG4TZzF/iM++fqMcq7a+HN9XbGtcOYqUnyHLtfoduw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXcYrCRA9TVsSAnZWagAA2BsP/0tGvVRpiqnfLW0GutJs\nSvRfBgRuut8A/RT3o4FWaNMnTiigG8nlJIFcIWcKHygzcjRbvJcQyu2ebtis\nuWWfDRAE7zpfTzbL7xnLr36tU6Unulv8vRWeGCS/TcdMsAT5mr4+QBbK/S0m\nmMoaBR0wpkWCwyGHAkar8qaTy4npKtarj6tmuu2tee2MLbDDlz0Y7P0yd/58\njLIS7fl2qTznWsNAs/IRWxtX84ioI21KSBk8HCDKcxInvKq0hFsts41Dt1Yj\nOlj9E1nrmRb0UK8vW1GXXU9skpsKLlNljvM3CCC+4doYLvu9WUiclIDvQxU3\nRU0OhbNoOs2dLaRvkD+9hsB3zEGpnZv5nn7nNsUFGYB8j6b3ootJRvYK6R+k\ns09I6GtQg4R1gCU1mIrLNCOhfFdjzmo8MUYiD9kuV3igFgR9VgNFrcCzaQmF\nAlUDZLGoYqZalBS8rnNbqFzw6ODvJzAABLvV8jAGIj1Wsr7ghr2CcwhRycYM\nrl9C2KGv+Ly+MMv092P+lJdVUq++caXIL0k9ocDmCBFEkNsYBzuabqKar98+\nbmWV7mf5WM/Dx+1BZKswkFCcM4PbZxEUeMRUqXgl3yKHvVhvxUtrGuBH9jvV\nCTLsu0+Da2xjBBx9Ya812ezguVu2YL05QbqzzJiAKPMdgJMYbU3knAnQqMb3\n6idm\r\n=qy4m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.4.0-rc.953315016_1549649450775_0.938039851914261","host":"s3://npm-registry-packages"}},"8.4.0-rc.f2bedd970":{"name":"@githubprimer/octicons-react","version":"8.4.0-rc.f2bedd970","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.4.0-rc.f2bedd970","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"fd324f96d68740b314baa00781dc765f5585dfbc","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.4.0-rc.f2bedd970.tgz","fileCount":194,"integrity":"sha512-BkXCrjBD4J4EQvGsCtVVgLXGVoGhtmv6abuiHmAeiDowCwBVyXmVXBMlxRAz43aQSYSMNB2nDm3G/BjalHXaRA==","signatures":[{"sig":"MEUCIQCQ+WXfJhcEbVio3dfchzX+MG7VzHZodRsnphpf6a3t+gIgFIzkT9zNXg3aCm3DyG6ZOq1rtBOCVCMh1WHBEJy6ync=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXcaACRA9TVsSAnZWagAA4NkQAJ2V/877Mvl3minjWbY1\nnJmkxzcNPa29yf4HnS2ZqFRNqwUmfWMgVlpuraLPM5bCernOIKcNoXeqYwcp\nzjVC6IZoHComz5GJQVibWBlMAOzwwneEs/WOXr5tksfiyJ2x1q5EPF7pHXrA\npJZqPR192lqMtQdOB19NoD3LGtF3GOty6bQyP7dRHm0Yv8SOTRzy4aZnV0zZ\nFgFQJu/lZbA98ALpY8rIKSxtc14xUfCmSjdQ7s9DHVDsOzJQxZgsfP3ZzYZm\nOUAP2JGDTl1MY2FK7haNL23Q65JMWj8lJnBnQYaRtiIEGHD7sBl2+YOhJnvq\nf1Bx+GitnLYLLgwmLcEkkMjyubo0D5TJFylIOZfMo7eAOfxs/xJHRNqcqyRs\nvdjb7oHN45yRTXx45bW56lJFSOYXsqFrNuvl/t23FYMIL8LDM9amWc30WLG3\nRajFbkn+OjltkRHCtmOHl2g3aiJ8eZaYHMw4dvmdYCwbWANhG0QX5sP5iyp4\nFpFNJmhenqPmcxNkWlXhBfphKRag1aBC7HgOixaIOSwJujTKQTjxWgFdEXqR\ndWVH9hZ26lgB+NNJcAGLOavgmgn+NkWjFB7ffTGuGz3qocvU9pdACl8Fs+4Z\nMpwIq8S2v1kjz3zcf1+Dtq/vQo1ERhc8AgZL8Rs1iEt96GXHbkQXWS3U0l7w\nB8is\r\n=gn3g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.4.0-rc.f2bedd970_1549649535650_0.0030178709307582263","host":"s3://npm-registry-packages"}},"8.4.0-rc.d1d759b31":{"name":"@githubprimer/octicons-react","version":"8.4.0-rc.d1d759b31","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.4.0-rc.d1d759b31","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"01b03f292a5fc6bf906d3c4f17847f51516d75ca","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.4.0-rc.d1d759b31.tgz","fileCount":194,"integrity":"sha512-YZa6BfqXplSSbVFt7UNFw1ELz6xVUVZmTgemZ+WdmfezAIiDKn8+VDGdpqqSz9An8hTx4agWFcwqOczXQFQEiA==","signatures":[{"sig":"MEUCIQCEjUj+ZGajFaPy+d8reF4OfmB2dmNJWxaM9ND9676QsAIgN0bVD/vLLE98GZxOOUYd71zB5IHk2cPv5/QfsDJqv3k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXclUCRA9TVsSAnZWagAAOs0P/0v+fVkTAsOYF8qd3CBj\n5DWs9NYVKWHispuJ3NSC8rmVP5tnH4szkrdwshWXf76GnLNi8A/3oWsGwm5o\nPXkGYYlbk/L7LPIT/op/5sbnx8AjI1SFDmtIkhFEyLnMOOkwUYZ+98MqD6/f\nTnFf2p+k9vzwJxnoEiIJsL/iXB8WaFy/zaJ1iehv6aig+7hWleAKQucipHtW\nm+SJt2VFhmWN8oGvi+hRAmTswGsNoYEeIorIfx6yHh70V4aL7XzOLzBAzOb9\nLjJfXYZqHN9e07LxeXdU48B3FVyi8H12y2uMRztdtB4QTmfm+OgeyMfQn2Tp\nAAmz7FLZFvWZHFruBUWv8VYos0VCM9AViry+ocMYpOuJ2XUQXwNzTsBiC+v2\nxZ/D0qmopz8ZP/WOhMf+UP4fSpb/vO4qNqFeLxcgzm8F+mFFF9b3dkkoUvt2\ntoEBaQTNQrU5/ZZdCwUWkHT7rIRWZvKvuMYo5j+blhlfFx+hnX+x2RmqTl4k\nA9R24Z/1diiqIxemire2NoO9TkAh30baCiAXvtNFRl8prEXYarpVM3AhPtmI\n1mgMnDoTn8D5Uq751mBEm7dtq7JRvbJzGWHd9xciv9s663QmWMnBMvdTnLzY\n+Shj8QomAnTCpvvbaMP8KPrTVQtkkZ6ndwkWHRinAyCyw9nQ1RY+8po3VR+b\nzQ/w\r\n=N/Sh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.4.0-rc.d1d759b31_1549650259852_0.05222012360089101","host":"s3://npm-registry-packages"}},"8.4.0-rc.e5557e7d2":{"name":"@githubprimer/octicons-react","version":"8.4.0-rc.e5557e7d2","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.4.0-rc.e5557e7d2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"fda1346320c533829f7807187395ff149d79b850","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.4.0-rc.e5557e7d2.tgz","fileCount":194,"integrity":"sha512-ybgGGGXBFU8+VEdNeVbmh/vA1mwpo5LJrIKXoWN1+uR9Rk/WLNXsF5aFijzbaHWVheDn1LaTneBEaPF+PEdCkw==","signatures":[{"sig":"MEUCIA7+omiTa/MDsPO30+yvIGf6VAdBIG2WQjZnnZoAkVgKAiEAuLpBa4Cl5sn1/sa7yV/XLsucGmpHesQD4S5ofvhQAY8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXcvzCRA9TVsSAnZWagAA7d8QAKGNqJ1pcqS1mFNfd/5U\n9asbVpD9Z0klfyRpYOsApvK8Lejbl2sqDNd9SEH2kUj0ZIN0H5zeLxvv7HEf\n4jVLkauAg7FS20NFsgwAv/G9PlFLVdUIXqSnpPVnB/6ptZgP8QkPFDj4Hf1K\no3MvkF9k4q/SGlTeGK9kaOfdPfPre62PWue/qaCYXnTjvkna64hqzzqAMDJu\nBZnx06bNk+0iLE0HHH/rxOzfIi9bdtchSmp8R7SRgDjweZbEngbQovMaKaWi\nsfteI7CuxBeBD7RDaRvnCdRS3n1f6HPEUmKYQ7wd/gXY6gca9OnoPA29O7ca\nRECaJjG4SFDqWlF7NavDck9SWFM9ls7rMyAe8dwg+UyYvFKuKwbjnD2aGGei\n6Nt7sYhjq4z5iEXJ9rvc4yX8oHySzccyopSdcF6hlknIpIKKTIM5OVBPwjR8\nD+sI3RfziL0jac71Xxn0hbOLck+I+1RpKoOs+WBWqNF4fSfA739XcG9dPiWN\nQeP/q8iNseR0lgL0lVYCXZ0Ah1qHIRlHrPXNkA4aMPh0VrCxo5JAC3qFpJrH\nX2SVijwjB5GSh5Xdcxy3xHZyC+vU/FuzS4cTemiz9D7Cvu8uNqtRk5S1Edbv\njmWbQ5mOqFAGOmbyDRwcP04gFc7Ov6YqE61qDBQ9PZCSVCYz6nRg4gfcT6Q9\numaR\r\n=mRXl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.4.0-rc.e5557e7d2_1549650930363_0.5728639812329204","host":"s3://npm-registry-packages"}},"8.4.0-rc.bb3e05a91":{"name":"@githubprimer/octicons-react","version":"8.4.0-rc.bb3e05a91","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.4.0-rc.bb3e05a91","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"a114941098ee544648c9285cbd6e6c0b8e0453b4","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.4.0-rc.bb3e05a91.tgz","fileCount":194,"integrity":"sha512-DxGwd0IeQZS7pwCyUZdvVofgTcf1yCYE2he3GBl6XYGUUEaPcu4Pi3jeZokGDzkBWLMWs+v5l/DC0CPgIlAOwA==","signatures":[{"sig":"MEUCIQCn1ULxuOCZMlf+LutlCbOo1SgBfFajHcK0l2FkCWWA5QIgPPVzPoqZFzweY06fDrri+6EQzam1NHu8wEwt7m+QmbE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXc6oCRA9TVsSAnZWagAAHDYP/1BEtBLYEW+3FffB7yyj\n2JkyzYWczEk/pk0W6IMI83HiswRRlyM79Xq8/d4MbOa8M1NYwkzimrEF20yO\nULvmV3E9q10O0GVcNRfNF2+KmfB/TgLT/I9tB02i5ynvZhd3Ryr97oM3veKL\nt7tcFPKXQm29aovGms/daoOoiAchqaxo9Lcnz0P63rjeTvvCc8d1EWbJOWpR\nbWO3cxGnXgVYRZON8QVrPbGZdGy+uhPRVLLySI0G7BYyXb1jMmwD6ISF5WWS\n1/3nnwG7AvTMpHeoTkH4Saaw29WVcq3K3fGVFeQCZjU5IRtUH/MrBY+CbM7V\nIXCnr30gN2zeKjaCr4xbewCorFl+PGGMJF90aQy+3WNuywblafouXLoRlhqy\nBJYGUD5eqrB2qzS0NYUFRzSktMkgQN7TRp6Q5vuJWK7RAwlSz/oF3jl9z0bn\n0r1VPuq79GCgJdewDLF4xDcbHvieTOdtjQOcEbmVje3tGje1fA9ogWxJ3PzI\nX+0VBUtY27/VcEzUq6kIaWmVGD6aoYzOuWaMO9PcD9gUFfbPbfTVQhaqIRpL\n6j2yxu0lUKyJttQulI4qiJTNxqPgc96gGrM/+8YVoQiVei4VWQckey6hDpSj\nJjgA/m0QeyLwsIYCHvFWxUCgKb/OvUjVkh0Jtms/VWSWQdLE8gBg489FyH92\n/2TR\r\n=OxhS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.4.0-rc.bb3e05a91_1549651623825_0.2769725578912312","host":"s3://npm-registry-packages"}},"8.4.0-rc.6e56d0b8d":{"name":"@githubprimer/octicons-react","version":"8.4.0-rc.6e56d0b8d","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.4.0-rc.6e56d0b8d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"31dc2c8db6d1b01ab03b1b6692362c9f0f7fb922","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.4.0-rc.6e56d0b8d.tgz","fileCount":194,"integrity":"sha512-Sraqyo49mzyrj677M9IvXXBaMhhX0KWAi5jz4Ci7PwDASMWFo4m5wlzHMGs397bTGCM5CTAXmuJBxvSuNyl0QA==","signatures":[{"sig":"MEUCIQDJ5rC3f2aUcEcKiBYD4wFbwi5AgUCZ74vM61USzVL8uwIgD1sVZZVnrD4d4XB/uLIRvpKLcthIDuEculRkutO4k1c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXdBECRA9TVsSAnZWagAArRAP/R7LxallIUwkfMVPjpa9\n8qlzjbun/sYtPZie2395xGGAeWvU8hg26cFwofgWOmfkcN+8xilOt2dljfyM\nTLZ3zKMVTpWekbqNbtiqeSY+7DFYjwtV00k7juRwb6nMInv68cGXs+C/m3jO\nNaJqDGXAX3Q9U86S7kFFzfY5RxIL74z8tUBq0ZGOXdzKXU2Bd3zgdQa3bLMX\nmcr04xMi++dtjYMYrqQ++XX7O7viniQuK8v7toVb/POZBsdruL2nwH8Zt0vX\njUYtzJl0jroTNAxavpTGgZLZNdYH4oXFQ7W1gWizeRJE809vUnBwnbWmmiMA\nPi2E768WjTw4+IvKSUX62JyWCOR/Smz7hatGXTRUG/+y7VXH/vImGGQP0yQz\n3omCMJKgPEwMrHfPVkqVSy7+x9vnS4r/LRe9FM9x2ONezuiStzHgac55wEZN\nan62uIWW3cEdGfrPgOOjIZVa+pmCy/4JZQXzLcYJ2LMIKauJ5+Fh0QerJgTk\n4IzDU9zvcAAabTd6pZolTWJQThAQMICxmSj4rrK0Hw0hRlKUMrWsICd+H4z8\nBbY5HcbMWfeOzFIHe3b3SGKubwOMwGjUqLGu7bL/24IzEBkfhPLXC6fJvQ+x\n/tBHvMNb2/lM3t5+S3MhED6NrtsRPCDrrX4jyYVfouC3ed9m8CMkrMOV1yWZ\nSp84\r\n=IcGn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.4.0-rc.6e56d0b8d_1549652035664_0.5596261715822761","host":"s3://npm-registry-packages"}},"8.4.0-rc.eb2892852":{"name":"@githubprimer/octicons-react","version":"8.4.0-rc.eb2892852","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.4.0-rc.eb2892852","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"8adf8e6fe1b1e459ae37aa1989e31347f8140d97","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.4.0-rc.eb2892852.tgz","fileCount":194,"integrity":"sha512-RQnbSbBMyNNq5YtbkpglmIPTv76JVnjDrWrZW45qXgRB3NQDkUCNbB9UbQgvEStMhn8+ORiwycFO9LmKf/3WNg==","signatures":[{"sig":"MEQCIGns1Vh1bq28eLDPyX2PcB01SP0R3ZiHDuseh8IK6FOJAiBhv1tXB9NGHRtjZad6pj+VOYGO0b7rgEL5bf7XsYC8+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXdVGCRA9TVsSAnZWagAA200P/2/ucJDa2NTJo4nJ9J2A\n1agPxlScnhmrwSHYuVdFPA6Tjm9AX/jWmCWlTnORvxE3s5X2vUQ0tVlbafAk\nC4D+KsnMneahKrTftqOQVRRwvA7uZUy4DmVFKTvK+hn+/nIGBiYG87JP1AtH\nVuN9n5mYhY57eIdac9OJ6Z08tRfSB9FS//QHKnutZYfMQvFipb+UNJChn2LR\nPp5GD+mVHC4Wr+7+9Yi6P4QBW4fbEwlxGFpJKPCuS839/myISVYMKI1FXIAS\n9OaqTrQGjm+/0uGerUJC5QUTaE/7iIprKEOQNVVhxTo7mU4XtsodszpmsxkW\nayR+uByq36uG4So+zsUxXExa+bwZAWMewyqEt+5Gp9F71cJ8M6713W8J3Uj5\nd4rV+ADXIDSuSD73HHJRLCgSXFRF9Yjuqz4ScaZOK7mvWr6rdXzEf9LKmI2X\nd/zL5V3qzr1ndRDb/23ZRWdYKoaKtQ0hWXe2yjjix1hvQyI3AEBd7jDUfB0o\nShaZnoiLE6RkBsj2K5p7rb8oe99WVSa/iYDLtS/MBlg7BTYBMOe54a2Ni+3x\nWVwsHfYMz9/b4Kf1tpLgzmO9FKmLUCsRwW8iqMETwaUJtNrBQH10su0zpt99\nPK6vcKko8Urtryt2ZINDv4CHDQO2CUczueWCjOnSC0JVWgLDmQSvwgAEcIzf\nxph2\r\n=eEeD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.4.0-rc.eb2892852_1549653318079_0.15566017607749782","host":"s3://npm-registry-packages"}},"8.4.0-rc.e9f41f07f":{"name":"@githubprimer/octicons-react","version":"8.4.0-rc.e9f41f07f","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.4.0-rc.e9f41f07f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"d61ac8bba3a9d97a8867c20bc7955a6c3f330399","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.4.0-rc.e9f41f07f.tgz","fileCount":194,"integrity":"sha512-GbvJXcfkiiKB89xlCi0rIH+jm64hR44iaPDjDkF3CZFz2GvTa5blOv3mlAl4CAAnqKVQCGUSAWXpS0p2K3buwg==","signatures":[{"sig":"MEUCIAxHOI9SMaM/nen3HOe+C1hBhEhKML39y4nCRlZ6nkaAAiEAtsLItZomKXXoFuW500iJC0HZEGUnjH/Ue+jH2RkcK34=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXddGCRA9TVsSAnZWagAAGx4P+wYxbF359Gf0d1byJ8le\nF9oHEp29M7DzMbRHqN+970WI4o2ZAE/MKw52WFNBY9ZdQHV7tBQy1ukOsNqb\ntmq1orH2vhxyuDtus0aeBc6cVQm/pwyD2fdOqZw5on/JZqeEu7r9v6oBM7B/\nCx475hwkxyXKyGgzmeXBcPiAT51t4IqiqkFYsPHlhqxTM8VWGasiD2srZteM\nvPh+h1hBBESA0YnkGUErqdTJ+Wd49nCmqo+OLv2+HihFH/f/b3YvIW859hzg\nnx4cIEmUeLRrvhOBBuf41N+fu7f/DG40aX8YK/L1dF8bwGrsE1Gij/MmEYU0\n2JdbVhGLX3hrQylWHZZqLKQq3HCLuGqiJvrvKY6VkCC19LPKaNfN7QQSYwcQ\nBmXeUHO8G97R5+g8GzF+lFjbjQd/iE2pt0bJhr0LgYlAte/6MNwo2Y2HWnGf\nDhhlxJgtNR3wXoasgNrnjJqcnbwy3TyDbOVUgkcGg2ZabVCiS/P4bULgbVFe\nTwMAb0aRY6xN5MsucSZrb1oKm2R33IxViTQK0hOviBXVdKNUf3fI4eVEWPNF\nVjGWOYDFMjPb1wXdGWKk1+EmiE0AIemyWWLVgABcAZEMqf1rCS0GGsFSHuHi\nAPPt2SF/XtAT4krtXTtNQx5P72PC0uz8gmIkHNGgjvTKegI9vxFxbsemxovB\n/qk5\r\n=ScFq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.4.0-rc.e9f41f07f_1549653830214_0.7853465186051947","host":"s3://npm-registry-packages"}},"8.4.0-rc.ef0cbc7":{"name":"@githubprimer/octicons-react","version":"8.4.0-rc.ef0cbc7","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.4.0-rc.ef0cbc7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"00d7bb961a662f7ef3134e0b397d4796bbe5a905","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.4.0-rc.ef0cbc7.tgz","fileCount":194,"integrity":"sha512-nV0++ACjBiTmbHP1lezYMBwAlHOXEERjLsRuaZEaHDDOlBEdJTDx4u72CZ/buZkuwFIK5CFAsqPgIg0Nc8uDRQ==","signatures":[{"sig":"MEUCIQDoHXEq76zcDTtIejRJLA0YYdWOnFfuZT1SsBAEsJjTxAIgHvrxwXyrowcZHrB9TPMLftXcHSaJyTmrZHPgdVaP8sY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXde6CRA9TVsSAnZWagAARTwP/RabYKbyPPftwGQlPb9O\nOX65pcsG4HTjhlW6pjDkfsoO3LiqvAqtzVj5MyhAN6m2mtHigSzSkuP0VwGY\nPpWoe6hr1wKrPrVVjJeURMGjwL0mm8b24GkTzQvDxzjvt5swVCaZUAYJJbxY\nmemGtaasAKJkvfNucXh63TEGTyj3knEKqrCqyEFRPBXIn8N4xo2tuTbZXZ5o\nwfWsiL6U6aUm31j7IybQOLjUW8wpdGglKWEIwMxo2PaLOk9RXVc6Wx8oS24f\nqaC30OTFXZMq1u7obr3/9PesQIc2O2qUGG2UnaiMyE6P+0Hn6VCBvb/3iub4\njDzRiglYAwObaZvHqlDum0EgiV3EZiZmzAt7CgSRrhDWAAtJHr2E8nYL6Y/0\n8Cpqp2MoLsRSH+G4Ggw99LIP04SI+APJE/TRhqOa1J4S87os365bUfyfnhgr\nudwYmJ8by4RduZ6B93mn47jW7sTTicBBj7UYc/KXXxtLw+7YTSaA3OJw/upy\ny7dTAm9CcNj98sS+5c2KHrMo25UxklStY/hyFYxSaFN7BUSEmpkfKZ0Q49u8\nxL6kEViYJ2K1EPnQ1oqW9j8/ODceAfkyL+Fc76zQD1zBXlRGi9ekvC0Fz1fc\nwY7T6mJGtZTQcQBxjw/NC/B23ARx5HBDNxlqezj726OL0nE14kkRA2o9DTsd\nuk2/\r\n=tKp3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.4.0-rc.ef0cbc7_1549653945315_0.42506961441089675","host":"s3://npm-registry-packages"}},"8.4.0":{"name":"@githubprimer/octicons-react","version":"8.4.0","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.4.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"1d112fbe12db4989d14b2049f0f2e71cc4884dc2","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.4.0.tgz","fileCount":194,"integrity":"sha512-TFuf3JfCuK7RK1laQMGXMCL/WXdyMwrQmbrLJswVZmwCm1kZdo3qkRhsfafg1RAWIhyzrZq0z1g93ArrexCn/A==","signatures":[{"sig":"MEUCIArVrx0N+VZfwOercECKva6Z2Dw0+YdrtsHGr6WJatEoAiEAl1nTAVo3IIVly9jJQ9h7lF5u7nssQs+hgNDz9Cx8GxQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXd9hCRA9TVsSAnZWagAA6VgP/2pgfl7zkMvbkbLKpzL5\n6tKOicxYEjPt3yTGpiPqKlrbne3je3VrcW4/nXp+CzGpgvf6Z3g7OlH3w60M\np+aCQjpgMO6OIVC8egMVGlU27I58eOxG9ncwOA0Y32a76fCWONvQkhEibus/\nzL68CV7ohz824hq8TJ8jh1ZYK/PT1JVGg427pzdxWkFnSXIqGyV56o3rVUGP\n0y7zIyW70r/QbBluuFvmnqnFHKCIIy5d6iO862AVg/7spbPCgP5gktvnjCz5\nxHyqPVwDksS9OLEmLVKyD98btIYXRnrSwhEJpjPNr9A6W9LPvtotQDYexRUK\nBQGDx2omfplXTz+ih+V67x4PiW2NUN82hg1s8pEW+gXM3ld9JgCB57hEsy+1\n+UOAe0AJLDAyQs7OfQA76UDG3SvZJYBKhx5b5lccAlR4HUOYyJIidWPFt8XK\nS45k2Um0ystMAr9YF1RFlkoA8/X8fl39xDy1G8wicrK+zjP1r3mbhTMUbWG0\nHYM/+XlcIEPDEpw90zFuzSoXLxZcGiw7xlonuzmTdJefceHX98PmqkFxwuga\nSXhFc9k2Nlk1ByxDJo/P92jJC+9WVNWO7niJlf2MXM9WTV8uKK4s58W2/gSy\n2i+MpMP7Mm95BHYXKsNdeVA+2pXxuyIlEOMmj8jP1E8MNFJ2XCiA5QRQqNaq\nGf18\r\n=nAfD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.4.0_1549655904505_0.6106051330489353","host":"s3://npm-registry-packages"}},"0.0.0-3bc65b5":{"name":"@githubprimer/octicons-react","version":"0.0.0-3bc65b5","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-3bc65b5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"6004456dff01fc41d21dcccb92a20883422fec48","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-3bc65b5.tgz","fileCount":194,"integrity":"sha512-DocWPCF5DSjsMSOEvQMLIDJVLNoWR/P3L5BdhUCFAOHbhjOqIJA6wMWcCOuCY90I0Ut7NGkvrXosh0x5pdE5Qg==","signatures":[{"sig":"MEUCIHQCGbNkArvR6fzyMYHs75oJLcISNyxZkltVsylZm6zBAiEAzhzi8zE8SdDyEF2/AM4QrgiL5a+ijN7TW2KKEi88CKM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXexbCRA9TVsSAnZWagAAih4P/3HLF58MH61aujVQsdfF\n2Yl4QP+uv1uLKQaL63/riznoJR0TLcY38mSOtpbxPZdMCPrq1wHKncn5W9N4\nF1b5czBjD4XBL3Ig9mVg8oJVTIwHkc7QqpGNT66ZFLCf9+rr7PettTvqMTFh\nYVlu3DX3bd5fH2gks9TdeJTTXm4RKzcO0YTIL8sTD1/y7eVtLEDV0fqZtD+x\n0OQqyBU9LuO3OyTaBUBXzK4ENMppsV4R2RiJ4UnkKGkUZ07olal6fHDPhKoi\nADsi6ustEJo/i6xxnWZAGL8faoPt41zvGltKHezlDrZ6CLCl2rdDrrPI2W7n\nErUEeeS+DEKxTbBbQ/S3iGvl4sbkXDVX5txZKQcCfrIAqmXPF+LPUEJdbiOX\nG/8xAwHsNWgbZH6WzOB1B/hLhCB5wEqoMrhaySZX6Xr2aOEPtBVGQUtEBtUv\nAYCkyvTuAOdV1ToR6m7Cin6VIfa8FiFoao4WStxHv6e54TmUcwMJ8HS+lPts\n0NikXRt0qzF2DlkelYCRXrliALxux32hjMk6Z0E80WzfvCtGFN+HM4bAinpX\n46dra13ECnP2OpqYwd7O3QIe3aNisX7CQcSEy4ApQarJo/rBLPI2Sju36z7n\nEbmvTLop4uh7GYAfF4oAZy7uedUeBoQXEy8Fr2yjxjUiWYNMxwwU2+erzMJw\nSYRE\r\n=yZuW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test","preversion":"npm run prepare"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-3bc65b5_1549659226728_0.8862744121021495","host":"s3://npm-registry-packages"}},"0.0.0-e70858e":{"name":"@githubprimer/octicons-react","version":"0.0.0-e70858e","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-e70858e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"433973f54faed8bac8c7232cd712eb19b6180c79","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-e70858e.tgz","fileCount":196,"integrity":"sha512-hlJL4Ch5iAtzwwkzcDkj1VQ3Yu22VlMIxHaSPueIg5bMm7bVr1GGJUyRHsbg/ATD09m5YuYluVTlYakoBGruiw==","signatures":[{"sig":"MEQCIFKhkK0LCMO96DUTU7HLJ64wDtZO8C0mX7IP2G8CphTQAiAiu7ypmdbLq6pkc3nm3xb5l+dAu6dDKQBqaCK6vb24xw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":356173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXe23CRA9TVsSAnZWagAAAbQQAIs094GpW5mDBcPcx8uH\nVUWziDCr9d2DC2vpQn/qJ8ZknzvTglpydWIiioblU9Ou8a7pCB+rV2ElPCgS\n9TXp7bD0/2EjUqgUjW/6Z0l0khaSI37wPGA0AQatz31Aq6NRduEzXx8tC3dF\nW4tQSHnA5FpV+UiJ/RC+/GJnkDa8ScjjTKd6VEvPkx0l/SU4g9qooItkvKJu\n5/cYeiXoKPKS2vRcH0dlS6sSIMX8/xewHAOezb9MbGEos8q7rn+OgoX31PK8\nr6fHD40LD6/vxoqw/9AY1pr+vff7+3TXTcpy7m7UtwGyHh1KNDSW/I3Lax9V\nFc4Y0JIcHrf7qvTQGqX0ErqiFIMFlglvXjY6DU0Dl5XwcM0I58FvAVOHzx/w\nXf4FdsnkPttezfSGpA0Q6CsxroYUQU/sG4hM1jdXOjf2R2jqSpQttfhFqMVy\nsLf3wqWlIVwcHyYHS8kvWaCPg6jJ6cDxiLNrTFW2eF1p53NqvM9JI2tsMvRU\nRufGAWb+WeenfZ18/cryswsRdKQgRnMSHC3g3rIwUM1WGwzAZm8uAFsVYTtd\nQ3n3lP30aUkqh4P/MhOPGM6ICBQPZNdsxu89T7nvfezn+46Ompggd0F/dLJK\nr0PseVfTKSrwXqUIy5vMDWhePU8+bxARiFGS+G/FYAAcAgoWD6nsc8O/mnru\nI4bS\r\n=aTOF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-e70858e_1549659575087_0.761441410992403","host":"s3://npm-registry-packages"}},"8.4.1-rc.e70858e":{"name":"@githubprimer/octicons-react","version":"8.4.1-rc.e70858e","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.4.1-rc.e70858e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"0b827c06d33ad56986cebc9aeb683d18b987157d","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.4.1-rc.e70858e.tgz","fileCount":196,"integrity":"sha512-yUy69GZ8yt75lID2HjfydUhnCaySJjSj4SkH6YALejfsqkiS7crCHkKUuE8kjNaw+1HSCaqg6ibwywB2mo/VHg==","signatures":[{"sig":"MEYCIQCPV7hQKe3oq637z/ANOZ1lFamcGLghjaDgwl7Pw85NTwIhAIaorwPocn9/7nknK6Avf5ZO8QYvqCuHI9A5cBq3W9wc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":356176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXe62CRA9TVsSAnZWagAAer8P/1WfWFUdl3ESTOe5J8IH\nHnMitD2dFNsSF6ctx44qamPmJVmVVmTSqivJsWndMeh6hA9NZLVSdJVfEiFj\n24U1fgTCqarC+N3i8CWWwrxgDmLr9nAdo+k7pAewiMsVuTGfKNImfAmxg2Ty\n/GrdVt4GV8AI9WU+uMLo+BlsFjtNsZnDRE04XxSqKqhFOJrOF2v6tdYFhfqe\nNwQQGTTmG9DQJk6AsK0hpV+Kq8lcozFvjLkdEusoGrhRt9SWDsCc9pwAN4G6\nMZtC2w270gbD2NdyRB1VmfgwgETIxVxN1h7AntlocdLH0JsJdjboH4hCzAu6\nSGsKI/9jpa1ANNScLLoCv0aMo0btrqHbg+fwP4vM3GoyUnlMAQA4QG0EFeU2\n05y7xR2j3GaeZ6c+s6OWoHRd8a70FlM+3i1q5GHk+EC30LrocTIq/sAYS4Q1\n8EByg12dIYRZry4QqjruvVSqKzS9VRodthMYWMsbuJUspfk8fcUdu+uhx/a3\n4NmZIEHQrryIiemW4m/NQzq6HYOUYHzZcnMc+Sw+88KeZnYJfYi+4ArmDGLZ\nqS+zA5PLj0UZ232dn/QINVOkx9tgjQsztd7obQtVDnutU8+F8QtZJNSKRRrF\nnFSAQ4IhdsDXtmaezR3pv2iKEVcAGllMGf8r4R5xLGl/2Lf6tpQOUDlaFRGd\novO3\r\n=StW5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.4.1-rc.e70858e_1549659829998_0.5666950657216481","host":"s3://npm-registry-packages"}},"0.0.0-fefd4aa":{"name":"@githubprimer/octicons-react","version":"0.0.0-fefd4aa","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-fefd4aa","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"080d3849fa859d3daabbb8b65386fc9a35b93706","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-fefd4aa.tgz","fileCount":194,"integrity":"sha512-l9TB/v0vYnKPs3SfW+Nprvran4jvYr2TrnojOm4BeSMsGqIwD45XRDez7HBx6tzd2mQOPdnfJyluAIx92lbV9g==","signatures":[{"sig":"MEUCIE8whaj8sNQucwCeUKDk+QACg2GwedL9oO9IxewrAn1PAiEA3YyFUnoqRYewSX70M/kpu3SUq4e+3Qu77OXhYrV+nac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXfflCRA9TVsSAnZWagAA/BIP/1YUXPfI1hJ/QEVIR1dR\naLcvUKOpZVaAjvHetDsoY7U67f9fg304Dh+Iqge+4s3Kme07a96RjT1+9J2W\nxQL5ZTBKnkFffB9fET9TXHVr2bR4VYWZEqvLB/rtCaMEstqjZYTT7L45krqM\nP2Wpa4hHLlB+kEIRDQyp2Z4sJ7cFH7JdR6sFWjceiAr6qD1YtDJDFh3I2MvX\nG/ws5WQ+b1f+Oshv9A853VexJCmA8/R7iqMYn/Gus7iFXYguQKkUDFhfUsk0\nxcQ99/eK0tL3+WglKt96qft5OSu3r7bNC9v1aHpD3NY4ggdJYYHVpFQZK9Qo\ne90ChsdJYUX5ZZZzH3VRDhK+pHoMJTW073AmPtEtr1lN+exwnPykry5EQrKg\nqYsCV6Ro/df6h18ztN1nLyQo/gI2Vu/2tgnkYR1P9fkbH1RTatGq9Oqb2YIw\naLIvkj0odGswCkwCXBLwsPedHwIgyxyEXGCdbIiPEym2i+1+e7rouoBT8HlE\nfjBW3A0ioOPs6bajsY55qq2axXgK0I1zlKROhpSRzuULx5xT8gau99UWxoz1\nbWWgvd0wg+hZVe2pO178nl+iW8ECcthVODZFv+OxgFT2UQBjb5HDMTn7Oa8E\n4/u5TUME9AnnMJ6cOoN6XCpRxcEdJ28aBVJIZg1t+G8an/TR9U9py/IhT5co\nuymp\r\n=TL9w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm run build && npm run rollup","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-fefd4aa_1549662181137_0.10666391923468477","host":"s3://npm-registry-packages"}},"8.4.1-rc.9e6fd8e":{"name":"@githubprimer/octicons-react","version":"8.4.1-rc.9e6fd8e","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.4.1-rc.9e6fd8e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"92d29fc9df9cc60c3122acb7797afe1834d433ec","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.4.1-rc.9e6fd8e.tgz","fileCount":196,"integrity":"sha512-gxGWl3muLCVL1ze+909AG8y9byC/dnwwF0xUAV7ofNeQpy7GVLU6Mnrmn8cnbmcAyrGAko6JIumGfPKNiGJ7sA==","signatures":[{"sig":"MEUCIG6doFzSjEDCx+csXULE9lS/XzF1ABOTZreb7veLDLs3AiEA9vBY91txpJb33BAjeLLmqmZRq9NYO/QrwDvsZRcQXRA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":356176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXfnYCRA9TVsSAnZWagAAZrMP/3DOmFn+CgDQUmvAzd1E\nLhdTptEtZSvtnWwKmeF41jz9WaCM+9Lq6oF9x7OMFjh8EYL53hFgmxYCeabF\njCevkKu3I7boDQXyqGjofAXKm3D8KmY4OcoRmR4bgDUTmeLDgdq51jamAkEG\nDdq5SoyWd52tIwwgW4hci9q41f5pTYnR3BGbnl8P4iifcalCOxfzus5hX5rI\n4UsTNjYapLEYJQaHgRs4P9PBw+0jhzBHAsXRMBafoQS3DxVikhaasohUzueY\n5c44wAdg6PY6lcjRX47o1pGCVUq8McCc6L/d5B3acKDJVE5W07CP/j5CBV7L\np0hkfV4Tdg8iWEFfAQixR33PBGTY9l/F6AWGFeOioYiY8XtL033eUUVSfNkX\nLCx5/kc9FEP6VjFglc7gW6MG2Vtcyfh/XGFzdobydr0tgY8NvE92xZ0iSwne\nu5xUOOcryCBX/SWvQwKkWd93PE/jDOetKbQHK7OAIz3i9uFC+XzQW6u5RG6F\nopq3q2YDZNDfyYnsFugbf5U5z5WmDvA2j9jKhnxwVKbydCmajnpCIPPacufH\ne3y/g6dvdu+rqWkAsKuNFoC6uLa853L/ftBwAGfqJeOU5CqN68McN0tbC4DQ\n3kQgH9hB6i3YYMgUCRPv6dhsxI9yyuOMiCK+/+OXz597gmADOLPLvmvkBgqk\nhuAy\r\n=YC44\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.4.1-rc.9e6fd8e_1549662679787_0.6027830785356203","host":"s3://npm-registry-packages"}},"8.4.1":{"name":"@githubprimer/octicons-react","version":"8.4.1","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.4.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"233f5504f13ff14b61c51584a5b6e607163192bc","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.4.1.tgz","fileCount":196,"integrity":"sha512-oeurKvwQkRSlN8tCOiZ+IDUiXW2OWDivSBq+EmijOiRwWkeV2OqhswsSCthXI7FNRWL+w4NC5hsVMWW7WzJfeQ==","signatures":[{"sig":"MEYCIQChmaNsYktid3PSzERtOTEMejwP6ulvFJdMY0Vyr59+FwIhANfhZ1X57K9eIG+WhVQ+j6OX8Hbb8UqRMpjJqB83k/8i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXhBYCRA9TVsSAnZWagAAWpQP/0VXZgBQi9zBspdkMXpf\nmkwB0i36rUfzfywgLa6f4ULgbQZqSyOLl28iF1k1XRReUhOP/Rc5fC354GXs\nUMXcfO8TgV19J734uE885SUI68IyeDjkNwa9FZvHk1SODWb+wGDrwpw+qFXr\n7aaMjfVNWN72sX4wRVx42n/6X23s5Yen78lWss/NkA3he4mb78j3pgnp+85y\nAzYUZOGih8mAMgRNRHM6cgSH/zra9HqL8bk4MuhDQ1TSx8UbSm0q8h+GxrgS\nUPFg5rSR5ZD7ljxsAXia2O8ohI3WPVw3/nccwfrRC9rdFdPXIugcNnNR4Zd2\nc68h/RQMMSGiei6xpu/vmyHu9FZedeUubRQWgBHVBbhbnCAON43drmxKy7Ll\nWYES327yGgXbwyeEsqt9yzeY8vGOWUNRHfaGUpW2B7RffAoDUD/86B56hx5p\nk3Yk+7WA691Rw1xucBKhEqpj+MA8OBAtz5D+r/3RGovKS+8xpAyRo9rXsJZ6\nkgf7Emx3CcE9BFbr1K7RC/POfbJ8qwfYdp5r3z7ElmaBGOq16nIVoObIgHUo\nhHTQejh5Jn6GuZwZLlPmSFwj+OPQwNL0O7/pm44NNJZ7mA7wV1zXB3J+lQfz\nwqAnSeoHRQOuoArD/4oait5tqGUkZKboZZGxuryzPuu7btHP85zwi7DRdYTq\nxB81\r\n=oaOE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.4.1_1549668440260_0.4177959280095829","host":"s3://npm-registry-packages"}},"0.0.0-7617fe5":{"name":"@githubprimer/octicons-react","version":"0.0.0-7617fe5","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-7617fe5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"7289acfd81e64264459e2e62fbb1cda0ed7767c8","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-7617fe5.tgz","fileCount":196,"integrity":"sha512-Kx8/SH6Tu7FtedQxYnpV87Ktj/SGRWfR/lP1/KzvN0mFdwurLwK7CxlyxED9MwHw4Eadp2bR75FIrxrx59m5iw==","signatures":[{"sig":"MEUCIBdb7UsXHoOHWE8ry/AHgsrG72UoNU55zDMUJ0qV6F9OAiEA5b/SNHVuFepTEDIW1fmoDXbEb4uuK30hNtzKXlxi5os=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355794,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcYcedCRA9TVsSAnZWagAAh0EQAIIk8Kp85H8ff3D22shR\ndUvQc1gY+xQQgDTkmNstmHPUydzhJM+zFgZx6EjtaibdWPz20AHfGTKX0uIS\nkDags1mfqRpPBqsNCVi5eROmq0Efs7ZYWwpiWjkr/eJY5YwUEwermw4OlIdy\nWDtCEpdYAWzhv7J21jmuwV8xvy/ZE4eo0yg12dAordE6qamKQnYaqFRUxL1t\nlkxbS76+bnE1UAHd3nwdPEe0QLhlkJRMTee6PY9v0jOImXb0Dt9UnuzbUise\nutQPVhs7yygX1wkCfcgLe2Eb1YQRkRkpoa36UY0BSgMwc4WQH2ioS+VJZExA\nl8zUmO0ojA92CO7DTUVYhU/d6yMsxbuCmXIcu2jE6MqsZ9cQn+lJ82AKO8OA\nKIvy9sAjbEMSsEY6RzgnIzJxNK7XizCsTXKCtQfYfi3xAov1WNl2123IuFcG\n5dl7mO29FiPwtFC6vt/aHApR/ry6qh2ikXqFQJ1iMufUU17Bef9WxfqczO0y\n5oG3NLcNFAEoS3A30CCx1o260q6NKBqEwtHJ/fI05WZOBvXXuaRVZP8Xvg53\nFXhXc2CYpPqI+1Wxpn9SKfx8br4D2rDH6fpaE4STY714MAvNTVWyQRnqTaUf\nF/de/NJdCN4RVaFydwDTFP5pSFun9n/fG+pTIZ6P6dPW/66Fm3C/bsom2Cnt\nUBe1\r\n=dJnw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-7617fe5_1549911964613_0.9201778552828126","host":"s3://npm-registry-packages"}},"0.0.0-d317f23":{"name":"@githubprimer/octicons-react","version":"0.0.0-d317f23","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-d317f23","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"136e9bc9cc9db3f2b24f0081711c6eb1830e2033","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-d317f23.tgz","fileCount":196,"integrity":"sha512-5FkRoYnRnuBOq9Khx2EgW76unjEoLHY7BnVifZV1M5kGE0ZFkx5LKXAWB0YvfXPQzVOONIk/M1HG911thwnRvw==","signatures":[{"sig":"MEUCIAqdNo8YhJmY4+0euQpDIwEzBRA1r6Cg0D2qeDTQ4JFwAiEAvLLk4W1x4zW/42XurwH1m7WNmxVFro22Xuqd2Hm6ikU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355794,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcYcmbCRA9TVsSAnZWagAAwigP/1EU9zIMst5DIJS/cgV6\nntXA2UKbCDSrLNu347J1zapcLnCxJtw/Jl1PSy0SZLaKs7zdkr+2HS8uWF04\nep+Wec7zv3nMAh1buKcVMmHhTKXdxqiJSalVDCUlORGdj4WuGHPn3yf8xQl1\nyLldQW/kb7hseRdOBTfbiFkV1RP4G4GUqzMikw83F7EUpHnMClsTq7SBirYa\nHPwURncxAeYL2QRpYlXnTnGGdtixTqMQjV/j/3PPS3Nkrqz3ncudhWvt410e\n0Rh0nNfdeHmD6PQ6XXk85ZYm2xZDc0hW1uW5s4QnSaV13/qNY6OMDnMJ8USb\naHDY1kV/ATktgtxCaDnOctr9VdKHoPmz2p9m6mNV/Qj1Ca5FprpVwzkul0K1\nxQQbBpDP8+aZurg7oSAyitVAvTbs9atlNQKcMyfHgcEScsm6q5+2RUpMBJSB\n0yiRtAo4SJV60iRVTWakKvq5OB3wabxOy5GoCCiVEmvXJS8OCyKyWC5tx9f5\nQbACRx33A3TysHQiZZyhEQ2pk89T376E9m5WYts2k6JBRUSgzgkTLqa0vKY/\nV1VjKsm+ChG5Foioh3KNa53BLezDXnVScWA+JGvOzz6fQuOQDvchmhFJo4Qn\nU3pMGLKHLRyJsjF68oTQ9vT8lGQMTT3RT9YjrgJR1ZgsJqFJMLn2MDpMy1Y7\nV5ZS\r\n=o/RR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-d317f23_1549912474802_0.720673292908534","host":"s3://npm-registry-packages"}},"0.0.0-1de7750":{"name":"@githubprimer/octicons-react","version":"0.0.0-1de7750","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-1de7750","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"3c420daeabbce6c14bc4a81d9c75cf030044e8c0","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-1de7750.tgz","fileCount":196,"integrity":"sha512-WcNe4dyBqfS/G1YxPbkzUOOQwmqpEHT8zeWIvpYuTvYCy+xaX2xX1LYy9cOFKy8dkJMU7tfmpe68OyhS63dqRg==","signatures":[{"sig":"MEUCIQCCDLqYHsVOFzyVeqCTE2JKCGNPqD2wqrWhlJ0aYEUzcQIgNOleZJN7OOK1SZTKqo3yXfI2WBYSTLhVRaq/peTsKSQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcY0epCRA9TVsSAnZWagAA048P/R4cAJHNWdZqksK9ytdd\nNwKyTIUiZjUTSGn3WBe3IrWBo7DEybgM7W77y7GJY6P4jsAtrnaAYGKrFM1q\npp1N+dl1dwY+nnnOMulNGtlWLdoTM4ANet2IxkXRB4f460Ogp+BB12xTTj/e\nRGIE20kPMzzOWU+p20Zfs93O7qXRpic6Jsw8VcAH82aJ8ojY3iPbaXZCsxe4\nK9UPypFLIaJv4nprU3RZ5m24Ep/s9uzTJTfIzOgx9i9nP/a4LMhbnhP2PDzf\nFwuI5sMlpsslXWFbp4gJMPDfdV8W9td+S5FOWgyGGwfkEDPrSXOSk1FIOXlA\nQNOx+ZRP2fb6LpVVK644nMy9HXek6f9/tzZY8kxtREQ9os07JzKeRhEsXwZj\nHs9l46tOKOCgQyWZbCLTiv57w1hDSffUaya8PwKFYHbxJ9b2hvoKIoyU3CkI\n8dgoqB7kumuI4AumMEI3/QFh6yVaJ1U289EN6X4umdFbHhUCaWCl+nZKA0nw\n5I6B5mL1yaAM+vPhaNuY3mGEX9qWg7+pVaWjqRm0AbPJbNT4S9fz/fomeeU3\nw8fdsw+lrmlOHGj0VFn6sPli8e1hwMQG4/69Eo/WP2nJWbKJ8ZJVC2X6j3AC\nqlmrLJneCs6GEy2WDzt4euxedf51oB86uWc2uTqe+nWAZ9s90bGei8q9GhRS\nFM8i\r\n=QBYo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-1de7750_1550010281201_0.8171889662739564","host":"s3://npm-registry-packages"}},"0.0.0-082eb92":{"name":"@githubprimer/octicons-react","version":"0.0.0-082eb92","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-082eb92","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"b46a7d01c28e5c8ab02670a8aaae06061491ca0f","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-082eb92.tgz","fileCount":196,"integrity":"sha512-wnkp1gemW4pFz4OjKk0VxJtPFC8OtDzERvbq0AYvKLOqPUM+uTtLdQJZWsJq1MdL5oKaCy/36tH9icS+P5MXRA==","signatures":[{"sig":"MEUCIQDgOycnH62PNkqg1AzIskiL+IkiYb+AIarKxPe+8ek9VAIgfDiAv1LA2PQSv0S4up/UoHlg9cpBHoAOHxm5PE1B5R0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcY1H5CRA9TVsSAnZWagAAGP8P/iRg/pr7FJG3IXPFkbtS\naJ8l5m27K+ConYTeDTkP83tXSBEeMcj3Dfycg6XHZXg7DZAflNSNH+xwScOJ\nvPn5Bm7GA/H/zNdpg4gAdxqiuy1f46msqk6aRX8fGtyGvRwhq4Z/kiwoPvoT\n62wlvVthJe7YGyVQxSKQMk5qA1USE0ki+ODc8bL1YO9zEj1ysCPvEiO3liQR\n3szx1lVU46I3InuUgYw807MyR9kuobOURXMGY6YjAhAw2UlH2YGema/uFZIJ\nhl/Yi+A0svQbuf7sDwDYGB5x0+4oUTigDEO9rO84vhwLJ3CJveeOYr3tNWDM\nEHOdPy9vy4mjOG7QF77BWOOMJ361bTSyzp1gDmZqGCi6BDPTqk0sIXoBfqAQ\nZVmutUoZQgihs/c5xrjdA4tN0cXS10dyPNxWOj2nnR6GNlUrJGrP1BW1TaFh\n4AQBM30hnRnUNaKVpLahuKqLEP31Qu/irLBYZDXDdR7fsknKWLltgKTYf2QN\n4PVp2A6y1cMtw9SNnGG9mozzZjYS8T2FeDPJASH8YWxu7L13/LS4zuuZM/8S\nc6e2a61fs1kZT4NLSR6U43Vi84niwqxcjYZu34T1lzujAd9xY5MaP3+eY/Ka\nSMfxfQADCmt46ZS7lGdtPGxwEI4+nLhtINlgeHgsWVh9ofC8JRuNpOTZUQva\ntLAH\r\n=98fn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-082eb92_1550012921147_0.9199938984371989","host":"s3://npm-registry-packages"}},"0.0.0-3f87998":{"name":"@githubprimer/octicons-react","version":"0.0.0-3f87998","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-3f87998","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"6efed78bef2060a903c2ab5e7c04c76f3b6c1a06","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-3f87998.tgz","fileCount":196,"integrity":"sha512-x9Gw4a+xmnIVZpmtpKpaONU9n5rKXzfJxyhCfT0KENL6+Jq3z+S5YfpiXkN8mru9HN4t0s88GTTlk9RkBgeEEA==","signatures":[{"sig":"MEYCIQCiGZw2snv39lopuz7zfYLJ00SMICgIm05ILdl8tVDScAIhANmn8WlQF2z+9y5oH5QDC6ZcqkSLPBHcnNDFZuIZn13m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcY1eoCRA9TVsSAnZWagAAk9cP+wWaq/Q9byr4Wm79SmsP\nBUgCw79ysuBq0UngBZsuXj5zPIhB2lVqzY7GPlhVQpSmt4njktQklGUCuC/u\nHiT74xq0PehI2QF0y+WroA9hRDKiArATw6fbmw6+suQRuMtxdsq2WP+Fy9Eo\nj+eLcef1hAH9wLU+EC6KARi2CEu15zlpkGwmTmii8TLEagG/c3n4QhixrM2e\nJiy7kaL19K2OZCQZE8Z12OI9Vonae28DQfffbaP/ZFPkQzjHToeddfh6wJWI\nkoDrpd+CsHNA6iJ3491s1a06I+gfqpGzGpIRdifa9akl6j8VeQX5Xt2gUMMU\nVtuPHq9sc0oa7M3jHkJueWyD+9wN6JKb+gjC6zU77bvQ9z31rVIzV1USCl7d\nvSA+De+qyZIE+cvVXJxPmNwoN5dfYibgWPvKhdvWz5w04lmy1ZHL30Ztb2DO\nR+FQ4DEEW/gw/V7UZe3m98ki+jKduolFon6zkbyPulddCiI/N49JffV84kCj\nJYgtW/JSmQvjHlOG6VAmrQ93ZTrGTGft+QIl9sWIhzMjfantfuH5jiQeRdkp\nAQYIjFO7yI+J5elkTZVGi2YJRSuH5T1FowfOn9d7mlmIotdlQ0Ueb4HZK78a\nb25zBDtIC6w0mshn9+HBdqjKsYTQVtl8zB8lrW7cF/vUkqJYxsTaQVqEJ+Ou\nfvDO\r\n=+36g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-3f87998_1550014375805_0.5236805313717707","host":"s3://npm-registry-packages"}},"0.0.0-13af5f6":{"name":"@githubprimer/octicons-react","version":"0.0.0-13af5f6","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-13af5f6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"d4eee7776b9fd9ec03095aaf46911788a93dfa79","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-13af5f6.tgz","fileCount":196,"integrity":"sha512-FaQ+sktItjznDh/AQZ8+WuamzssZg8eR8cA8VFJUw19/g2eVKauygLYogNdp90qwnBMQvi2M1wjFk2nw/TqNvg==","signatures":[{"sig":"MEUCIQCtEy4zrBpZm1Zcv9rfuxE4RfBBV4RXnM/ZbmVKChxBQAIgWkNLr8CvQCnBZnz0TQ8AyHp8OGQTa3VzxAf7IqMg/yY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcY1y2CRA9TVsSAnZWagAAAzIQAIR6IJIe/q8NzMSb+1qp\nDVNYp231qgdaPZTvF4xl74vLNqOlB8U2/8Mj1nLzEeMvb00vKDJ5rSwIaacf\no5JDcK3kbn4P55H017LkliexHZhG2/hBeMunDjG1TXEBNjffFe472qsbtcr6\neCLvNimfTBZpmQa5QAFDDttfDDosTGBncEfcZOx0NFXz6pJit0qDNOWcAcRC\n0TIPARx/7+ESbQq3XEPv9ovnIE4fRVrUZ1pJne1FNu6SafRRfy8uaV5DTNGF\nBI9xpLyma8YIGPSEsgAQu4Vtj0ZHoIYrO6Ye6kgByez4JqttQJfoMlJHQ3WF\nsmtOjMSrc1PS8TzccEI5DcP9tkGUIbLQuP4NtL4D7dxnI6IEKB+nZ4XfhEHA\nyla/sf82qm5HZoEcjKQ+FFD/pWrWquivjnkJP3hsWjQCYfUHIe2AGu+f9THn\ngGvb/8a5cvyb3kKLHByjCUfm3vqcZVJ2wpj+7a1PgneAdMZe5SjfMNI3JhHo\nijJPS6iXi5CvY7bZTA+xNdtCDKjeFoMSDLDAm7rSn3rEaTUYHv0sMlUxoIBb\nHE70MPPo2HEof0sIAWiwLRA+m+I5VZLZ2TpPvwuJ2o6hDinXsy/t+ybV5qHl\n8wHaA63PYnK5ie+w6xqLbdH+TMkaXrNHEqDhuPKs+/62DWDAW3iUHwVaSPHe\nhzJ3\r\n=g0d/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-13af5f6_1550015669295_0.2624676524559062","host":"s3://npm-registry-packages"}},"0.0.0-8fe30ae":{"name":"@githubprimer/octicons-react","version":"0.0.0-8fe30ae","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-8fe30ae","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"c9a9aaeed4a85639b9ec863617b254414ba5ebfe","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-8fe30ae.tgz","fileCount":196,"integrity":"sha512-le9FKid97rAn443xVKmhzvLC1B9guf/JRyxiYnMlE7GloeSwPXglKVQ0b8kaNCjv4wVGHMRfWtdaVPSJMEg14A==","signatures":[{"sig":"MEQCIBjT1ofyLobQAmRZoVao8KcXgqBdXdEDvEr0qvIiwN59AiAAiHY9Vgfcix8bEgL25wOKMvNllThlXjGSgU4LOQVxNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcY2AuCRA9TVsSAnZWagAAXGwP/3R4NpePIizf7Z6tQSEw\ndxyT53Su23O8WliQTdrVQRTAWmvottPHYi+RcgQQH4Jmdq3I1MdpaZdgdt1d\nqjEaHnTgc+XAtm3m8rNbAEsqjeHE1Us3uR/8x9rH/0ZrkkEh61J0I94jQZF/\ncLzzkZgmO8mz+sPQvPiJ1wdUXKGfXyttYTtN8umB7/P3BNkvbny+vqjUUfI4\n7lQLr6Dy0vCrqv25fJ+QEAYrq7kLuoKImflhuAz8/RBsGO0uyqZ6sNXUC5+Y\n3/eu5xIwJ03XLBjWxH4+lmEQQloFdyJxGPtTNjTj175TD/gtH/EIO4ij27Q5\nR5e7tqS65ZuMVix+2We5B5I+7pUXEBsvfhT5oz5G3CfBS6Z6f6DA/i70QU7D\nB9brAeKYujOulNcgrvXvMjq/VP/KT1oj7Nh55zmRrMdtAP177hFdHbDYku7g\nhQqOClumLPgdPtLftVAA9mfSScxXrXrZBMsRyhbSCpOdQgQsddIJQCmiqYLk\ns0w7+4QHDKDP41yg0LWxe25+vjn2XPM7WCs5TKU2sHAVsILxQTe26uZlL7qe\ntli4/OJ1KrFpfHWvEVTpFb1j6y2ralreWDhX478OevG967feLv6vN02n/cRV\nv1h80PPuA/FlYZ1qCFW9DiWVhPH9HJHNdTvUdT6s518O+2YJ0++KAd82EJdK\n/aSf\r\n=lZ3V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-8fe30ae_1550016557815_0.2648725650693091","host":"s3://npm-registry-packages"}},"0.0.0-51409f7":{"name":"@githubprimer/octicons-react","version":"0.0.0-51409f7","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-51409f7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"980d9eefb6a080a7fe3341a0cc414e2ec6074d14","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-51409f7.tgz","fileCount":196,"integrity":"sha512-1p+EMLwUzGSqQTHl7HayjwjoAaUyR3lk3I90lBu1iyB8iQt0g0ydQ6Tkw9xqNL6e+OH6squ0vUgG7BTG5CKtAQ==","signatures":[{"sig":"MEQCIEmhtV8XC+eYHB7o9BeeaqE7xb7cu61gmR9ZBLpbKK6KAiA/c57o9OHlNidkJh/ti9u7tiWW9HUJvBgDTzNrsTK6bg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcY2QfCRA9TVsSAnZWagAAVP8P/3RoT5w9VXMqP8/nPZcB\noWEQ+zNxD7q6VyoDioYD6ppGV1yT4Pgy/WKbo8OSvGlZtG2lryxzJamWMZ9P\nTztBmGOpt24uWWF7xFvcMvrkjMmBvPf9lWwgqVTb/nbowPF27O21nryQyAq6\n+16TEetaAS6o/aLwp/4icpJIQ30O8qbqTjQ3ai4orc+z3RM++51RyFkV52Os\ni/Sc/emZSXo8ckWVAYF2F1PXmtUIIdYbTlKzOE4rkQSPi4Q0MhVbP3l/eYod\nr2yDWJ4iwLVMAS/NLLQqixaFEMTfCDOSYBTigvMlB2LXll+Pw9OBt8qXmdgc\nSLqwVDCuAqbDUmPdfYqmOeDR0aHdbrcbsYgQWBE3iKse0s0buEBQ0zDkhSLy\ntz4yC0fIu3LThyMm22bWDgsYhNfzEIpLnxrUXrY2K2XceYoUNYzmRylvBNvs\n71JkhURGIjGTxcBWYReFzRbkoSebMtXSJR1KKN630xrovN12kLgFWkSEUKr4\nxBdR/tlWQXALd5SiZwugtwr40Bfj8LtesArcLTsO9s8XLfsLZJOCX1yHIDFW\nyYlYWJ11tbZEBBcFsyoLGzgp0DLsJlAt5SIDUxWQwoNkVKs1tnpfxkqM3UaJ\nUj/xrhVIMVL7Ut2L8ptligwW5fpu/m4rWYlbPaIoC51ukPOAt9FL5h0h0A03\njXBr\r\n=sLUW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-51409f7_1550017565919_0.5688262502876149","host":"s3://npm-registry-packages"}},"0.0.0-af8bd6a":{"name":"@githubprimer/octicons-react","version":"0.0.0-af8bd6a","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-af8bd6a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"969ad76a56d23dbd9e6f9d8f18b27b8d1c858b86","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-af8bd6a.tgz","fileCount":196,"integrity":"sha512-BF0znp/vL3chcFtK08a0A165w8cCb2CycV4smHzEer1KwU/yKbrv6cBYcqqgdQaMEu33k3crRzPxv5V1LHHBTw==","signatures":[{"sig":"MEUCIQCr3+QDyNdP/RMMvFjCHqsRU9CTYkfKIYRIaYSxQTybugIgKbLrCGcjsHh4fDz9i45j3vlC4EQ8TUA3z72yRaAw1NY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcY2UkCRA9TVsSAnZWagAAbEoP/2W7/NDAlADJYVPzJNon\neBdH0Xt+ZK0WyHcR378KnKkI6NS+HYSvOffNPazhLENkHRA+yNvKZ7bRxEUx\n205WYy9YSK+HRoy5e7jKBh3i/Y+0NxrI/3mUQWEMxn0zRWt8S6kz9DUQQ/oL\nzEDlWpMd5C4lBiSJ5iBVQ6z7YXmiTAH/AWceq0sZWxDeuDbtnfq2QI2pYwVv\nBy7YOgyXSGxeoiKriXE7F7pQH6AxlNFqs+QTk1hkyrIlGzabvFukbmZc7abF\noh4xBwNztmbxr3FyCqvI8EqJwNCz0AMYKwRQH1g1basMSWfkukUX/J4fJkAB\nvRul49abbE7OKUBFEEdMZMFbb1/iFB+zQlose8p8CGzEYLCgKWcd3LZ2wMQx\nok5P1C8nSx5LJJgZZhv+YFF8UvGs2g0XMqk5PyCUQNJeZ2niJH1ZbP1MsG0V\nAPUXrhatQQLsPetCJAOAbPngBBwJmpUguggopgFL6uofQwuOvhi00ROsNhou\nsabopIxb2un1ZT1B3337HFBylMugSVNCVFC32M6bTvTMXTyvmkFfw3FUBBtw\nYFdBmfIE3L+X4j/cyetCh57FJsSyrmcYrraUDETEo6bUeqaPZPEedWppXdHb\nIVBVp/whrPTdkmxm5g2qYgzw+QQDAsUeqCXnoO+jd4jy/k7RMjBy5MoLAEET\ndYMt\r\n=/oC6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-af8bd6a_1550017827892_0.6415821689006125","host":"s3://npm-registry-packages"}},"0.0.0-61f3707":{"name":"@githubprimer/octicons-react","version":"0.0.0-61f3707","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-61f3707","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"7bd8c6ba29768a83765971614e1598a0ce20b43a","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-61f3707.tgz","fileCount":196,"integrity":"sha512-Zm2zZzhOzUtZ7s7upTmIhG5WmdfTswFxihjdsQXeDI/eSZl6nuzpSoOa9vI1svsmxUgcGWuwuSLh6LMYMZKqTA==","signatures":[{"sig":"MEYCIQCemi5mYxRBlsanVvsi4VLF1lVbMmDQNG3SqvD/moo05wIhANMbK2pL0pk7jRNeR7DebhLTy+evTiKwMNQ+OIPOUyLB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcY2gWCRA9TVsSAnZWagAAf0IP/1VeP18cEYd8Ky6+Srye\nPo2Dr1L9q1nKCgmCIXnXyINDT0ARILn0KPvwC13RlJwI3WcaPnXPIEXUW/2o\nGYLX8CDRRDsKdPtOD7rOscFotUEYiPGJ6sWtFf4T6ZxU8mKouMJpq7+6zkB8\nt6ddOIbYaHpK8Mr/41Sv8xrhhs/LlWY0eSdddJ+fkuNepN1/Ugy+lXdvzPp7\n1L0RGfldvzPn4XXQK4mKd9zLAm34K0iSe/jG0xBYzYfZyIbhXiajWsJJtn9t\nNd2Pa470bKt/DjKYKCnxSr7//tKDdTgD3qDOEqy+u66CvycTmaenvt9pDust\neuH6pavLXmEDgnrNcYj7Up65Vf3QS9q/CeoqCou0o7fviB0rQP7wZEY6NFGc\nVjvLzkoYg2nm8Lmp9u5VLDiBogPNGjMMIiZa9w8N6xXi9hgpfnHZ7nZ5QIdG\nD3JmRmwmpRgsqCfXE/Pafi6c3Jxl9mD5fFNrVnX35UCM7w3eKp9Z5g858iIR\neR1g4OaRbr6/dCEAmf4tAaYESlFPvVnlyCpHPtmkV4E9P3nbsF2/bOsDcCx7\nIPKV94Ue7j+FS5/37Z8hRPt05uGuFoUjhFMqLCcWGvJxZJ2oQkZYZboI1HC4\nwIVWb944ltffyAJTCFoXu7PnoKoefuMfcg9y8OMOmjsLEuE9+ea6tX5tbDpp\ndatF\r\n=IVm/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-61f3707_1550018581614_0.513764399329931","host":"s3://npm-registry-packages"}},"0.0.0-0962ea2":{"name":"@githubprimer/octicons-react","version":"0.0.0-0962ea2","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-0962ea2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"f658f0811bcd0aa4915a452b0defa6974acbd6ca","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-0962ea2.tgz","fileCount":196,"integrity":"sha512-qid6jE8yTQuSxTHPL5SbQRHv+9ot1EjlHgj3qRQgqrOPMZe+BtU/Zo2X3bGjmgX38ZYjGXNvAhol7kNk4Z1Jvg==","signatures":[{"sig":"MEUCIFRSwMx33tBfWaSKBKrf3qpBUR0V5uNvvpT6XzIA6HNNAiEAj6iYTo0X5NP2B1LDf6m8zmDHQjEWxT8E0cOySxIwTRk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcY2nTCRA9TVsSAnZWagAA6eAQAJjcDEEZEGI0DMErqLEb\nl+fOum/iCtxZACqTUi+SoZURGds0NmpwtvjCnTmF2YvU1G7iXTMYr1U84+sj\nGBlYV0LICxXAyyzv7N4527PRTbWJ4SJyyu3jKNEcLAcgvTp5rnUEf7mj0O4+\nhoaa3C4xm8UaNn/EeWafNSEc2LW1JgBnM8sXOr/WeAvNJCCb4tnBQq+2DmHL\nm/CRRgX3q+xoESP8Dl6TgIhfd8p1+0nf8X9QjNx+ikvMoUfFHb6tO+E82LOG\nmoQ3mtCjfxkuKfbFdpNfACFTjj566Ug6WUaV+UD3dlix/JMaPUHEPPPdZStp\n4VVMMhvVo4XZwIBPWdr7Yj1Yu1yG4HbSZYCqqW3RMwvdWUc02cyvelugBKJe\nSmWwbD733ZWTNyR6RHclpjlMRZgB1XYev3O1gMz7LWgrG/qMIcxZsyyqr+F4\njxNU84UyTJ/kaFZr5QHXK+cUwarj5VEV44YFyF5rjBksJJUvwW4Cki+45o5u\naTFqgDN8CXWTUjZ63sThn+x/QqwLS2gYq4HuoDHAClTnndIaGAcyeTnHus8/\nvsDl+COQ1hKahBkhooEOQZYcaa5+NCSiGkEe6BwefgcNttad2S+yEDNXkXWR\nh0xeE6RkDa/8ZG74I8fO4sfQRTxeE3FwB/JFISpUACi2mzLv3y0n11qhIZxR\noRAd\r\n=9WV+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-0962ea2_1550019026619_0.820700862053567","host":"s3://npm-registry-packages"}},"0.0.0-6a42072":{"name":"@githubprimer/octicons-react","version":"0.0.0-6a42072","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-6a42072","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"79b890a99165e2190813aa63b96b0313c7ca5648","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-6a42072.tgz","fileCount":196,"integrity":"sha512-XfXwURd/XsqXPiH9SEpuOY2yWxk2gSkJzIgnJQg/t3wwTKSEeGpcwrF2XBg+KoBUm8BJHaFjcGhm1ygCXdx/lQ==","signatures":[{"sig":"MEUCIQCf/ebyf1lgjphTTHo6ZzR6QiVN6c/a1Xwa919YEpSOPAIgBU92t/zI2d+UzLNThkThX2Yaqa3/EN/p8cO+sUp/w7I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcY2qqCRA9TVsSAnZWagAASxwP/RQGhdp7MbdTmS7KBPyG\n1ff1TJhq8wzBvn/n910bdcRgBU/vqzFaJvQzdyfPbvK4dLGgD0ONMtZaQXqU\nZtuDpo69mKnVSdUhagFllQ2190yEMHQdolQct1oguFaxnC9V2In8zHPJ1Ix3\naZHJ+TiE6qSv8u/NdpiK18Zvzu9ami4GdNVkSHQ4lw0pGEhPxyphkmqtLQuU\nrlThs+wJV/Mne3MZ7hmFpEMYTuO3zxmCaQJcRQn6MMBoOvuFwXjVPfUDx6Rg\n02nXF/SwtrNiRwfOF2IB1Te3l6u5rIeBzNUPgoP14f3JjQ2QFdZ+otxKGZt2\nQBi/W0n4/YHiBQBG/HWpyAC7xhCEDA49uqiQ3IxVKwoZh3PPUUHL3UaBhqsQ\nTW/hMeWZJkpEtH3X8GhAT+p325XuA64zgdo3AEIUcawxyChK+dCu1bVw9dhQ\npcqX/hVyt6yI22GHp4/fZXJRwXexr0d6Dly13C4u2w4JgjluwsMyf/gwxhB0\nFcDv/W1bxwV3GcVNkkvQHd72pADRuvJZtdd74Y/dCqqWmgMyTGSt7F5DmE6W\nZdXRSvyt45j0H8eZjCOfZ9ShNFlOCEZdRZzu2KoQHh3m1Ar/OG7GMNIzYOSw\n9eW7gTUgGHu/xPxfgoF7pbVa61vVN5q4xTjlDxhCR+BAJT0pOVrafdlKPpxH\nh1gO\r\n=XCK/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-6a42072_1550019242170_0.47379789832634667","host":"s3://npm-registry-packages"}},"0.0.0-7c22536":{"name":"@githubprimer/octicons-react","version":"0.0.0-7c22536","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-7c22536","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"00abd64a8151fab7e897f136d277ba9764af721a","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-7c22536.tgz","fileCount":197,"integrity":"sha512-2zCtjHPx6U4D2+AAfd0bmLa/2F1Vodro1Xu/aEk9TR9nGoQOobNxqP2cwwetwVC1komEl5GRWsezj3eqITqYWg==","signatures":[{"sig":"MEUCIHrNifQa+IQFR3oeA+LPIDV3DAVMGJNfTRsnUFq3YdeeAiEAzLC5WTPFrKhdBQGJsLm9dAES2vm111JZ51k8k1+SpwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcZ0G5CRA9TVsSAnZWagAA0GUP/jZDqZiBWunnB+nbYZUb\nFnRCYPYfVb5XTpQ/Y6yKG3+6UTGwaiJNdaz/5razLp5cvGYHIPV+dcbdeZpr\nIsQ3wK8ACn7v2TyChjXwkMLgyYAGsXlpMHExI5cnIwaFkuxhnppZBJ4hXVZQ\nlrTSKjvAKhZpaee2HgyAZnvIJMMasXPMxILLQVcvphrHoUNWW9WWoHtEwMcJ\n4XJ0mKoRaVTtPUPViUY20jbF7zBdU00UcnmQ2yGN+Me9iYDT4c6/SlipXStu\nOEOe2S5rmyWDKUmFRxdVoyNHYbSztAwF+e9y+BUtvprezS1aWBiMwRHcDRr6\nRRdvHF2DGAfrjQYQVh4o7Bw36o1EILQZf0PQC7VFnOoLkCnjEjCL/vtAhkba\nxk65dxuslRMWU5nsuedINdIoWYy6RDbBPLecPtqA7wszdrUzxsLsYnCnNLex\nTanpB5oZJ95mB9+ihljQhTFyQv7FHRROhzyDA3HKlyawOszKS+KgkglBEOaE\nHdC2gQ6tRgJEsdAlJ52nNIA2XL57LN5WXeG2kx4Lh/ZS7WGuTBYOn6i8d1yP\nCk0Axfcq3sk/flpVTYs+U9X2Dq2TO8VGTM4GuF8MzcI+zyarFbA8BVfnRVcD\nqu1KumXB/PI0pYo0fcS93kAY1oKv9sLCrJ9dZr0nAS4K3DOAGvktMXp6NlTH\ncbt5\r\n=aFUf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-7c22536_1550270904766_0.9448170487141085","host":"s3://npm-registry-packages"}},"0.0.0-7ec36bd":{"name":"@githubprimer/octicons-react","version":"0.0.0-7ec36bd","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-7ec36bd","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"05bca53d98544a006576bce59be44ee0c1d9b204","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-7ec36bd.tgz","fileCount":197,"integrity":"sha512-x4KK+X3hznQHt2uKiHS8mSy4pC/9/92n+zMS3Cw3i7oamLqf6KizUx9UjynItZdMzDJBWVBJgwrlQp7c9rDMHA==","signatures":[{"sig":"MEQCICfB+KztyK7C8mq8tLZKcTPEun5kxq2AxcxPD+ETZQx4AiAVJDXLSaDmoCImH5VweNG8C7eRC3JOZ1gwzrgBaJSX+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcZ0TcCRA9TVsSAnZWagAAWNAP/1g+L3L/QN5Jy3Tn8vTL\nAlLdBoU0CCo54qxI5An+khzZWrNvDY+W5geIVh02ycRO5kWS11LeljGYt5aU\n2+QfCzj9MYBcNCw5rbLWwKKAB8m2qSRDCXv+S+4dw7qSWAFLOtBXBNEZWEhG\n1V5jxJgC4iv7zeijrUXVOGXONOLUzxGf5ES+8p9FuMR+9CKYWtJnlX/i7v60\n3MBwqK30D36X8hL94+Cd+v78LV2eO2mhLqVh0jC0Zxbffo9FTAd/kmGzapx5\nm4Hk9SCvJCE1WJvAsLIXntLl0bQ5KPbuIclHT/526sXhys/Nslrv/zGjgph3\nmIAZdCzMVLzUzb8FMaKwPwYZWidncYr4pGiOR0SubGhgky1t7trRvDy2yuNS\nlZGe1TF3w1SRmjDp4LCpFl+U5mKVNDTalt4xc4E8QuQHMCcav9QeHk7TBKYO\no/XOZfu2YsFOx/5lajaab2mMvKlV/pxH+7OrRKrbvLT+swpFVKD23s8JuExB\nhWYLiMFxVqjfITmHrcBxOHX36FJcBpz9SyMOR8NPs1k4hvP3sNT3QhmPRVdr\nkeVCMB+5qd1jup3uXnr5GaVSOrOuVk9OIPCRLvnZodazr1LKh+N6rts4/4gL\n1JUs0Ht+uk87MmwATDkha5IaU8XszK9TScApW/msMYJ/uabIVbc6ALJaVppI\nyYSY\r\n=EXzh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-7ec36bd_1550271707926_0.8350607121795934","host":"s3://npm-registry-packages"}},"0.0.0-132950f":{"name":"@githubprimer/octicons-react","version":"0.0.0-132950f","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-132950f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"3257e6830a3b327c94a3bb341e4f6d23b8d0c755","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-132950f.tgz","fileCount":197,"integrity":"sha512-CgZ1wPdmA93LkQyZ9kfLSe8dMpJnwJRLh5/P13RUObZ4aHqbxu5pbtHJcyfeEMcIfUcO7+oQdJhOBJ5K0yWRTQ==","signatures":[{"sig":"MEUCIQDG2cxywMxlvhnA1xzbWfE26pZlvmnQPcB7fThVESh/WQIgabQ/DUCgoFcZ57LWNPZ4RzPxx5g8oFERcGA0T+GayQA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":356501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcZ1m6CRA9TVsSAnZWagAA+S4P/i8GASG4ou0jDjNQ+aOV\nhfTM7j4Ej2l8rDDGGo7z5XX2rrT64y7Cu7UYTpcwbygxytgVBY4CxCqxg6Pk\nzUz/gno1i6J1aX9+Pi02NvdDjyTivb6m1vhnAo50w/C0TfVsoEbntY055Zxd\nKfn965rgFm0amKevfPDyN+YzQzBohmteJO73f0jbS1/lbgpSjM5/0FJ7TA3I\nDVr7S8JG3uljgJnpFsEc3kDF1dpOkk4pHFiyE05djqKCHn6LMGyApzxrjOyE\nEhK0nUh+nDhpBxZcArDP8UAXNyuXt1V1CFYc3JObdLqCgfqR2SE+n3QvlZuw\nOLIM7aL9KArNiYI+Bv8Zzo7RL75bxFpau7WEbS0Zsu812v2boEDRqZ3ia4fA\nft35LHL8VjmlqixjWvKRGIrTX5omTwpB6W8YTY7KUc+uYtfkYWfhkMSV0oWk\nKcTfkEo3u4SEx9UPrJY+Hv8MXg8DdwqOkI96mFW/4VGqvI+7lwdKaF8oeejo\nV3mUmrCVDWzH3tDTz4K4zXqhxzwIaeqR3SzAmThFArNWEezlayhwWsJ47RcR\nJT3R1xY3j2jm9CovzVaLfr9cVoIVuBDqNQ1ZlhyWf8gTMnA60e0j2W+jf/W1\nr3akZ/MehoG6Bcwvwr7Cnn14tDuu7fxDLeDmj9G4dBJLiU95Er1MB6d5OySh\nIz2Q\r\n=m+Nv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-132950f_1550277048967_0.245349603090097","host":"s3://npm-registry-packages"}},"0.0.0-6688540":{"name":"@githubprimer/octicons-react","version":"0.0.0-6688540","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-6688540","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"b4ffc6f0c9fe6a1c5922b89793cc3ece162e179e","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-6688540.tgz","fileCount":196,"integrity":"sha512-snTcYNP5YMSOQdngVwcZt23WoEeWrqHPyROTOxEoySG1AlbxU/sbCFgufrTfPKRrS4O/t4zV2DycuUrTXifdRA==","signatures":[{"sig":"MEQCIHCk8GCIt6EDM9EtsTkpK/eWcRALcFgqoa4w/b5i53D3AiBQefYV03FgxmnfRjzFEnDmHsICYdp6BUqOQ8J2E8amaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbITjCRA9TVsSAnZWagAAlu8P/2Hs4Ln6BNnL+CuxT7CO\nFfZJvD9vKiPJf+W1n1rmaXATSb35bJAl1D+0OuE13n8xNKJquNs+DvE+GJJE\nEX5Ecf2h2vfOp1uoS8UUxs3WWZSElC+b2pf/zjSfTvn6nB4adTJkjCbhoNEM\n1QhuOfavoJ+JVZsNqo8pW1ps2mQIQm1K2ofPxQBSvlFrbqqxnkopHl3h6hBX\nusQQCUX0GTslfdO3NDiPddatMQdZ7knHMgoy5FEGpYLVQE8WcJosJyXMemZm\nCwj5g5+xl/btPQtYxpFruq9RRLy0AEbvgOoo8oQrdqGFbq6cvRSMvE+pWpNV\ndPc4SNK3C32i/JjpCUmUr6THHqWEnz1ezvoIXDTulQoNHs6IpSY6akXUjz3s\n0TgUBPVg5v34rLGT7C5VJJ+qud9xhVR6ACktN7LYDoP0CusFPkwsTyJ4X36j\n48JFdbRPsr+aJF1+MMR7G0S+KfwmHmQcn5/Cp/BxyNRO9JsPFsnjeIo/03e2\nSPc1svcuJI/Dzaw93W7KXZ06n60Fr6VNM9C8A7CE6wLEXy90KDQAKUpSNbs3\nS33mg0rOfdBbNDJwUqkg13ppoPz0STi+Gmv3DDPp6OWpcmmzACa41sNa7Cj2\nC1x0nXklxygtd7nke9XSCUKazZjcYG62LcwFLjeUXKq0C0APqeY1xYpA8jOy\nR2hh\r\n=0b5v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-6688540_1550615778435_0.8411421832952106","host":"s3://npm-registry-packages"}},"8.4.2-rc.074ae80":{"name":"@githubprimer/octicons-react","version":"8.4.2-rc.074ae80","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.4.2-rc.074ae80","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"9dbaa985af4e1de3c32e8f1de2ac4e668aa747aa","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.4.2-rc.074ae80.tgz","fileCount":196,"integrity":"sha512-iw3FX9SVqKAu04dvwb7GstAWrFKLNGg8QQ0EyajhDFwQaM+nir+0R0EFH+eIKJ5Wlgt4eSAKC8xfr7pVYOK45A==","signatures":[{"sig":"MEQCIBJ7CryGFAanYyG6QTR89rQSEXrFMndDD8ybolAn+eyTAiBhUuJvmzeCtYOUpxtz6kvhBxYUsj73rj9Os7FKavmnTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbIfuCRA9TVsSAnZWagAAqJUP/2KQZVxj9vk0OZLxbxo8\ns7+4t6oUCUHVdofw8T3LwaA5cIjRo0r5AIIdTrAmPbjocvawBu/ZW9rMaLsL\nzoo7dQR4vbplY6DOkvQHLoOaHdtfGzPbOHuJuBKuYnh5/74MRD1Qim8a2khl\n03JXxlpiucsE767vv+yR5xZM5LisyeuE6eMZqt9IQ8pDN36xQMrNaQ3HNGPP\nqFwyi8724CvcNQxKXzJCYeXQnYzl6fxLpNYR+R85FZgLjny9TwPuXgrgt9uj\nRlXyGzoPHLGZSk4gsyVakqaxVKGjkhND2bpOngWBicZ7W++/M0UV+ck8OElj\nQ5H0PiBuk+fkcHHzo8GX42Zi1rlXSEIrpnEgcgYtXVp2EoxbdLra7MISHqkB\nUrEMUkZ+/drpm2onC1i/zQWuRcyJoa6rMFGZero6k2QxzGDxQWlkAbJ1pIzQ\n12Zg77yQwuBy2kGho3A9+EHDUUkkPqkPbtoVFi24o2xPKp941y7pyWzihm8X\nI40QGRuKYe0v3sk8nExEex25fuXK7ngDwsfM5cj1pDSNOvzaPjWAe8q5AKG6\nOBe+5Q3iyb/wISQH8tjeWbxg7Ej/TN0z1aGE88czfMpPHsk6cmQ4TQkXKlqm\nmagka9St9JtID9VLQMcqGty5OIfzXCHg9TM0la6TUobtA2JZqrcUoActMlnk\nYn5W\r\n=wUlx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.4.2-rc.074ae80_1550616557985_0.7194017705568805","host":"s3://npm-registry-packages"}},"8.4.2-rc.c846faf":{"name":"@githubprimer/octicons-react","version":"8.4.2-rc.c846faf","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.4.2-rc.c846faf","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"614c857dcab79fa75387993fd9d7c725d0d14874","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.4.2-rc.c846faf.tgz","fileCount":196,"integrity":"sha512-sfV9baaoTrpklBFIq8fkU5ByF3+rGNkiAaIIgruxe3k1aD64rJ+QxPXb8wjA8/lIijnhcoRkK3p/zKYplVHWUg==","signatures":[{"sig":"MEUCIFMIkSTwa4DW7pk6lUK39PfVVzY88E6hJ5p9r3lhc4bWAiEAgd5QC1sggQgpa3zdiJ1vbVowK7pdpv9y8oj3LJ1u6hY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbJLNCRA9TVsSAnZWagAA/t4P/1l5NhZ7XiUp8r5bJY3p\nq7KV+ZxGjtqRlJUBQhsI+8lkcMRtU2wqU4w5PMvXyoF3OJNWtUSSP3kCaSOC\nNVyd7lg/ftWjPCmNaFrOmUM04I1rlG6hUyAfdpFYNEfBtvR8qnkfIg0yIdn7\nsS5+e0/udDfnYMcXS9ado9/8B2N3EYXSWe0zARrwAEwUNBKH0nnEzoPj3v24\nQUeBZ/c2yhRGasY+iIjZE5GDTOmAPP2/p6hrZXRrWo0GDiNgSgXTpe6YbP4w\naIPpRupeWIljW4bcHYaKd0qDOCpQcFRklLfZXdjFb4vH6px4sGiZqttDrbGH\nrEuIa9ftAqRtxrezlKK3ACtUd7ZNflVbnnBF+3D5kkuSZbvX3ikTTZXQNL3a\nzjj9k3cXbB4f04P+a5nwOmInF5AzCQol7c6CL7k98A6LsTibhllOptlYSHKL\njKKiTp4H3x9n2QAa+CuccsHaklWP1uQiI2WljYxpmR1OELCqTX9+54OCKFMa\ng9KqKLYQCon1XXUW2Q2LRrDb9j42BGOzHGlaXGIpHKXnRjMHU6dpvjq8q6xu\nDPoMo4KveAm77bXckTolMUNXo7ibu635xbDKfkd34C9CuwBb9moZmxLkSjuG\nb5hkdGJU5AOh6D7n7JqnVwoanaZ2Phj9TfNDBSQVZBahhc92JVpEeB3IGUdl\nr6j6\r\n=Ngq6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.4.2-rc.c846faf_1550619340592_0.7553896914055165","host":"s3://npm-registry-packages"}},"8.4.2":{"name":"@githubprimer/octicons-react","version":"8.4.2","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.4.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"9f4be408456da895298d3831c9e7b5764ea3a58e","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.4.2.tgz","fileCount":196,"integrity":"sha512-XVFkZ2Xf+Y8zgz+g5zuVnrzOsDrwKjBrU77IKNyDAXjZ8dhphE01uL9yqRWq29Sa/gchuR1Q5nrHo0Vr9Hnxqg==","signatures":[{"sig":"MEQCIHcI1R8KeB6WBArDs/JMGg7J8OtuDgyuvkByaYD3ZvbGAiBDT2lYThLkVqCZci/U+P4LG1bC3t3SfiJrxGtt24WPQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbZDPCRA9TVsSAnZWagAAFKEP/jt2xd/nopnXJ1ap3n8s\n9t4fGBpZyjITNYNeIEcSISNFCI3vTbjW83ekaaj5yoDNwbLy7cSpoa96eeKJ\nWIyMKlM644rTltJ2jltOiOmpmPBmnpwKxN9KgVXpvxIehkLzY78gDKOouawb\nWSRuxSMxo53sEXzi2pIB9whtL0Ich6ZRXv8RUPeJXUBQ6Yre77xwrQvtX8pI\nqQz/BY9g1KaV3nTYHYz2fApb6tsuFSUsG3aapdAfyQMTk/qYl8EeUYKYAmPz\nPuyyFaWwsVb9QYCP/0WPWHfPH+ckz4QiTbLGvGxjWah0crkqPJQpmhrADYlh\nb5QWF5TjMrbPs45/AC4Ni7Jl2pAmf/TOyGVvvRbp5lSPqq4edf6toIt5zsGX\nq+tppogUpG57i9By60pImU2KroNSCkx9ZMQjNGe/QL1RZTzMe9QtUoJL+NT1\nsmtxuztgcvUAymskqYds1fNI/rPdTSUlybTl5cU59kZTSQGxJlGU6z7JuL4U\npmHqzKRUiAT1suHGF5k6GUZ1oP1UBb5froiEhoFUcva87yYfLNW0meGl1n5T\nnhby9Pg+TrOhLVvr4m2V4vQqvupo4SVzVHDyi9IWyjzwIOAfyBQ3a9vAzd2j\n8j8Gk98g7kh9iQQiFIUm/oT6ozgB4aFM2FLUjoXyKg+LWQ+p9MoGI5TQKfsF\nRK1U\r\n=rz+A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.4.2_1550684366959_0.5769171713907655","host":"s3://npm-registry-packages"}},"0.0.0-599fde6":{"name":"@githubprimer/octicons-react","version":"0.0.0-599fde6","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-599fde6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"fde641d8ce8d1fe24538a8dcc0692689928072da","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-599fde6.tgz","fileCount":196,"integrity":"sha512-uTMANQQaZBsjos4ukZSPyNS7CodSxMVR9nMS4YoEmRG2OK5Sm3lC59U7iu22yL1sBX+nTl0sV1CDaArceKb4VQ==","signatures":[{"sig":"MEQCIHu/iBg0Ck159v5j4bBc77VU2KMV00AD+X26avDiCtrBAiAccHSkarsnT1P4rJULGrdbuaN9JPXS/fD8RhTyIslXQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbZNvCRA9TVsSAnZWagAA6XgP/jhw/LPZJfCb3iuIjsxo\nGyE4X+LLRW7f9q9SjxtsU5jIo/yjh+4d5CoeUHB0154TDVH8Md+4tPeKM7s4\nxxBupFgKdN3597d5xDvevBWeF56PuuRZXz+IW2vcJ3pN6vs+KlIjxDLUHXB9\ntSe479H6U0YDfG9oePun9GUuxXrh9pIJA5K7K+b8iD/gtOWgaBRnTG0jEM+9\n2V7vg1uJX7yqsjAi2bu0+/wpVZq+h32SrGU1hn7sGzreC3uU8Q1Ky9I+QbnA\nSe7QIOilPNOZuMvD0T1zfXdW2zKLLWiggbc87z4YwmVFKBhBVCVX6GjCZu/x\nKYlqH/cZf6aqY+RXg5gLafsWzoRdWoodW0Qw7FsGy1PqTUANdhS1QcHh5Rlp\nj7rbUbu9QRZ1r2HMBnQ/zlVtx3eYeVpyPGeuIeMmxc1WoXxKARHIA6hpIN32\n7adIJkWnOJ0Q3NlFf3p4SPPoy/hEhbiXiL4kiMOSjWen8clPBGIrmqKDKdcY\nlGan1bl/7a7nmulXuf8kIUgCI9f6wuGNBo6Isun1uBOyStVXyGrLQTIASE7W\nvFvQnC/9lJOwRATsg6uUm0xuRW0eRPy7UCowqIJHIL/qEUVUQ9VLWhio0eHO\nTaKy704R2I/kN2VcMJGqFFAIA9zjlgtkdlVgcvXY5FFcyl3NUc7+AXYQEF7c\nOpx3\r\n=y/fh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-599fde6_1550685038665_0.5557871227327358","host":"s3://npm-registry-packages"}},"0.0.0-8e4eac2":{"name":"@githubprimer/octicons-react","version":"0.0.0-8e4eac2","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-8e4eac2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"8b6de6e2e2b6019cf0767e30d95f33e86d224e03","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-8e4eac2.tgz","fileCount":196,"integrity":"sha512-1q9O2ZMTZM1gjDJ4A0gfhQgrmxQQRzhvxej6Swn9yvscdduywaefs9GMDIRseDlTGPFW1oga1r1DqeLA70nUMA==","signatures":[{"sig":"MEUCIGgqKZTBRC1bQZlRQ3IzHuVj+irvu8IIVnl2i7GlcUkxAiEAoN7nIkcOCFZ+K2kjx+IwzsI+cKkND2gHpFfkmPBnxLg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJccH8FCRA9TVsSAnZWagAApkkP/3I8GeEBh5DKZZLzCYgp\nKtyG0HxDCeWH++yYcDWd3cP4Hn4D6+mzGkABomZksIQBS/dRnvgYPEc8GE5W\nZKVuruGDwYkbkCJxNVkRvIxZvwwPLCq3UgVs4DUf2s9LdqEnXcWSCS0C1Dt8\nF079uv/KsID+9JFUTOJYl0W9Uqew1/QEuSNJxH8TGchncSreoHtFtusR2QEG\nDUBbqhWi5u/PikSamBkhHmjFi30hg/gxrggqDrYU+IrAP01N1+haoQ4Jd8x1\nPVLBRril7av47LhhbYJIPMIVDGQW6eJ2HQj+cO0Uiy39QWRkoEhXPLhPVMxA\njCFazUe4vzJeLJ+KwRwtd5eZThabhVkZvZsAeJ3eWqiQNE0G4eCzkWX4rH9h\nfRDwiC4GNhzWXa+H3AfZjuM4NNaNbzvNy3GMKJcRkXzBlHPSqG/BnI0jAW4y\nI9B0Pfd4SLbOt2hEtl2Qf3r7Pui2s9JITOrSWGGFcyOrWjYirx6g9PmXDPem\n0mhsIfefukYJJAElAbVt1V5DZJO2IPt8jiXv59TkCMWG7pCs854LvZZ0nb9j\ns+t/W4/yc88i5UxIvJU6DKQjsNl3+0fOsXuSH1oqnsLFisY7uVCJLOmdR1Ko\nHeA0DOd+iSnEKvfJRFcAVOzh3tqGXv4Tl/u4va+VmCa5R7ce7uqw5dF8zb33\nAntd\r\n=35mx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-8e4eac2_1550876420728_0.10696540060041193","host":"s3://npm-registry-packages"}},"0.0.0-49f1512":{"name":"@githubprimer/octicons-react","version":"0.0.0-49f1512","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-49f1512","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"3d0fcbe1fbd7450f39bd42072988a46904fbf3a0","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-49f1512.tgz","fileCount":196,"integrity":"sha512-xWvPHWAVaMimeJVfyzBkstWcbuhhQYDPdJDCWBrLyFEcjBuI0/Fjdbuqc7SonO3VtEfZk03iu/+vhvfZ6z/V/w==","signatures":[{"sig":"MEQCICGlunriL6TwafE9xDgh0TYkBV+TViwH0DE+4LCCnVQ9AiAx9fQ7zkZiN6q2/vxg+a7o+WKbDq7/QJz7awgr4a7zSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJccH9yCRA9TVsSAnZWagAA4HMP/jA7Ucc/i3/FU2G6s5aW\nhf0CHbKlHPnlTDikLyoQA0rEOTp7wQ/ttruOCkL5gWpOoQuIJCkwOjYQJp0v\nFBdhNc4cWjZv0fzpLtBrka+J5k6ynbWf6KL6fTX/NYZ9wWX+lHlHoMiFsqFI\nMgZhatmmx9CZGpftoFot3kmV2NMMw1cMoPcGYthOFma41ykq0vGPxcVYip6e\n/xQ8GimyxNNeSkhCglA6/WZqNOzmDuGnVIJMnuTELZ8eBZp1ZTvxrfJdbYkM\nHULsldnmBfEerqalQhkikXU1R4iFrTC5moKuL7hqOjes8xbRWB+nuJwTwnqr\npr9iRqRHBm1Id2n69/y4HKj7xiK6yywXHSQYIDBZTjIP0LW6Rj3hbQPVmhyC\nkqzvAKjkQmkOi1BNOwFP4Qm80ViPDnZWQwAtVGE0JW9QzHdhpAwjCsABpSgL\ns3NUWf6Omhu/y4eE5Z3mtQgYXqbvxaxnEg+iwez3k+8y05o2lAwvuRl7uPQK\nekKWA8Rzk6H3rJ1AyKQs8fh1jR4nJdo5rbFggH8MW7BUkSjjgQ/gLpjjawOF\ntbKST2aGFdzA4eNvTh47A/qWcrptVsGvyxs0+ZhyQpnUq//oSRTDiG/TXCJC\nNzFyeWeJ1e2pc4yeq98qX1OGSdGQcoMVMlpUGA5vkDMYyMKYpGFORJdib+VX\nC60q\r\n=p3Cq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-49f1512_1550876529859_0.039793455918399","host":"s3://npm-registry-packages"}},"0.0.0-ad7cf85":{"name":"@githubprimer/octicons-react","version":"0.0.0-ad7cf85","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-ad7cf85","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"5f41f656796fd5f0a933fa34fe58a20b90ea7a14","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-ad7cf85.tgz","fileCount":196,"integrity":"sha512-yaYnYYPxVIFwJGJkh50T85Z0SmZ68EHzJMVHJtO95WpeisuyxMJbNKp5JNfzkOYnmVoIxg8bxfZ0oRRXwja7qQ==","signatures":[{"sig":"MEUCIQCAQXBnuOAQBnPChGR35S4QYSsT56y0/9NI1ee77m40XAIgMbdVuoupRIZIxAgKGyYQafLOcJlxSEKgs1eo2yFOyFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdEUPCRA9TVsSAnZWagAA8CMP/Ry41GJ/aL5jYGp9BcG4\n5CBOKSclxadJA3yumF7hDme3chdBmS/oJtUDi3b1IV5kGaK/E4lgdbMgg3h1\nLGPxqP1nozc56pxR4so/Msdc6KW+DGot9N9E82ZP0PKcqbYP90LIGjMjx9S1\nlY3vmJVHsnnmsG7TXHdQNCvCRFb6sZnSSuuJe6K9fkuEKnIe0Bw9ES1XzwgJ\nUwU8F6vlW5hgtJR5IRFMztQcQ1hA+rfTwl3U0HBD48YaYBDOMBlQOYeMPnq5\npVVe/uvJSRjHxVRk3YqYZa4sOZVSCqmG7Vg+ZO7d8hMZdR15EYF7PZb4e3/c\nKMGwiLNbyxyowvynLMgvAYHPWlhxEOAVxwVL5FTA3KJ8MK5i2h8q8tcQDhsB\nvXcE+L1pv1g/dFsCRKiDrf/eXT2KczqGOMKz0JTViRwa78B8VWQf3+B4IoLq\nt2ru6fxfB/OiNdFo+QShLspiG45+xAZdg8YqDIA1OFTFsAQNF5juGsxjVoKh\n29Ei5FkL+F5kaXJtUdCC6SeqGlBXXsfqily+MkG04htKyNNbAWJV7urAt83N\nfE6OGBZvEgQTqQG/iKlhSEJetYvMlUKNpwKes7TERYrFPvWdZvf8XPzuwlH0\nYVBUsCtEr3dhim93z76fYrGCpuL5vB4svWV68s8zwmbhdh07YC7Rr6idaio4\nDpvc\r\n=ErMV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-ad7cf85_1551123726361_0.714693246263336","host":"s3://npm-registry-packages"}},"8.5.0-rc.7e0ac2b":{"name":"@githubprimer/octicons-react","version":"8.5.0-rc.7e0ac2b","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.5.0-rc.7e0ac2b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"1761a29280ee76ae6997ebcc393ee06faac41bd2","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.5.0-rc.7e0ac2b.tgz","fileCount":196,"integrity":"sha512-qcqDlbqKugTI3dufuLVYIZgR0TECV+vHQFbpcEWONfxDh57JnRS2SAr/CCbkj/fyd94uHcOy3ZeOFSkc/GQiow==","signatures":[{"sig":"MEUCIQCPMhO+jZ5w8wsPqPEIX6Qx47QYBzzLsGAJpJCNToYWcQIgTP1yQqX3bbRBtmQDgQ1Fk62REiBuQ/XeIoLhFwGl7m8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdE+TCRA9TVsSAnZWagAADtQP/Rl5EZrtrbuBfO2GW6V7\nZi/D+TlyJfKHyjkYD+hhK9kuNFbFZm0YFx9/vyVGKCI+Wxh0fn6+41hsiK9s\nk+6/15UluNNWTAzmzaMG800BIvAb7x0Wi5Z6phgOZ3AcY4qSO4YzAxbVUNDE\nPaJTe/2cQi1xKW31+YmYm9LTl7S57AvZEmixs7xiTqFnuFlPA+pHGbZAMAD0\nxS3mgdalSpum/ZLVfdMdT3Yep0Gat3uIUvlSXVrB6ZT9++6D6H1clogEujuL\nMN83TiqBGQNd9ASFKSXD0oesOfxsyryYX56mPYm8n+jDlX2jFo0Ez+RhYdfx\nvZokMBdbk8QWCr3XBFEbXQkly9AjkjbYxzGT547v45HQKeE4xX7eOjcvW8ld\nyCtkPV90GKmP1trYUY+xKJ3IkjY6eTuvVnQCSamfzileDULnQI1nVwdDPEdn\nit656o003m6PHRoswtyd3XoFfGKpTyk2CKWhdWSYXUONhDUn6DTFeGZFMZmk\nTHO/XK0DSnb9wZ0c0UIJuSYpXQzuU3XK1l8NVN7+MAinFGsxh8Sp0wMc2EBI\nVhiWkuSRfz1RnuNyYIIYrNYhfZtSdPMEWrz60q7x1SqUHNNFPvv8GNveDuWI\nzcSQA/D9vwMq317SEN/RhqeAu/pjP2JqUPMlX0SRVCkI851KoNRRJctnKby3\nRBxx\r\n=OjGg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.5.0-rc.7e0ac2b_1551126418387_0.2975860828129877","host":"s3://npm-registry-packages"}},"8.5.0-rc.3e15d9b":{"name":"@githubprimer/octicons-react","version":"8.5.0-rc.3e15d9b","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.5.0-rc.3e15d9b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"bc7630842a2e56bad4275aeaf0c6afb7d4c526dd","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.5.0-rc.3e15d9b.tgz","fileCount":196,"integrity":"sha512-Tmsbw5ydC7qashIyHVG9lL4q1ojvfhuehwWV0ot9Owz/8HC6bCKg13cKNr/90WjZ01o0MjSVt5Rtw82kVhRneg==","signatures":[{"sig":"MEUCIAnMZcJpaefoSwUvRePebR9/ZAEoXcui7O11POHZCEkUAiEA0nNkgc2WSAKO1YfqgijfCUf7kA5WFcZz4PAsq7+t+Aw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdFCmCRA9TVsSAnZWagAAJ0MP/Rnr42Jfj8le02c4vm34\nz3vNYtkMAfQfEaPH5/IOjLR9T4nIspCGdTjR0seXf5Ik9yrw9ukcSaKGUDAk\nYz5H+WgJrgwzsZZ3pbFUJisU7GZeIU87e3G936doEEquAxjljwvPMaht20F8\n19nFXcQrraR8lPSFGxs07TkKUA/Uei/Zgy2EC44zRSydGVkhkyIjyMmFrRKs\nW/67LqZwaTaGyu4JLfhBxtKpiEP2Q/IEKiKKw6qaRJ0IwB2C8RA0YTkmDilC\nM6lsTm2OLpYvgP+gfQVxyVWnVicW/kuTZjLKTJ1uBYh1DktRqH/wNjLtsCby\naWYubppST6qX7qkYzr/T4dbNoiAybfSAR8k37W2s6wXkuw8RIvCs2B3S4QjP\njG1mf5iD+K/e/b1rOz5Q3qdy5m6nwuI/iBG42Z5jiXBqzTSPi4HXBY5DeS1V\nPn/zGXkB8q2AHJLGbEuStPj0ixbq2E1R2YBPJbL4eemiDlgv7oyWwjRiJkkZ\nMjOTve4I6y/PWfeyI46qzq1+KBFAIzbr5tCeI0UCNEeFQpn0BEtOCW7kBarD\nfpixnpsuMAyxtQa9Grh/z7Xgv9eQ/dAu0TfZaHbXvrH96PG7ai1nH1nRTmRB\nJx0XIe+SlCnmtk67/UNMLHEQgzJ1BKxK4psRZFpfo1u+JsBmGXpZs4ZKpbkC\nWpgo\r\n=NrXQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.5.0-rc.3e15d9b_1551126693464_0.2716789300100444","host":"s3://npm-registry-packages"}},"0.0.0-a9a3db9":{"name":"@githubprimer/octicons-react","version":"0.0.0-a9a3db9","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-a9a3db9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"4efaca4e8a0a539b26c6bbce387e566c53915dca","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-a9a3db9.tgz","fileCount":196,"integrity":"sha512-+7NLnhvpoinPuQswJwNjjEbEMajjyhgSkwpvFBAkJ2Tw4mH4mC7w32bQLZ3fem4odOSpSvsGTIBtTiAybDzs/g==","signatures":[{"sig":"MEQCIEtTj9bZ0n4bzG5CvZaIk97PjCJp0fR+TMq1Q42fpgA7AiBIWIQ4J7XfuE/gUpCiM97hCAYVAT0iA7RqZapfgyZ82Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdHSTCRA9TVsSAnZWagAAF4QP/iGQrS+MfN0AmyP9Lt76\nmEErdkcchTFI999bv1vAo1q2MsXKynWlYnGQlF3yB8XXlPSo/6IVhfrxcGaT\nlf+zVQXVj2PpK1XsmMtQAdLCEPZfqVHyAMwQ4GwPqKYlup2O/ISvj6Bqs1Pz\nF/GjWiQ92hIMJz922SchzhYGqivR6a0Gqgz76rKMCw0OVOy/UAEobE0MyQIL\ndQCrZvudPQfAHFMO2P8VoIbdcU746DpW0QqWpaJCpYuRgXhi/9emRA69mPAg\nybg1d13voUViTE5w8z0GrgNcYYdB5fzBGKxNW23nLHrNAT9SqthTldc1MY/R\nYAtoUKzz5cIVhktTvUXymef0v6K/wqcf7zGk4kQKwe6nrzUVC/YXpybMR7zb\ni7Hoh0z792HVT4LF5byVUB2JwxXjSDrVnqXctxm74aie5erfD1+jDrT2/xdA\nG+m4mr9gHOfp6ZLPz4deeVHkXXsFycLZyp8or7zgfmorgaPexEc6JcScVm1j\n31qTodh9T/Jv/A2oDy649UWiQvTwCrZOBRhzpOfj202r8EM8IB8EFDU4Kjwq\nP5dut6e3fQzmbxoAqKhNygeKia8jWKsoHpHWRAWV5NFIotJfzoPP5gNJ9ZIW\nn7W6gZ79pBVnvZxTPDVy8VGy5NSrjOUMsP3JTF7XU1uT1dnvnxLOjcp2bccy\npwyi\r\n=8npX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-a9a3db9_1551135890463_0.2899448944901122","host":"s3://npm-registry-packages"}},"8.5.0-rc.1004aac":{"name":"@githubprimer/octicons-react","version":"8.5.0-rc.1004aac","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.5.0-rc.1004aac","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"68295a05f3e9b0811df2561d6a0545ada3f0885e","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.5.0-rc.1004aac.tgz","fileCount":196,"integrity":"sha512-+PGBdSUWgcOAqtkIXFghBYAO/3/evB8w7Wf/hI2TR+Tk9yjfbijI8l7CMOMsJ8OCGFbjaMKhqJSTv+R7ITgNAg==","signatures":[{"sig":"MEQCIBJh6USts/YR0G8IsVUtlEShadml/UH+5Iuj6f8FFkDtAiBE/Wja9Jhsn9n8be9AN/pQ0GYFHLH6kLVc+ZaeUv6eKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdHciCRA9TVsSAnZWagAAGC4P/1zM3qrKvzRy2+Wc2+zB\ntMQL9uDE1mfsHwxlGCxHnEatNuQR1m7vMvAh3ker+bECo85QORLpwvEAG4l/\nFJQQPJ3Y8o2sk42LHafwT7+gRWwGaFseLlsPtIVWn36xSShJm1hk8ZoiNRQX\nweo1HvuavXD2zMzkazn849mlq5MzwD56oxTL5BeMtfSuRf43vk4KtmZEP9v+\nEPkiFoDN3wCpMRyriOZU0ptIf/Ldq89klf1LEDjmnMbll8GTjuptVuKTRalX\nfOzhkhwsu8sJclmjNge2I+Db5jMJzvjW0mO3sNKQ7IFojRX8+SGOf8dMReuZ\nxpaJOho82KLMtSH1Ukm0A9u/OVNMYkcyML4vc1YFcKVcVeyKq5aIulthEZHi\nVwpMBNcqAwStDt1h9h1HiZwWAAB7Tu0BbbMmXJgE0MDY/7cWyRPjDxsmu9a+\ns+ofQVRu0ONe62Kkvn2SeNovtqaAn9Kk3Aq4I4ARidVUo7gt+7ao+/ayrn0E\nWj/0Tjrcn3OP7V+qoZ1y29y0pbaFofoAD5D5+fs/zMvmhew/5adR5s/5ra9A\n3lKFpxBKZkeLbM5VSiyrOH1tAdLsPdd8NsAJGQfLWxZl7i8OCEZt7MfbSbwo\nePSFBGESyx4mPrzMYgK2Qdgkju2RzXdZv1dECMQAxRBN4uIsSvuaGy/KLpAO\nkjCY\r\n=laNm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.5.0-rc.1004aac_1551136545572_0.5930685419191042","host":"s3://npm-registry-packages"}},"8.5.0-rc.abfa3a3":{"name":"@githubprimer/octicons-react","version":"8.5.0-rc.abfa3a3","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.5.0-rc.abfa3a3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"11bf20404f85db48a8f18aa354bd43a1f2feeeef","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.5.0-rc.abfa3a3.tgz","fileCount":196,"integrity":"sha512-IGgepZFDXWtYjRWDrUWDGWURAwkT9TmCWUDqITPbdltJ6AGOgudtH/kSZ4ng9AJdhKhimB+f9FB+/Vo0x9Yccw==","signatures":[{"sig":"MEYCIQDskCCDayUUchiTAbQt9+MBy5L4Lbi8lDGoiHS8ExcFtQIhALru4m2EIKj93B4W9LXR1U4ryipd33tzkGbQClPY1Smz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdHzYCRA9TVsSAnZWagAArEEP/2t7nSMwS3XoUpl0pGYU\neSClnMcawyfYRIrTv7cB9YNtdKngckuqIg0Yjbe1ZiA6NFfyZXqUs5b3w+bG\ncGGrBm/YJA9nSBHtviOZN2sc+x2lFDluiQcR0HMtgZo74c/GejRYgfOMSQ9S\naOzClvGRBQgN6omy/TnP+N8A/DNES0zG/lo1Z9ow0kxx9/G/EbLtxOvkK50r\nTHjtWdd0KRO2IYRn037AaLu9kDLUr1SnIlZBzJT7kFtiDM0SrxRm0yJXDOjU\no2mJeBVKmoNNmiJv+TwQO7uAr7wiPBb+X03LursSgLiKXEFCJ3rsz32dAb3V\nCBsGbx3YUG8/sjiu9Z6qVLK/po5MKDYILYBD70krKxwoYccbAx4CHKXBXZQH\nCtvgD8uZZQ9fEQqok63wvqyO4nzRnnsCBqQewj21sTkc66RKVcZZR0MmV30o\nX36rFpMIxl2Gp/d8V2th6OKO0y2mXs+8XWWQvHF2q4R3+GQVGW2SmgZbZoWk\nu8v65EqdT8u5CcuRgsrNi+Z+i4VWP2CF9n/yUO6+QecSlytw0RXPqpETZ8cf\nsEbhuW1N+uRIh3DGeuwTjzRlywOPchyjucVsGZ8zGQBhlTtib3oiJGohYG5c\nNZ2WyaB/5rezTFiOIIehyf2Sj3P9vTFIAbHW9TszCvEIk7m5dzdTjC8pxcwo\nK+zX\r\n=tEWN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.5.0-rc.abfa3a3_1551138007205_0.22681415431665308","host":"s3://npm-registry-packages"}},"0.0.0-485365d":{"name":"@githubprimer/octicons-react","version":"0.0.0-485365d","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-485365d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"aa18c54f98857210664a6d67417198f4dc3e2115","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-485365d.tgz","fileCount":196,"integrity":"sha512-HvvT3G6zjfYPFDLz1WFRtRsEgO3kLy8DCUO28OtQ3RfaVfewOa7iR83ED7XmLnzmUiuFP4ow3ewxk76yAFwoMQ==","signatures":[{"sig":"MEYCIQCJ/0nnpzVe7tOPc5t78sQD93Y555Y9MH2O8LIsO5CWsQIhAKhPpz66P/AVXAHIGcsLvGL04BZjr/WXTOkIof0h0sC4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdbKYCRA9TVsSAnZWagAAdlEP/2GmNhW+H9D4pjjZ5Lvn\nwr+IrOSYBS3NW/fzhd7IIE7TZrEB0XOI01FtlFKNK0uQ1UV+9j7dHeQ7rbXY\nZNYTqcIuEzavLjrjU2qqBRXY5+SR3tCPE+3iHiy7Bhd+V98C+MjiusY15lgY\n41cBjKHCQ8Ywnz0n0xSyQrSP/+o5qhbakkKpa3blL0ASEZtfzhad24OEuVJn\nAtQ2BeLvV6R/OARv8Gh6sbFfQH8ESFDxDlKTLDiCA1th+/QU2WAQCcOTWxZF\nwJkGsYQYljve5mdHVlY44Wi1g+7qIbZFQZvgF4hO45Zfx941LP8LF49GZa/I\norFuq7RokAWvrnFVSKQ9Nfr1JmUCRyFYMRR8H6Wk/qZgmoG4pqOeaJFBscjy\n3bjNGOneeDJZxRdjbPkdjm/l11P+Z2FkXjt8htUourSSdZC8B/xCoW0ew4s7\npHNlNIR96v3XIVFwSCEpbygF0EhZ4E39VFIac5YescID+dPRVifYf1+0ghx4\nZhRoiA+e9D1vtZ4NOk/51w3emWa8xfsUgHMB/ge6p7Wa931SSOuoi0IEr2Rf\nmnYrGdaLb4p+tsAOp8NgivzSR1ZIfizw4AIPsaQi4m13sdthOLDrX0etjaTc\nMbjbfI/T2Iyn+0VrMkmO8AeOu29MBK5ACsa8i1vOYx050EVd7+3KRiR+rOxA\nXaCi\r\n=e8nF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-485365d_1551217303544_0.5244291085332293","host":"s3://npm-registry-packages"}},"8.5.0-rc.5fe74f3":{"name":"@githubprimer/octicons-react","version":"8.5.0-rc.5fe74f3","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.5.0-rc.5fe74f3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"108f825d0add39ed5cfd6c2090e22913f8673273","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.5.0-rc.5fe74f3.tgz","fileCount":196,"integrity":"sha512-rssYS3hvUiKY0seZkzQrViqiBYP5n7msXXGdVTz0X7gfATpOu7Oe6ggxapUxMI2LodaWYipWKq0U1M538wkxoQ==","signatures":[{"sig":"MEYCIQCxyaheYstmtM2GlpgI1V/4d2Is/SsFYlAnZPBAeQUo+AIhAK/LjRytLgtJ2jzNf4i52e3ejvrpBJ8fRP3Uo2hYod0K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdbS+CRA9TVsSAnZWagAA+ZQP/0DLsdJOwujMUvPUFe+O\nVTh2vxJa9gEQSoffMFYSsBLZOA6GnYPiGxMub6XZhSiGrWXtzneVhhvx9ruz\nhmGPXkqVvFoTYobKgxBE4DWMn1xzj1TDMcdwDaiuXCXeab2hW/6Dy4J22qAT\nsjaoPKX7SvKBdAACZTsRfUvPv3LPDLUezzeO6l6LwDA78QAWWTInfdaZYaYB\nKqfN6eIivGIWk7U0KrmwjrvYIBK6CBPPI3eLyz8NZkBqdYuHyb3j11IpjJtu\nRkG/sGdQHYxXI9eQhlmeBuSW5OjKgps1I9qhEOSpvPuyiovmMPuAQYcNJmp2\ntpTof6g3+8XtiPwiNIHi9cbgAZ8EdI4oshH++NpHmK7QRM4LGJrabi9ChkPt\nF861CuPAnIoqHQIREss8ZnTh1eazn2fwtYFdsJ2ar5pfgYkWkjD1zVYdJu5S\nYM2QRHP9E9etXIOhqqYA9Nul7YWNJLe5/DDyKzolgUAGoXPHvm1SgkF/Fvsx\nntlxo2qf3C8MsKwm6qCn0w+BsPKUqwsVhqDQXNSHxT43IjQ+VJuQNM98KU3s\nApNuVG4tyQrx6EQyPdoDp/NJRCVPQn2Ceqw9NLuWWCqd/rB8YylRtWMwVJ6b\nRWJNA/JPb1kVDE/gGX4eFqhr3TuNjzEUgd2l9qMSE8a2T/rcr07HGg1j9TNk\ngvO+\r\n=lBc/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.5.0-rc.5fe74f3_1551217853867_0.270114957966876","host":"s3://npm-registry-packages"}},"8.5.0":{"name":"@githubprimer/octicons-react","version":"8.5.0","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@8.5.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"f3c9639b8efcd2789761822b7ac7715dd810b4c2","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-8.5.0.tgz","fileCount":196,"integrity":"sha512-Tb9Nu4usHON3EGiyCnppNQoJmSJvhUw+iD1URpOsoc69YWv96jIcxUAU4/Tw/D6ydzOubf3H9kPdLKVqz8XOnQ==","signatures":[{"sig":"MEUCIQD0DWFE5mNPbE3d/FTnNT2i8Fnz8st2frF1PqsfefnJ7AIgbHIyOEOV+8ZbymXw+uDr3lg/ayZX6ht7rOwjPhSdBeM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdsa+CRA9TVsSAnZWagAA/S0P+wToICUMcHpwZ8tKz7GY\njs5c23uyt5/DoD4we7fcE7VYSHo5jHk36mitGoE8GhoF1L5YJ9gsyeqZoyba\niZhM4ScCO9jMkDn3FVJTl1IvnaUFUtGqt2SHZIXDmAmFer9CABMVIWBni6OG\nDQQN5CmRbqAZe4sg1PXZpRyqv1JS2oMoVA1zKoybCBOUMALuw3L5uaY08fed\ntZkPRVYcRNDRTKVZXgk2Q7r1biW/9S1QeGC3KvSBpHnkgYCuXA/bnmUeJsi0\nshpHzeo8ZbITYG+pYrkks4eLlx99SrL3lfI33wEA9mkZUMtl/IcqsMpi4+bC\nCjPmPxBa0kflOI8WhPzgBYmsFfsROKDihgzzLWhhgA2cxH3StI/lSzrVgwVF\nJ10wqnYnk17nFq2HheEDuEMBZJTeMaolNmWZdxPa2EXRbyNRts6NyJQSt7Q0\nHDSlIq0id1tKNW2OPo2yzhhjYoFEZA4MCYgbk/8+1ybGDyLFezszk/gAk/qi\nSYC2R+GlN2pKpv562sAhpQ+dx0rFXj/xK03MyqJHx57FR+E1+kfR1j3injXx\nvfIVe6o8sw98FbYlxjjQOahZTLlIjqH3+TV0yw6wZ27+tlm8pb8xjvpnCKsp\nN+4lKt8nfIKGpw+kmfOUuaw5rN6PVGNK0rBsfuoXNse+XhvWF250Fm50mocH\nEOox\r\n=+Oxo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"deprecated":"octicons has been renamed to @primer/octicons-react","repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_8.5.0_1551287997163_0.8894286746369697","host":"s3://npm-registry-packages"}},"0.0.0-6fe5475":{"name":"@githubprimer/octicons-react","version":"0.0.0-6fe5475","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-6fe5475","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"b87abbeaa889b215e8561ab283e341e41346807c","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-6fe5475.tgz","fileCount":196,"integrity":"sha512-Ma/KpSF7YqPJC0wPFvgONsvKp5tIqFByr2Wr5hI3XANdHRN0SbE3p7Dss8i82G5CpivWv2u4rtY//2ggzR5Lfg==","signatures":[{"sig":"MEYCIQCyEOxg/ovP3kjuTsk9j7Rp86Cl95dEb7rVYV1cd7S5JwIhAK0xSIKg7/90UZSMw0kVbyIr1zD77+wbkRTJdQs3LpM2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdtqHCRA9TVsSAnZWagAAGPMP/146VIS9WX5S9giwiFWn\nKVnZ/LaiNpOiWcePE7wofnW7CgzDGB0Bl/qtQrRQyr4K7kWt1APBVZ0mo7yb\nBso7fHJR/2kTCHngFcTxorRiP0AmnwCOQ6wVVbQnXuT+Jn4q9yKhADnW81HP\nG8eVHoch9uhBVni2bLuVMbzQGcamDV/U547xAQut4nEcDhC3csdhsP5+lvgQ\nC7OO6PCP0PQVnIybW1/XfksSjDkgqcjOULW9AES273kLUOsuTfB93R49C+w5\ngcJIeAMh3Rl7JtIYPSI7jISQH/QKYpgX9McxlF4u2fWPQBZHa6Vl39qJQTWS\net+Z4Z+RzbSgbiIV0WOX3dJYUcLiamZWYILnYKsRMy2977oq6TmTVDrj0ShV\n9+kmLRQQ6C69Y9pfEpz8qJOkMbZlWryaPVE8eQqNWB21T3NJdB/lEIvYiL6+\nxDU1YjOR0VjoDhooc4Srt/TAEyEQOX0ThE5kHumYKKhAlRvbZtoVCwp0N3lt\n0ZWI5949F5KVwm4/Be64oWBlfHjf+yD049pUfbPLvDy9MQ5k6gpRpC6TVfB1\nuJTUdFqpKEmCQ13Nnd1KdK/by3TZeK0xu62KlDhKgxvzPfSli97giq99WyV7\n8NHHhkywIi6jd1tlTbBDlBsYAhu1iURURN1ong97xniuXYHVwkZw827rqIMA\nkm8I\r\n=p1oc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-6fe5475_1551293062447_0.47984757208122497","host":"s3://npm-registry-packages"}},"9.0.0-rc.c8c7f64":{"name":"@githubprimer/octicons-react","version":"9.0.0-rc.c8c7f64","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@9.0.0-rc.c8c7f64","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"5a42c6fc3b0934d9560ab396e863bd04cd9dd243","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-9.0.0-rc.c8c7f64.tgz","fileCount":196,"integrity":"sha512-+BekpEYN/j4sxVhHWrmNwVno6svdTR2ZRVhpsYKhJHJDrkrxGfoV4bxg+LUllA8KGKhJuHAdG1WkLWYm8dB1Ag==","signatures":[{"sig":"MEQCIDX6JYrWbwqwhV/CUVBMNCU1Pi8Qo5o4pUEjDyF7JB/8AiAadKbY4O7Yc/59U5rABj9648fBSidU9MH34GaWUiX8TA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5wDQCRA9TVsSAnZWagAAmjgP/RIGINKsLq8g8KeMjgeh\nPGjvYoMf2iZW7tlWMR2ppgh8+SK/HAcOA3CeFVjpOG7XGYVombW04/CbCLt/\nAahpoJZuv+AXXIJGriLv7o4J4iwvRkxGCO1UFKQdowwdXlHnW6FHARMSYz4u\nmXaHy6LksZnZsmRCTH3y5Kgy9ts9h3uKTsFQzJU7uj/69U3mn2cFe2no7kLh\nvQ5/1bquvdDCjCx5YJCCByDWRsJTWGbZgks0+rQPUTDaQ9kA+I8aEM+e27NE\nq06fgVCrxAieMKGKpPbVZy7DRPj87nTR8916LvCleOpXa8z6VeM1b/i5dJbf\nFxS1UuwsZFwlQCfGZIdnC6QgYL0CQpOqpeoa8ngtM5RamjqLlcfP+DZNRWrM\nWYErxatNb8z0uczoTWHYoV9mAJmV+kbzmw4iRtzGYub6Y/EPkWfCsAI/WbMo\nAZzADdrUon5pojMP+M/St1bMXQDWhZNFLwgaqENBhJOanDLLY3oRmcP8ZIc4\nhhdDiCOauLIuSe4bTZMabkcF+ZW+kqPrfG7RKj+4jI8qpR74bZ4Je2WDZt3s\npIkcky7tUpzJvoTzOf4p/TSIQHfSQJf2olWspg3Tur+5P+wmF+QVhSmUhVOJ\nQQukyZtUJLlWj83Vhg5WiDjk2t99XEapGxwOayqOmRakr85/mvP0IVmT7sYk\nDlLw\r\n=1Ms8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@primer/octicons-react.svg)](https://www.npmjs.org/package/@primer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @primer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@primer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@primer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@primer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@primer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@primer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@primer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@primer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@primer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.3","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_9.0.0-rc.c8c7f64_1558642895389_0.6250924230732402","host":"s3://npm-registry-packages"}},"0.0.0-07ed59e":{"name":"@githubprimer/octicons-react","version":"0.0.0-07ed59e","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-07ed59e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"ef30d773ad3b04f257c4bac4e22fe619964827ea","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-07ed59e.tgz","fileCount":199,"integrity":"sha512-LRU6gbBHhXT/oPV/i11HwUF/r03Q8JvevFmUiu54EjxwlznjVOLPSIQpSAe5lY0b4cnBkHY4S2RF3Jb4rU1pBw==","signatures":[{"sig":"MEUCIQCdrsQSTaYRR9/8yRHNjiurXIBemIvRbNOaWo7WQnGNFAIgZXDkT/nuB7RDCCgVnkpb1dWo7iesnNy272OeXyJPd1M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc6Gl0CRA9TVsSAnZWagAApagQAJy3bXeaAIlbtp24vAgT\nQpqMFzJKgs/VnxiaaE2WoVH52aZMQHeAPGdvMz+M30u4VvubwnB/powt9lfp\nMcz7hXFU7+Fo4MubVFIZixlU2nGS0hNi8Kxok+pFv2A0EiB8uNGk28o6fUtP\nvhTza7MTrB4XwSCsLOHpgEBe/Z2EirYbVnniLYevYYdR5TSlvsizi6l+jJDX\neFtlPaMPz/fSibEiB1bcOE5ef6aV0E2wmjDKIxfhe/2i+iKUtkdMtdZ3kEQ4\nKqChM8F6O3NCDfIh6vK8fClhPRR5ZEKBrGMCkEJvgLCKWPxDgIc9C3XnkVWY\nnL3fyE8dZmavh5FJe7UZGv4V42brOKIIWu6w9qOLajLbxPME4QjTYRNvBWOb\nmdfGGHZLdS0ptt+kbC5abPUSS+1/pnXgEbV1oU8ogBN5NPm56EqJa7sgFQut\nmoFZXo4KI9cog0NgfG1GVaDtcu3J90WNEibgtqSZvezBzc3qCBMeMMMBreN/\n9duK2M70hQXeUSClRStzp+MY0RQiPwQ30FoLrABp/DypGOeVx+un0IIXdzv5\nkjiAVpNw8rhl+tSbYy9Bm5nNPdwpKRoxpV5nlO3bbxwfOn3W3VTP7dswRzMs\ny3HwgNseMEmydHKr7Uva8AGsfhNAVokO8JWDc5b1CHfIq7z1le70JrZXOH44\nPVFh\r\n=+7L/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.4.1","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.15.3","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-07ed59e_1558735220285_0.8716934517889241","host":"s3://npm-registry-packages"}},"0.0.0-a271831":{"name":"@githubprimer/octicons-react","version":"0.0.0-a271831","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@githubprimer/octicons-react@0.0.0-a271831","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"https://octicons.github.com","bugs":{"url":"https://github.com/primer/octicons/issues"},"dist":{"shasum":"6de7165d68ce597bcf15eaebad6058c88b829ed3","tarball":"https://registry.npmjs.org/@githubprimer/octicons-react/-/octicons-react-0.0.0-a271831.tgz","fileCount":196,"integrity":"sha512-QYB0jE5J/9o0aijxahm6nHKHGTKQXqjFGzdHw9ZwVYKqRQJIhu37U8bbfqeEoNhuoS1awLw3oh3zqxmtbg81kg==","signatures":[{"sig":"MEYCIQCyWTXp2X2bnE6lvSp1lBqMo2ISqEiIfRo9oVYG+UXUOgIhAKLZRu5Qu+69YUJMvDaymyt2qj+0WXVwJ0nRPYraN8zq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7u9xCRA9TVsSAnZWagAALvgQAIR6dY6U5c36xNixzVjE\nezTabi4+x15svx9dUh4B3PyWDp1pYp0FzL+21fj3Fnguvdp99Kpyt4zRE9Bq\n90o7rl74rqGm8m0EPvIoK6MulmhpoyhzfvhemODI3GVDF1wyH124HoDyy/gj\n5qGA0lOYNgDQyiZizucvm7mHN09P9VQPnnQRZEMhRhVKGgUkeByBQSK7Sra/\ncrhagZa0CB8vTCL3MxzhsnkwcMgwfhHi/JlwdwkarX9Z3ttcvcl1CCqC9uPQ\ndo3y2GBQNTLP54g72PlgL1gsiF+rM5vw+0vy/V8rD7g4JEI+4xIqgZmMKmXN\nE48o1XI+p8R+cCipziSH50Zlqo6lIubJaWzsWpQrcopbCDIn79sP1+nvi3NJ\nrrJETR79YtT8u1zQxM9uWqqPXqMLwhgL4GWoCJh4GCNFK4wB+IKvMc6f1A+y\nj0eBL1SF5aEeDxVJb++EgGkfWCcnZt4tfm4U6DHcbCGUiCis5aLOT0orvu2G\n52K6sw/CH8KVS8LgOlJP7GWYsb96fww4MJnvREteve5Drs19T6ZL+/AYBSW9\nXmTDXPufQefMmyO1PSn4ineIrICLzKTLK6fr4WtHzkksV8pU+HBb7codu1VH\nKzyONm0KYfKE7YAvOfhShlmWyfTkp5Sb8/6PZq/VBhCOt2kZHhvETFLqIc16\n1xcu\r\n=zzT7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# [Octicons] for React\n\n[![npm version](https://img.shields.io/npm/v/@githubprimer/octicons-react.svg)](https://www.npmjs.org/package/@githubprimer/octicons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n## Install\n\n```\n$ npm install @githubprimer/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an Octicon that renders\nthe `<svg>` element and all of its attributes. To render a specific icon, you\nmust pass it either via the `icon` prop, or as the only child:\n\n```jsx\n/**\n * The prop form is shorter, but doesn't allow you to pass icon props.\n */\n<Octicon icon={Icon} />\n\n/**\n * The child form allows you to pass props.\n */\n<Octicon><Icon x={10}/></Octicon>\n```\n\nNote that none of our builtin icons take props, so unless you're creating\n[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.\n\n### Icons\nThe `@githubprimer/octicons-react` module exports the `Octicon` component as\n`default` and the individual icon symbols as separate [named\nexports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This\nallows you to import only the icons that you need without blowing up your\nbundle:\n\n```jsx\nimport React from 'react'\nimport Octicon, {Beaker, Zap} from '@githubprimer/octicons-react'\n\nexport default function Icon({boom}) {\n  return <Octicon icon={boom ? Zap : Beaker}/>\n}\n```\n\nIf you were to compile this example with a tool that supports [tree-shaking][]\n(such as Webpack, Rollup, or Parcel) the resulting bundle would only include\nthe \"zap\" and \"beaker\" icons.\n\n### All icons\nIf you don't mind your bundle being huge or you need to be able to render\narbitrarily named icons at runtime, you can import either of the following\nnamed exports:\n\n#### `getIconByName()`\nThe `getIconByName` export is a function that takes a lowercase octicon name\n(such as `arrow-right`) and returns the corresponding icon class. Using this\nhelper, it's possible to create an Octicon class that takes a `name` prop and\nresolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon, {getIconByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIconByName(name)} />\n}\n```\n\n#### `iconsByName`\nThe `iconsByName` export is an object that maps keys (such as `arrow-right` or\n`zap`) to component functions, which you can use to generate listings of all\nthe octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon, {iconsByName} from '@githubprimer/octicons-react'\n\nexport default function OcticonsList() {\n  return (\n    <ul>\n      {Object.keys(iconsByName).map(key => (\n        <li key={key}>\n          <tt>{key}</tt>\n          <Octicon icon={iconsByName[key]}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Vertical alignment\nBy default the octicons have `vertical-align: text-bottom;` applied as inline\nstyles. You can change the alignment via the `verticalAlign` prop, which can be\neither `middle`, `text-bottom`, `text-top`, or `top`.\n\n```js\nimport Octicon, {Repo} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github\n  </h1>\n)\n```\n\n\n### `ariaLabel`\nYou have the option of adding accessibility information to the icon with the\n[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the\ncapitalization of `L`!).\n\n```js\n// Example usage\nimport Octicon, {Plus} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\nThe `size` prop takes `small`, `medium`, and `large` values that can be used to\nrender octicons at standard sizes:\n\n| Prop | Rendered Size |\n| :- | :- |\n| `size='small'` | 16px height by `computed` width |\n| `size='medium'` | 32px height by `computed` width |\n| `size='large'` | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon, {LogoGithub} from '@githubprimer/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n\n## Custom icons\nEach of our icon components is really just a function that renders its SVG\n`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component\ndetermines the `viewBox` of the `<svg>` element by first looking for a `size`\narray on the icon component class. For instance, if you wanted to create a\ncustom icon that consisted of three circles side by side, you could do this:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@githubprimer/octicons-react'\n\nfunction CirclesIcon() {\n  return (\n    <React.Fragment>\n      <circle r={5} cx={5} cy={5}/>\n      <circle r={5} cx={15} cy={5}/>\n      <circle r={5} cx={25} cy={5}/>\n    </React.Fragment>\n  )\n}\n\nCirclesIcon.size = [30, 10]\n\nexport default CirclesOcticon(props) {\n  return <Octicon {...props} icon={CirclesIcon} />\n}\n```\n\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo\nguidelines](https://github.com/logos).\n\n[MIT](./LICENSE)  \n\n[octicons]: https://octicons.github.com/\n[primer]: https://github.com/primer/primer\n[docs]: http://primercss.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\n[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\n","engines":{"node":">=8"},"scripts":{"lint":"eslint src pages script","test":"jest","build":"script/build.js && script/types.js && npm run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","ts-test":"tsc -P ts-tests","posttest":"npm run ts-test"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"_npmVersion":"6.9.0","description":"A scalable set of icons handcrafted with <3 by GitHub.","directories":{},"_nodeVersion":"10.16.0","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^5.1.0","react":"^16.4.0","eslint":"^5.0.1","rollup":"^0.62.0","fs-extra":"^6.0.1","react-dom":"^16.4.1","typescript":"^2.9.2","@types/react":"^16.4.6","primer-react":"0.0.6-alpha.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","eslint-plugin-jest":"^21.17.0","react-test-renderer":"^16.4.1","rollup-plugin-babel":"^3.0.5","babel-preset-stage-0":"^6.24.1","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.0.0-a271831_1559162736948_0.08718594217582809","host":"s3://npm-registry-packages"}}},"time":{"created":"2018-07-13T00:00:56.653Z","modified":"2025-08-06T21:35:44.583Z","8.0.0":"2018-07-13T00:00:56.817Z","8.1.0-alpha.654d9e0e":"2018-08-28T21:07:18.097Z","8.1.0-alpha.f38b1615":"2018-08-28T21:15:58.816Z","8.1.0-alpha.0f7dcd39":"2018-08-28T21:58:34.825Z","8.1.0-alpha.389cfd40":"2018-08-28T22:12:25.159Z","8.1.0-alpha.10b70995":"2018-08-28T22:19:32.054Z","8.2.0-alpha.fd92766c":"2018-08-30T18:20:03.515Z","8.1.0":"2018-08-30T18:59:40.977Z","8.2.0-alpha.b2d34911":"2018-11-07T17:29:57.691Z","8.2.0-alpha.4c94151d":"2018-11-08T18:31:19.664Z","8.2.0-alpha.922a9dc3":"2018-11-08T18:53:27.891Z","8.2.0-alpha.54e3a20a":"2018-11-08T21:16:38.410Z","8.1.1":"2018-11-09T16:44:56.029Z","8.2.0-alpha.e533a200":"2018-11-09T18:04:11.115Z","8.1.2":"2018-11-09T18:15:48.503Z","8.2.0-alpha.84b7d794":"2018-11-16T00:18:24.286Z","8.2.0-alpha.02477e4a":"2018-11-16T01:30:44.483Z","8.2.0-alpha.2edf502d":"2018-11-16T20:37:33.833Z","8.1.3":"2018-11-16T21:52:32.425Z","8.2.0-alpha.c4b0d3f9":"2018-12-04T18:28:07.183Z","8.3.0-alpha.1279dfdb":"2018-12-04T19:28:28.684Z","8.3.0-alpha.d5b1062c":"2018-12-04T20:44:30.565Z","8.2.0":"2018-12-04T21:08:56.247Z","8.3.0-alpha.6aa0af0f":"2018-12-21T00:58:53.058Z","8.3.0-alpha.7f92597b":"2019-01-07T04:15:49.925Z","8.3.0-alpha.84b9714a":"2019-01-08T23:39:17.211Z","8.3.0-alpha.7cb9c615":"2019-01-09T00:30:04.439Z","8.4.0-alpha.4585d562":"2019-01-09T20:30:31.095Z","8.3.0":"2019-01-09T21:20:26.754Z","8.3.1-alpha.4caf950":"2019-01-31T21:20:52.421Z","0.0.0-d9c97ed15":"2019-01-31T21:45:49.209Z","0.0.0-afb86ad68":"2019-01-31T21:53:05.981Z","0.0.0-882a0ed25":"2019-01-31T21:54:49.563Z","0.0.0-ccf081821":"2019-01-31T22:28:02.999Z","0.0.0-34faa7fd3":"2019-01-31T22:31:25.245Z","0.0.0-077b223ac":"2019-01-31T23:09:57.599Z","0.0.0-84258b16d":"2019-01-31T23:10:50.149Z","0.0.0-9776a3ed6":"2019-01-31T23:46:08.560Z","0.0.0-331f5d2d0":"2019-01-31T23:52:50.410Z","0.0.0-eb6b9b10b":"2019-01-31T23:59:18.339Z","0.0.0-4988110f6":"2019-02-01T00:07:11.421Z","0.0.0-e30d0a3dc":"2019-02-01T00:16:27.357Z","0.0.0-d99a3d474":"2019-02-01T05:50:21.382Z","0.0.0-664d0db92":"2019-02-01T06:15:46.935Z","8.4.0-rc.664d0db92":"2019-02-01T20:44:59.496Z","8.4.0-alpha.1f4f276b":"2019-02-06T18:00:58.775Z","0.0.0-393f6b620":"2019-02-08T16:58:33.957Z","0.0.0-f86cce052":"2019-02-08T17:09:55.372Z","0.0.0-34d72ab11":"2019-02-08T17:14:03.760Z","0.0.0-472f062d7":"2019-02-08T17:51:08.245Z","8.4.0-rc.f1308d425":"2019-02-08T18:00:46.016Z","8.4.0-rc.953315016":"2019-02-08T18:10:50.962Z","8.4.0-rc.f2bedd970":"2019-02-08T18:12:16.054Z","8.4.0-rc.d1d759b31":"2019-02-08T18:24:20.073Z","8.4.0-rc.e5557e7d2":"2019-02-08T18:35:30.544Z","8.4.0-rc.bb3e05a91":"2019-02-08T18:47:04.068Z","8.4.0-rc.6e56d0b8d":"2019-02-08T18:53:55.793Z","8.4.0-rc.eb2892852":"2019-02-08T19:15:18.236Z","8.4.0-rc.e9f41f07f":"2019-02-08T19:23:50.306Z","8.4.0-rc.ef0cbc7":"2019-02-08T19:25:45.470Z","8.4.0":"2019-02-08T19:58:24.701Z","0.0.0-3bc65b5":"2019-02-08T20:53:46.875Z","0.0.0-e70858e":"2019-02-08T20:59:35.206Z","8.4.1-rc.e70858e":"2019-02-08T21:03:50.187Z","0.0.0-fefd4aa":"2019-02-08T21:43:01.278Z","8.4.1-rc.9e6fd8e":"2019-02-08T21:51:19.894Z","8.4.1":"2019-02-08T23:27:20.458Z","0.0.0-7617fe5":"2019-02-11T19:06:04.751Z","0.0.0-d317f23":"2019-02-11T19:14:35.020Z","0.0.0-1de7750":"2019-02-12T22:24:41.371Z","0.0.0-082eb92":"2019-02-12T23:08:41.294Z","0.0.0-3f87998":"2019-02-12T23:32:55.991Z","0.0.0-13af5f6":"2019-02-12T23:54:29.571Z","0.0.0-8fe30ae":"2019-02-13T00:09:17.926Z","0.0.0-51409f7":"2019-02-13T00:26:06.163Z","0.0.0-af8bd6a":"2019-02-13T00:30:28.117Z","0.0.0-61f3707":"2019-02-13T00:43:01.803Z","0.0.0-0962ea2":"2019-02-13T00:50:26.801Z","0.0.0-6a42072":"2019-02-13T00:54:02.313Z","0.0.0-7c22536":"2019-02-15T22:48:24.994Z","0.0.0-7ec36bd":"2019-02-15T23:01:48.209Z","0.0.0-132950f":"2019-02-16T00:30:49.211Z","0.0.0-6688540":"2019-02-19T22:36:18.718Z","8.4.2-rc.074ae80":"2019-02-19T22:49:18.162Z","8.4.2-rc.c846faf":"2019-02-19T23:35:40.822Z","8.4.2":"2019-02-20T17:39:27.181Z","0.0.0-599fde6":"2019-02-20T17:50:38.831Z","0.0.0-8e4eac2":"2019-02-22T23:00:21.078Z","0.0.0-49f1512":"2019-02-22T23:02:10.120Z","0.0.0-ad7cf85":"2019-02-25T19:42:06.537Z","8.5.0-rc.7e0ac2b":"2019-02-25T20:26:58.507Z","8.5.0-rc.3e15d9b":"2019-02-25T20:31:33.596Z","0.0.0-a9a3db9":"2019-02-25T23:04:50.671Z","8.5.0-rc.1004aac":"2019-02-25T23:15:45.718Z","8.5.0-rc.abfa3a3":"2019-02-25T23:40:07.353Z","0.0.0-485365d":"2019-02-26T21:41:43.663Z","8.5.0-rc.5fe74f3":"2019-02-26T21:50:54.017Z","8.5.0":"2019-02-27T17:19:57.412Z","0.0.0-6fe5475":"2019-02-27T18:44:22.647Z","9.0.0-rc.c8c7f64":"2019-05-23T20:21:35.545Z","0.0.0-07ed59e":"2019-05-24T22:00:20.430Z","0.0.0-a271831":"2019-05-29T20:45:37.137Z"},"bugs":{"url":"https://github.com/primer/octicons/issues"},"author":{"name":"GitHub, Inc."},"license":"MIT","homepage":"https://octicons.github.com","keywords":["GitHub","icons","svg","octicons","react","primer"],"repository":{"url":"git+https://github.com/primer/octicons.git","type":"git"},"description":"A scalable set of icons handcrafted with <3 by GitHub.","maintainers":[{"email":"yes@jonrohan.codes","name":"jonrohan"},{"email":"design-systems@github.com","name":"primer-css"}],"readme":"","readmeFilename":""}