{"_id":"@github/octicons-react","_rev":"76-47a1c1005b08248b00bbb7f3fe3bdc6b","name":"@github/octicons-react","dist-tags":{"alpha":"7.4.0-alpha.45ba88e5","latest":"7.4.0"},"versions":{"1.1.0-alpha.542d2f63":{"name":"@github/octicons-react","version":"1.1.0-alpha.542d2f63","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub Inc."},"license":"MIT","_id":"@github/octicons-react@1.1.0-alpha.542d2f63","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"bbca8b65fa8aa96ad7ad71ce4322a70aeb391a74","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-1.1.0-alpha.542d2f63.tgz","fileCount":4,"integrity":"sha512-/qvIaTG0cDj1otsXDEihe/jcZrEYRHrQ0aUrBgbvN+dI6OxqGGDnj/T0J6i2/dpfIbzUBDIzxKZbEfJdkrMEfw==","signatures":[{"sig":"MEQCIB0bHWeW+CykwAZBY92XT5y/E1x0j8821jeOF27MqH+GAiAhp+/RWjWOVfJS93K5F3jpn9hm9ijuhAHEjWUu5UbgWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4840},"main":"index.js","babel":{"presets":["env","react"]},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"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":"9.3.0","dependencies":{"react":"^16.2.0","octicons":"7.1.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1"},"peerDependencies":{"react":">=16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_1.1.0-alpha.542d2f63_1519242736432_0.4798902065176256","host":"s3://npm-registry-packages"}},"0.2.0-alpha.a0d68d5d":{"name":"@github/octicons-react","version":"0.2.0-alpha.a0d68d5d","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub Inc."},"license":"MIT","_id":"@github/octicons-react@0.2.0-alpha.a0d68d5d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"98812e8a49d846e434f4e37227d49c2007aadfe9","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-0.2.0-alpha.a0d68d5d.tgz","fileCount":5,"integrity":"sha512-siZ60o62Y6RwhJdIu/8bXA1zh+fORNHwFIKVuq9XoxbqC7rqBTei7Q9QFzyeNJ4QkE03WDjv2v4bpvqr1QXr+A==","signatures":[{"sig":"MEUCIQDXh/LrADAuUK7ZNH7UuT5g//aWsnlgKKnUBpl/3t7OigIgHrDu694+Q0dGedOVou/u911brTsAIyEa6FkOsIlaBzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8945},"main":"dist/index.js","babel":{"presets":["env","react"]},"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> A react component for installing octicons\n\n## Install\n\n```\n$ npm install @github/octicons-react --save\n```\n\n## Usage\n\nThe entire library will be available when importing `@github/octicons-react`. Specifying the [icon you want to use][octicons], by supplying the `name=\"\"` to the component.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nconst AlertIcon = <Octicon name=\"alert\" />\n```\n\n##### ariaLabel\n\nYou have the option to add accessibility information to the icon using `aria-label`.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nconst PlusIcon = <Octicon name=\"plus\" ariaLabel=\"Add new item\" />\n```\n\n\n##### width & height\n\nYou can change the dimensions of the icon by setting `width` and/or `height`. We recommended you supply **only the height**, because this will then calculate the appropriate width based on the viewBox size.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nconst BiggestLogo = <Octicon name=\"logo-github\" height=\"500\" />\n```\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo guidelines](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","scripts":{"build":"$(npm bin)/babel index.js -d dist","prepare":"npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"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":"9.3.0","dependencies":{"react":"^16.2.0","octicons":"7.2.0-alpha.a0d68d5d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1"},"peerDependencies":{"react":">=16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.2.0-alpha.a0d68d5d_1519272589651_0.7123794407434962","host":"s3://npm-registry-packages"}},"0.2.0-alpha.d7728f2d":{"name":"@github/octicons-react","version":"0.2.0-alpha.d7728f2d","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub Inc."},"license":"MIT","_id":"@github/octicons-react@0.2.0-alpha.d7728f2d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"152e95cd2159b9e87c405e1f17b36d7b4bb7e73d","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-0.2.0-alpha.d7728f2d.tgz","fileCount":5,"integrity":"sha512-zhhQ5cXzw9FoC5KjF53KGGU5TES7ZZrKlFabaJwU/Z3oxobjwdcb+ou/FBBvrphpOpOTYAvlfgxRhefkZPHorA==","signatures":[{"sig":"MEUCIQD17c8uTXypUuOYiS+O9VK25ztgB2McStDesFF1YVXBGwIgIrKwPupIQg34Qwi7YlFOB3sqDgwIpQXGmCakjjjLBYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8993},"main":"build/index.js","babel":{"presets":["env","react"]},"files":["index.js","build"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> A react component for installing octicons\n\n## Install\n\n```\n$ npm install @github/octicons-react --save\n```\n\n## Usage\n\nThe entire library will be available when importing `@github/octicons-react`. Specifying the [icon you want to use][octicons], by supplying the `name=\"\"` to the component.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nconst AlertIcon = <Octicon name=\"alert\" />\n```\n\n##### ariaLabel\n\nYou have the option to add accessibility information to the icon using `aria-label`.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nconst PlusIcon = <Octicon name=\"plus\" ariaLabel=\"Add new item\" />\n```\n\n\n##### width & height\n\nYou can change the dimensions of the icon by setting `width` and/or `height`. We recommended you supply **only the height**, because this will then calculate the appropriate width based on the viewBox size.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nconst BiggestLogo = <Octicon name=\"logo-github\" height=\"500\" />\n```\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo guidelines](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","scripts":{"build":"$(npm bin)/babel index.js -d build","prepare":"npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"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":"9.3.0","dependencies":{"react":"^16.2.0","octicons":"7.2.0-alpha.d7728f2d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1"},"peerDependencies":{"react":">=16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_0.2.0-alpha.d7728f2d_1519272759483_0.5450104186821112","host":"s3://npm-registry-packages"}},"1.1.0-alpha.60d21a75":{"name":"@github/octicons-react","version":"1.1.0-alpha.60d21a75","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub Inc."},"license":"MIT","_id":"@github/octicons-react@1.1.0-alpha.60d21a75","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"c6cccc30ba0aeda5812d97b3696d04b7a646dfec","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-1.1.0-alpha.60d21a75.tgz","fileCount":5,"integrity":"sha512-S+XeQSj0B8r6O23BbBTRHVts+37SjGI5nVUBr2IdeWVauFgCOvrtD+S6/7ZxVhmL1UptzlcdSgS4J4pJxzSgVw==","signatures":[{"sig":"MEUCIQCbZzJv0+n1LmiOyw6MBAEOJZSgNv5viEjcg9qQ/GcNdQIgQfNKX8O4v/VfGRwd0ZRM/K3BhtFgBRBPoB7YamJCTUw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9848},"main":"build/index.js","babel":{"presets":["env","react"]},"files":["index.js","build"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> A react component for installing octicons\n\n## Install\n\n```\n$ npm install @github/octicons-react --save\n```\n\n## Usage\n\nThe entire library will be available when importing `@github/octicons-react`. Specifying the [icon you want to use][octicons], by supplying the `name=\"\"` to the component.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nconst AlertIcon = <Octicon name=\"alert\" />\n```\n\n##### ariaLabel\n\nYou have the option to add accessibility information to the icon using `aria-label`.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nconst PlusIcon = <Octicon name=\"plus\" ariaLabel=\"Add new item\" />\n```\n\n\n##### width & height\n\nYou can change the dimensions of the icon by setting `width` and/or `height`. We recommended you supply **only the height**, because this will then calculate the appropriate width based on the viewBox size.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nconst BiggestLogo = <Octicon name=\"logo-github\" height=\"500\" />\n```\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo guidelines](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","scripts":{"lint":"$(npm bin)/github-lint","build":"$(npm bin)/babel index.js -d build","prepare":"npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"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":"9.3.0","dependencies":{"react":"^16.2.0","octicons":"7.2.0-alpha.60d21a75"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^4.18.1","babel-cli":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","eslint-plugin-github":"^0.23.0"},"peerDependencies":{"react":">=16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_1.1.0-alpha.60d21a75_1519277198672_0.23310329428284615","host":"s3://npm-registry-packages"}},"1.2.0-alpha.9d94633b":{"name":"@github/octicons-react","version":"1.2.0-alpha.9d94633b","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub Inc."},"license":"MIT","_id":"@github/octicons-react@1.2.0-alpha.9d94633b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"4ff43133bf24896d82090c9428914a92b522df4a","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-1.2.0-alpha.9d94633b.tgz","fileCount":5,"integrity":"sha512-c+zFlKVkpQAg5VPuexgVpqOgF9tI+SCOdzi77JLoMb8nENimimkxrfo0kQ9De9t9QxmhXbuJqPIcewL2FHgHhQ==","signatures":[{"sig":"MEQCIHy6wKYB9fdNFww/YYS64NCVzq2JMuoKwfZn491sRDgAAiAdf+Gz3byRCc+3UdeFBIk6l3wGnwLwyRNwoufljDN7Qg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9848},"main":"build/index.js","babel":{"presets":["env","react"]},"files":["index.js","build"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> A react component for installing octicons\n\n## Install\n\n```\n$ npm install @github/octicons-react --save\n```\n\n## Usage\n\nThe entire library will be available when importing `@github/octicons-react`. Specifying the [icon you want to use][octicons], by supplying the `name=\"\"` to the component.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nconst AlertIcon = <Octicon name=\"alert\" />\n```\n\n##### ariaLabel\n\nYou have the option to add accessibility information to the icon using `aria-label`.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nconst PlusIcon = <Octicon name=\"plus\" ariaLabel=\"Add new item\" />\n```\n\n\n##### width & height\n\nYou can change the dimensions of the icon by setting `width` and/or `height`. We recommended you supply **only the height**, because this will then calculate the appropriate width based on the viewBox size.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nconst BiggestLogo = <Octicon name=\"logo-github\" height=\"500\" />\n```\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo guidelines](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","scripts":{"lint":"$(npm bin)/github-lint","build":"$(npm bin)/babel index.js -d build","prepare":"npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"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":"9.3.0","dependencies":{"react":"^16.2.0","octicons":"7.2.0-alpha.9d94633b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^4.18.1","babel-cli":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","eslint-plugin-github":"^0.23.0"},"peerDependencies":{"react":">=16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_1.2.0-alpha.9d94633b_1519277397739_0.15558305469784695","host":"s3://npm-registry-packages"}},"1.2.0-alpha.8f120ac7":{"name":"@github/octicons-react","version":"1.2.0-alpha.8f120ac7","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub Inc."},"license":"MIT","_id":"@github/octicons-react@1.2.0-alpha.8f120ac7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"99ca7a3b7a958e7f1492cdc31f37c3a090abc0d5","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-1.2.0-alpha.8f120ac7.tgz","fileCount":5,"integrity":"sha512-+5QgwnFNfAqo5oBmriUy/lkaA7usuyjW+2TiI3JxrISfUSM92+uBWyiWOSHvbkQIyfUSPAAStmaHYirdBIzdfw==","signatures":[{"sig":"MEYCIQDHtHjlJJY/s1E4lSkeOONCOqLFrqO/nN/YVtgi4f++uQIhAPooO6Nvh+l3lz60zkvpYyA9q+4/udit52i533hsGdAb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9854},"main":"build/index.js","babel":{"presets":["env","react"]},"files":["index.js","build"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> A react component for installing octicons\n\n## Install\n\n```\n$ npm install @github/octicons-react --save\n```\n\n## Usage\n\nThe entire library will be available when importing `@github/octicons-react`. Specifying the [icon you want to use][octicons], by supplying the `name=\"\"` to the component.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nconst AlertIcon = <Octicon name=\"alert\" />\n```\n\n##### ariaLabel\n\nYou have the option to add accessibility information to the icon using `aria-label`.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nconst PlusIcon = <Octicon name=\"plus\" ariaLabel=\"Add new item\" />\n```\n\n\n##### width & height\n\nYou can change the dimensions of the icon by setting `width` and/or `height`. We recommended you supply **only the height**, because this will then calculate the appropriate width based on the viewBox size.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nconst BiggestLogo = <Octicon name=\"logo-github\" height=\"500\" />\n```\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo guidelines](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","scripts":{"lint":"$(npm bin)/github-lint","build":"$(npm bin)/babel index.js -d build","prepare":"npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"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":"9.3.0","dependencies":{"react":"^16.2.0","octicons":"7.2.0-alpha.8f120ac7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^4.18.1","babel-cli":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","eslint-plugin-github":"^0.23.0"},"peerDependencies":{"react":">=16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_1.2.0-alpha.8f120ac7_1519278949142_0.6093160529391815","host":"s3://npm-registry-packages"}},"1.2.0-alpha.b41121ca":{"name":"@github/octicons-react","version":"1.2.0-alpha.b41121ca","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub Inc."},"license":"MIT","_id":"@github/octicons-react@1.2.0-alpha.b41121ca","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"419c9910e741cd298c1325af8383377f9fff4f8c","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-1.2.0-alpha.b41121ca.tgz","fileCount":5,"integrity":"sha512-OUsxCDQq0FMZC5zOaFmUxqcMBcVB2ifFxzHbyd/Llh0aTwChencvPb26T088wf0m+UlIxY952mhAPwiEbvPssQ==","signatures":[{"sig":"MEUCIFtyn3eHT/FlchEjSWyDlGLyjwlzAblqlNE9XKW5+cMXAiEAkBBzblqrsBG7SW21pIICAFAB3aPn1UMU4eoFf/b0N3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10358},"main":"build/index.js","babel":{"presets":["env","react"]},"files":["index.js","build"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> A react component for installing octicons\n\n## Install\n\n```\n$ npm install @github/octicons-react --save\n```\n\n## Usage\n\nThe entire library will be available when importing `@github/octicons-react`. Specifying the [icon you want to use][octicons], by supplying the `name=\"\"` to the component.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nreturn (\n  <Octicon name=\"beaker\" />\n)\n```\n\n### Alignment\n\nBy default the octicons have `vertical-align: text-bottom;` applied to them. But there are cases where you'll want to change the alignment. The props available are `top`, `middle`.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nreturn (\n  <h1>\n    <Octicon name=\"repo\" large middle /> github/github\n  </h1>\n)\n```\n\n\n### ariaLabel\n\nYou have the option to add accessibility information to the icon using `aria-label`.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nreturn (\n  <button>\n    <Octicon name=\"plus\" ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\n\nThe properties `large`, `medium`, `small` are available for setting the size of the icon.\n\n| Prop | Rendered Size |\n| :- | :- |\n| Small | 16px height by `computed` width |\n| Medium | 32px height by `computed` width |\n| Large | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nreturn (\n  <h1>\n    <a href=\"https://github.com\">\n      <Octicon name=\"logo-github\" large ariaLabel=\"GitHub\"/>\n    </a>\n  </h1>\n)\n```\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo guidelines](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","scripts":{"lint":"$(npm bin)/github-lint","build":"$(npm bin)/babel index.js -d build","prepare":"npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"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":"9.3.0","dependencies":{"react":"^16.2.0","octicons":"7.2.0-alpha.b41121ca"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^4.18.1","babel-cli":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","eslint-plugin-github":"^0.23.0"},"peerDependencies":{"react":">=16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_1.2.0-alpha.b41121ca_1519758057527_0.7988851969071098","host":"s3://npm-registry-packages"}},"1.2.0-alpha.63ac8805":{"name":"@github/octicons-react","version":"1.2.0-alpha.63ac8805","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub Inc."},"license":"MIT","_id":"@github/octicons-react@1.2.0-alpha.63ac8805","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"bb77bfe4f8f66302165a80e239ac8e5dc771e39d","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-1.2.0-alpha.63ac8805.tgz","fileCount":181,"integrity":"sha512-TRIJvwvARWOZcCCSnFBtZg3swZcOAZkmdh0bI1g3A+dYkdhz25y5/h6EjAz1ClAVq8RbJUlvvQ1/Tg4zSpbPsw==","signatures":[{"sig":"MEUCIHFhe63wHYABGoQ31E+Ryv8lKA2HYSVu5uzF2DJxCn3VAiEAx3BofFBgCAwp3/pEbUSKcDptHsN7RV4AI4CSztn1nD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":223852},"main":"build/index.js","babel":{"presets":["env","react"]},"files":["index.js","build"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> A react component for installing octicons\n\n## Install\n\n```\n$ npm install @github/octicons-react --save\n```\n\n## Usage\n\nThe entire library will be available when importing `@github/octicons-react`. Specifying the [icon you want to use][octicons], by supplying the `name=\"\"` to the component.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nreturn (\n  <Octicon name=\"beaker\" />\n)\n```\n\nYou can also import only the icons you need by importing the specific icon names. This is useful if you’re trying to keep bundle size down.\n\n```js\n// Example usage\nimport { AlertOcticon, RepoOcticon, XOcticon } from \"@github/octicons-react\"\n\nreturn (\n  <AlertOcticon />\n)\n```\n\n### Alignment\n\nBy default the octicons have `vertical-align: text-bottom;` applied to them. But there are cases where you'll want to change the alignment. The props available are `top`, `middle`.\n\n```js\n// Example usage\nimport { RepoOcticon } from \"@github/octicons-react\"\n\nreturn (\n  <h1>\n    <RepoOcticon large middle /> github/github\n  </h1>\n)\n```\n\n\n### ariaLabel\n\nYou have the option to add accessibility information to the icon using `aria-label`.\n\n```js\n// Example usage\nimport { PlusOcticon } from \"@github/octicons-react\"\n\nreturn (\n  <button>\n    <PlusOcticon ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\n\nThe properties `large`, `medium`, `small` are available for setting the size of the icon.\n\n| Prop | Rendered Size |\n| :- | :- |\n| Small | 16px height by `computed` width |\n| Medium | 32px height by `computed` width |\n| Large | 64px height by `computed` width |\n\n```js\n// Example usage\nimport { LogoGithubOcticon } from \"@github/octicons-react\"\n\nreturn (\n  <h1>\n    <a href=\"https://github.com\">\n      <LogoGithubOcticon large ariaLabel=\"GitHub\"/>\n    </a>\n  </h1>\n)\n```\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo guidelines](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","scripts":{"lint":"$(npm bin)/github-lint","prepare":"node script/build.js","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.10.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lodash":"^4.17.5","octicons":"7.3.0-alpha.63ac8805","babel-cli":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1"},"peerDependencies":{"react":">=16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_1.2.0-alpha.63ac8805_1522119724398_0.6044685194519108","host":"s3://npm-registry-packages"}},"1.2.0-alpha.0a0d8862":{"name":"@github/octicons-react","version":"1.2.0-alpha.0a0d8862","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub Inc."},"license":"MIT","_id":"@github/octicons-react@1.2.0-alpha.0a0d8862","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"46b1f6693fc320dd17fefcf186812b657dec6a7c","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-1.2.0-alpha.0a0d8862.tgz","fileCount":181,"integrity":"sha512-nxfVHC24XQQFKfV8geVv+b9vtpuyqAKCvuZxWJiI80Wmbydj28toHnw+STEMEEFEFbWSJXzNUHL0gQKNK8pYiw==","signatures":[{"sig":"MEQCIB73/n82/UCZU1tzQiMkhPokhKNW/9kXnOCA+hopGmtqAiBDlGKi0QUBCkMgOKa5JVYVE4sDDr1jrEprYRyb0XytYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":223798},"main":"build/index.js","babel":{"presets":["env","react"]},"files":["build"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> A react component for installing octicons\n\n## Install\n\n```\n$ npm install @github/octicons-react --save\n```\n\n## Usage\n\nThe entire library will be available when importing `@github/octicons-react`. Specifying the [icon you want to use][octicons], by supplying the `name=\"\"` to the component.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nreturn (\n  <Octicon name=\"beaker\" />\n)\n```\n\nYou can also import only the icons you need by importing the specific icon names. This is useful if you’re trying to keep bundle size down.\n\n```js\n// Example usage\nimport { AlertOcticon, RepoOcticon, XOcticon } from \"@github/octicons-react\"\n\nreturn (\n  <AlertOcticon />\n)\n```\n\n### Alignment\n\nBy default the octicons have `vertical-align: text-bottom;` applied to them. But there are cases where you'll want to change the alignment. The props available are `top`, `middle`.\n\n```js\n// Example usage\nimport { RepoOcticon } from \"@github/octicons-react\"\n\nreturn (\n  <h1>\n    <RepoOcticon large middle /> github/github\n  </h1>\n)\n```\n\n\n### ariaLabel\n\nYou have the option to add accessibility information to the icon using `aria-label`.\n\n```js\n// Example usage\nimport { PlusOcticon } from \"@github/octicons-react\"\n\nreturn (\n  <button>\n    <PlusOcticon ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\n\nThe properties `large`, `medium`, `small` are available for setting the size of the icon.\n\n| Prop | Rendered Size |\n| :- | :- |\n| Small | 16px height by `computed` width |\n| Medium | 32px height by `computed` width |\n| Large | 64px height by `computed` width |\n\n```js\n// Example usage\nimport { LogoGithubOcticon } from \"@github/octicons-react\"\n\nreturn (\n  <h1>\n    <a href=\"https://github.com\">\n      <LogoGithubOcticon large ariaLabel=\"GitHub\"/>\n    </a>\n  </h1>\n)\n```\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo guidelines](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","scripts":{"prepare":"node script/build.js","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.10.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lodash":"^4.17.5","octicons":"7.3.0-alpha.0a0d8862","babel-cli":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1"},"peerDependencies":{"react":">=16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_1.2.0-alpha.0a0d8862_1522122626972_0.7674480557628973","host":"s3://npm-registry-packages"}},"1.2.0-alpha.e0464570":{"name":"@github/octicons-react","version":"1.2.0-alpha.e0464570","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub Inc."},"license":"MIT","_id":"@github/octicons-react@1.2.0-alpha.e0464570","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"508e2ab628a629d8943bad2c35db39328727b1f9","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-1.2.0-alpha.e0464570.tgz","fileCount":181,"integrity":"sha512-rF6x/G/asqtXeIDXE/Ajy9ReHe9WI54Gf4t7KpjnvTmS5AUTL06CVQPsYIaE/0WrXTTKudqqPVXtSrEcMcoXbw==","signatures":[{"sig":"MEQCIGedZGlYTsncmJaKnAclDCRj+mueatddjv8/xiSqW5zYAiAy57T+BuaRvfIUTdztYrZ5HBQ81alETK6VTzv6neLcOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207569},"main":"build/index.js","babel":{"presets":["env","react"]},"files":["build"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> A react component for installing octicons\n\n## Install\n\n```\n$ npm install @github/octicons-react --save\n```\n\n## Usage\n\nThe entire library will be available when importing `@github/octicons-react`. Specifying the [icon you want to use][octicons], by supplying the `name=\"\"` to the component.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nreturn (\n  <Octicon name=\"beaker\" />\n)\n```\n\nYou can also import only the icons you need by importing the specific icon names. This is useful if you’re trying to keep bundle size down.\n\n```js\n// Example usage\nimport { AlertOcticon, RepoOcticon, XOcticon } from \"@github/octicons-react/named\"\n\nreturn (\n  <AlertOcticon />\n)\n```\n\n### Alignment\n\nBy default the octicons have `vertical-align: text-bottom;` applied to them. But there are cases where you'll want to change the alignment. The props available are `top`, `middle`.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nreturn (\n  <h1>\n    <Octicon name=\"repo\" large middle /> github/github\n  </h1>\n)\n```\n\n\n### ariaLabel\n\nYou have the option to add accessibility information to the icon using `aria-label`.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nreturn (\n  <button>\n    <Octicon name=\"plus\" ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\n\nThe properties `large`, `medium`, `small` are available for setting the size of the icon.\n\n| Prop | Rendered Size |\n| :- | :- |\n| Small | 16px height by `computed` width |\n| Medium | 32px height by `computed` width |\n| Large | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nreturn (\n  <h1>\n    <a href=\"https://github.com\">\n      <Octicon name=\"logo-github\" large ariaLabel=\"GitHub\"/>\n    </a>\n  </h1>\n)\n```\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo guidelines](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","scripts":{"prepare":"node script/build.js","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.10.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lodash":"^4.17.5","octicons":"7.3.0-alpha.e0464570","babel-cli":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1"},"peerDependencies":{"react":">=16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_1.2.0-alpha.e0464570_1522185789585_0.14848031636247527","host":"s3://npm-registry-packages"}},"1.2.0-alpha.4ae41723":{"name":"@github/octicons-react","version":"1.2.0-alpha.4ae41723","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub Inc."},"license":"MIT","_id":"@github/octicons-react@1.2.0-alpha.4ae41723","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"6a920d855bd280847e213e82c075f993823ceaf5","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-1.2.0-alpha.4ae41723.tgz","fileCount":182,"integrity":"sha512-oHlJUq8hNZbkyMkTZRugAXBWivQ+JueV8K29B0mlb5jicN75Cf4buN0v5cKP7+qKFU0c5vAd6K82I7KIju/69Q==","signatures":[{"sig":"MEUCIQCNSJ2Bhrsvaml5n9qveni3IZsLucpxNCSH/jC9mrPObgIgLD4YiO6bRJQraxI7MLlllgv1JZHGPRpHJv2k+9/bjvE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":224468},"main":"build/index.js","babel":{"presets":["env","react"]},"files":["build","named.js"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> A react component for installing octicons\n\n## Install\n\n```\n$ npm install @github/octicons-react --save\n```\n\n## Usage\n\nThe entire library will be available when importing `@github/octicons-react`. Specifying the [icon you want to use][octicons], by supplying the `name=\"\"` to the component.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nreturn (\n  <Octicon name=\"beaker\" />\n)\n```\n\nYou can also import only the icons you need by importing the specific icon names. This is useful if you’re trying to keep bundle size down.\n\n```js\n// Example usage\nimport { AlertOcticon, RepoOcticon, XOcticon } from \"@github/octicons-react/named\"\n\nreturn (\n  <AlertOcticon />\n)\n```\n\n### Alignment\n\nBy default the octicons have `vertical-align: text-bottom;` applied to them. But there are cases where you'll want to change the alignment. The props available are `top`, `middle`.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nreturn (\n  <h1>\n    <Octicon name=\"repo\" large middle /> github/github\n  </h1>\n)\n```\n\n\n### ariaLabel\n\nYou have the option to add accessibility information to the icon using `aria-label`.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nreturn (\n  <button>\n    <Octicon name=\"plus\" ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\n\nThe properties `large`, `medium`, `small` are available for setting the size of the icon.\n\n| Prop | Rendered Size |\n| :- | :- |\n| Small | 16px height by `computed` width |\n| Medium | 32px height by `computed` width |\n| Large | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nreturn (\n  <h1>\n    <a href=\"https://github.com\">\n      <Octicon name=\"logo-github\" large ariaLabel=\"GitHub\"/>\n    </a>\n  </h1>\n)\n```\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo guidelines](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","scripts":{"prepare":"node script/build.js","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.10.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lodash":"^4.17.5","octicons":"7.3.0-alpha.4ae41723","babel-cli":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1"},"peerDependencies":{"react":">=16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_1.2.0-alpha.4ae41723_1522186645044_0.7043005600399654","host":"s3://npm-registry-packages"}},"7.4.0-alpha.b3713556":{"name":"@github/octicons-react","version":"7.4.0-alpha.b3713556","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub Inc."},"license":"MIT","_id":"@github/octicons-react@7.4.0-alpha.b3713556","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"99e8165016dcbb6ef8379df814dadd3a44298824","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-7.4.0-alpha.b3713556.tgz","fileCount":183,"integrity":"sha512-DhWhwRcp/Lw4NQYEdv/Fk1/SBI7l2iyeFcSWfxA0r68mxghv49jNb69HD2P0gXls5jReV6P/2mSaiWzvipKlig==","signatures":[{"sig":"MEUCICG2rH1v4ssr0kyCnM8hu7HrUcxYNXrMa5pOqTIi4gbtAiEAwo8y6Jr59XI40WOyWc7pz4uzwF5LwtXvrrPn2CFN2ZA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbMWFICRA9TVsSAnZWagAATbEP+QAUabha8q7yWYoldrtQ\n3Ow6du/TYFKULRVNVVkmTBr3nWAXwQ7eu/U3KUPEwaIxd/i5pirh7EWYls6K\nfvcNu7vGfoXKCuv/iY5F8LVyyd+lNDX719h2zVr23hS4+o+shcQwExnCJYx9\nBbv9OitPC8oHOZgKbf9/+FZT2jy+HP4QXFYQrCviXYAyz4csiMMBCwG8zxir\nhlBsg/KXTFVeVBRpfFT04CPg6VH/egwVwidVoXznT+V1Yqj0CjgGoGVDfkyP\nWXr+Iy3ywI0lBa6dUIPgMFdmdM19F/H+rJaEBrDBe8Zc3gLK7RNC9X+D/edc\n0/VaC3Okx31HSO6ur0uidlPp+XMBTYbNPiScnaw5/6rL+P7yJALZjZfArPNy\nR05YCPH1ZKkeVYR4VFvunClwCAFrH3Ze9wTkGgMzG9Fziz1O3s8HGYgsEEgH\nLyARKEamOlpHKqevgbCWzmqf9IYABF/1IWgeLof6qzaVsX0frvfgInsl3Yid\nRnJZaDQ2VYBQwp/v2Y66pFoAwHOSvPWMj2dDyN6I3nRXQoWKJtzgqU/Y0RZB\nxyeiUJU8+2MkKm/MqrW+H/V4qbEKmAqEjuE277bLX23nHAZWr7ElPz+oDrxz\nhzvTr1lsIulkmazRNiWw8k/WgS3cEiJotScL4co6WvxKx5fgrDO4LfuwLRVs\nTLW1\r\n=rO0G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","files":["icons","index.js","pages"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> A react component for installing octicons\n\n## Install\n\n```\n$ npm install @github/octicons-react --save\n```\n\n## Usage\n\nThe entire library will be available when importing `@github/octicons-react`. Specifying the [icon you want to use][octicons], by supplying the `name=\"\"` to the component.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nreturn (\n  <Octicon name=\"beaker\" />\n)\n```\n\nYou can also import only the icons you need by importing the specific icon names. This is useful if you’re trying to keep bundle size down.\n\n```js\n// Example usage\nimport { AlertOcticon, RepoOcticon, XOcticon } from \"@github/octicons-react/named\"\n\nreturn (\n  <AlertOcticon />\n)\n```\n\n### Alignment\n\nBy default the octicons have `vertical-align: text-bottom;` applied to them. But there are cases where you'll want to change the alignment. The props available are `top`, `middle`.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nreturn (\n  <h1>\n    <Octicon name=\"repo\" large middle /> github/github\n  </h1>\n)\n```\n\n\n### ariaLabel\n\nYou have the option to add accessibility information to the icon using `aria-label`.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nreturn (\n  <button>\n    <Octicon name=\"plus\" ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\n\nThe properties `large`, `medium`, `small` are available for setting the size of the icon.\n\n| Prop | Rendered Size |\n| :- | :- |\n| Small | 16px height by `computed` width |\n| Medium | 32px height by `computed` width |\n| Large | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nreturn (\n  <h1>\n    <a href=\"https://github.com\">\n      <Octicon name=\"logo-github\" large ariaLabel=\"GitHub\"/>\n    </a>\n  </h1>\n)\n```\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo guidelines](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","scripts":{"start":"next","prepare":"script/build.js","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.3","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"next":"^6.0.3","react":"^16.4.0","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_7.4.0-alpha.b3713556_1529962824630_0.617219058231538","host":"s3://npm-registry-packages"}},"7.4.0-alpha.cecb4ef2":{"name":"@github/octicons-react","version":"7.4.0-alpha.cecb4ef2","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub Inc."},"license":"MIT","_id":"@github/octicons-react@7.4.0-alpha.cecb4ef2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"f826d5a4c34e72160f8a945da38628ae2879691b","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-7.4.0-alpha.cecb4ef2.tgz","fileCount":184,"integrity":"sha512-2Mrcbmts+Rz8qj6pt8myj18wShMOYuPO/Nc6saJOq3WIgmk0A/X4Qqfe1yDpMvsv648fWdhZUsABlTFqT7VnsA==","signatures":[{"sig":"MEYCIQCzIs4VMFfYdd4are+hS71QORTBNY8Xu1lx7M1r2FbDaAIhAJxori7iXE1WnvM4X7ACLO/yR+wfVHIhmPYgYZZdLndM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbMXAeCRA9TVsSAnZWagAAZSsQAJvK3dllE2tVfqQvNF1v\naTIWJXwZhwKb7NMs2dDUjG8jPbMGXJGGYzoOQPqHuAk+csjaeIHDjTFx/7Ya\nlLlcmI5K9IXp4cqs+KDLjPMkA1GXsufqGiwUByA7XSYhmc0uGMkK/UUU+9OP\nddmIz4m2gXCcKTjdQlXSVetzP3jD7av2yFXiBCqXXW2lhnTGz0XLo7+KYkYm\nDPm9+Le9DK0LrCVAGEslN/ChlcoVyAKss59Jc1LFlT/NXO8wvc55SJwEJ7fd\nI8pQZpZLitz/rAb5sYvT7mP6Pbv4a0AKqJyOG5u9vXm2HB6YLRdLwcVVzHbJ\n70LxJpxeYa0/DmDvpotXL8sufL9ZsSxjdCSqFbF6eJco4ep4sWjdon3LE+s8\nxPgfwN5Ga2ssBtuWnE2H7S0Uqp8IL+RUNjAmVYIMJx/HjbNDDTrdxgT6pq7W\n45/JIp+H9AoIQeHcDsSnMEOi6vQ4Mvhw2SNPAW/tE6T2qQ2+eMgU/kp3aJE2\nYukJK4ttQ/naw/SYpaD1N18kb0ZkO4lANsD+6i/SheLNE+Wi/XHeDdTyV7sN\nZbgx6rpC2ZNR5MkVyluHdHEq/O6LQYNIocZsISTF70w060o5CqzX+zC0toiN\nRQ/pmc/uWipzYUe8uY4Lq6d7wiuEiEvHZHOJNWY5Tm79imLCsA1g4zt/pZP9\npKsZ\r\n=P9un\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","files":["icons","index.js","pages"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> A react component for installing octicons\n\n## Install\n\n```\n$ npm install @github/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an octicon which\nhandles the `<svg>` element and all of its attributes. To render a specific\nicon, you must pass it either via `icon` prop or as a child:\n\n```jsx\n// icon prop (function)\n<Octicon icon={Icon} />\n// icon prop (element)\n<Octicon icon={<Icon />} />\n// child\n<Octicon><Icon/></Octicon>\n```\n\n### Icons\nIn order to avoid bloating builds, the `@github/octicons-react` ES6 module\nexports the `Octicon` component as `default`, and the individual icon symbols\nas separate [named exports]. This means that you have to import only the icons\nthat you need:\n\n```jsx\nimport Octicon, {Beaker, Zap} from '@github/octicons-react'\n\nmodule.exports = ({boom}) => <Octicon icon={boom ? Zap : Beaker} />\n```\n\n### Alignment\n\nBy default the octicons have `vertical-align: text-bottom;` applied to them. But there are cases where you'll want to change the alignment. The props available are `top`, `middle`.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nreturn (\n  <h1>\n    <Octicon name=\"repo\" large middle /> github/github\n  </h1>\n)\n```\n\n\n### ariaLabel\n\nYou have the option to add accessibility information to the icon using `aria-label`.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nreturn (\n  <button>\n    <Octicon name=\"plus\" ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\n\nThe properties `large`, `medium`, `small` are available for setting the size of the icon.\n\n| Prop | Rendered Size |\n| :- | :- |\n| Small | 16px height by `computed` width |\n| Medium | 32px height by `computed` width |\n| Large | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nreturn (\n  <h1>\n    <a href=\"https://github.com\">\n      <Octicon name=\"logo-github\" large ariaLabel=\"GitHub\"/>\n    </a>\n  </h1>\n)\n```\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo guidelines](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","scripts":{"test":"jest","start":"next","prepare":"script/build.js","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.3","dependencies":{"react":"^16.4.0","prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^6.0.3","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","react-test-renderer":"^16.4.1"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_7.4.0-alpha.cecb4ef2_1529966622111_0.7628160251989027","host":"s3://npm-registry-packages"}},"7.4.0-alpha.b36308c8":{"name":"@github/octicons-react","version":"7.4.0-alpha.b36308c8","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub Inc."},"license":"MIT","_id":"@github/octicons-react@7.4.0-alpha.b36308c8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"ffe7af96e6ebbf8c1196a351d9fcdcca62fc9f61","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-7.4.0-alpha.b36308c8.tgz","fileCount":184,"integrity":"sha512-cLscoBkt1vHC507EHZMXE9GXuAitVKKuAaTzb51P2Teedxw59ZZgDd7ZV1Aw5L5Q/YBL6qOqtEgNzhoTMf/tgg==","signatures":[{"sig":"MEUCIEpysfsVv2tqnpZFHa0EVVAthjQyzTxZtsdJ2Yl8WMVXAiEA7LH6w2tVYeZDyMiqiSeiaXri5PkuW8CYiFUMynhv6AU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":102451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbMXoWCRA9TVsSAnZWagAAlHIP/RBwrNKqYJBy44ODMa6i\nDS9o7B7+w6Um+/Gy0thEDPU/16Ft40CvKTmPYHubwH+2ycNUnNnW1ptediuW\nrZkHINiNb49rjq4odTyzXjEEWeX9lfXNJxujBiDEdNRU4wLHlFG/Ru9XU0e5\nSHCvBpWUI+5qsAWJTUaSgjMQBJkOA1InFH33/sAzENuuM+Rfjxak3//GJCu4\nmnc2CIrIvi8iaIePd1zDwTumJW1KlQaOizEaVv+WtGCl13ynUHz8EVK6gTmQ\nkczQwTmQAV6XpvowbHOtTCfbKItlI5GYVAKfGm4sWOVpyS8vEJn3QfwVsVA3\nepXLL0gda4k5m6HzeM9Ie0Hon5sBK7GOaUYP3N2WH4SxzKtzX8g4otQEyGvh\nF5ReZ5slxu6eu7/jfpn2NjBZo5wGZ7pWZoV7rBPfIgBeeVBEnZWLhnRoZ0Ur\nZvqm3hxUy5SoEgiTeZzJ2URQzHLmOXG5ltd5ZGzbXGqiPL1JsUq/JXOcs+6j\n6G4OaORbGPBzopVcIYUT5RNOEeeRup2sesEa43ipWGM9yQtWwRngypq30gAZ\nykIIm6JjfLpC/fSOQvByQj97w+RoVeSJcjWmuCmBab5JmUd0SZZ1Ar1IpiAZ\n1R4TtOHdgvhZT36Jmgmw6xkaB2LCJ4Kc5Sk/7kH6denGSRpBUNOpdFmusBXd\nJgZQ\r\n=G/eI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","files":["icons","index.js","pages"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> A react component for installing octicons\n\n## Install\n\n```\n$ npm install @github/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an octicon which\nhandles the `<svg>` element and all of its attributes. To render a specific\nicon, you must pass it either via `icon` prop or as a child:\n\n```jsx\n// icon prop (function)\n<Octicon icon={Icon} />\n// icon prop (element)\n<Octicon icon={<Icon/>} />\n// child\n<Octicon><Icon/></Octicon>\n```\n\n### Icons\nThe `@github/octicons-react` ES6 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 '@github/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],\nthe resulting bundle would only include the \"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, there's a special `all` export which\nprovides you with two ways to get any icon:\n\n#### Icons by name\nThe default export of `@github/octicons-react/icons/all` is a function that\ntakes a lowercase octicon name (such as `arrow-right`) and returns the\ncorresponding icon class. Using this helper, it's possible to create an Octicon\nclass that takes a `name` prop:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@github/octicons-react'\nimport allOcticons from '@github/octicons-react/icons/all'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIcon(name)} />\n}\n```\n\n`@github/octicons-react/icons/all` also exports a `iconsByName` object that\nmaps keys (such as `arrow-right`) to component functions, which you can use to\ngenerate listings of all the octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@github/octicons-react'\nimport getIcon, {iconsByName} from '@github/octicons-react/icons/all'\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={getIcon(key)}/>\n        </li>\n      ))}\n    </ul>\n  )\n}\n```\n\n### Alignment\n\nBy default the octicons have `vertical-align: text-bottom;` applied to them. But there are cases where you'll want to change the alignment. The props available are `top`, `middle`.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nexport default () => (\n  <h1>\n    <Octicon name=\"repo\" large middle /> github/github\n  </h1>\n)\n```\n\n\n### ariaLabel\n\nYou have the option to add accessibility information to the icon using `aria-label`.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nexport default () => (\n  <button>\n    <Octicon name=\"plus\" ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\n\nThe properties `large`, `medium`, `small` are available for setting the size of the icon.\n\n| Prop | Rendered Size |\n| :- | :- |\n| Small | 16px height by `computed` width |\n| Medium | 32px height by `computed` width |\n| Large | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nexport default () => (\n  <h1>\n    <a href=\"https://github.com\">\n      <Octicon name=\"logo-github\" large ariaLabel=\"GitHub\"/>\n    </a>\n  </h1>\n)\n```\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo guidelines](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","scripts":{"test":"jest","start":"next","prepare":"script/build.js","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.3","dependencies":{"react":"^16.4.0","prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^6.0.3","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","react-test-renderer":"^16.4.1"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_7.4.0-alpha.b36308c8_1529969174670_0.1762242361885542","host":"s3://npm-registry-packages"}},"7.4.0-alpha.a520fbed":{"name":"@github/octicons-react","version":"7.4.0-alpha.a520fbed","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub Inc."},"license":"MIT","_id":"@github/octicons-react@7.4.0-alpha.a520fbed","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"c3734064d11b9a86a9ad0e1e4bcaac00f6bc8aee","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-7.4.0-alpha.a520fbed.tgz","fileCount":184,"integrity":"sha512-UG+UuNMDJq8KnQFW9kBfoonO/yOvIVRNTMR6dRY8eCpP3QU7Uhgk284gZZl0dElxv1NCDsYfleoG746BAMoxvA==","signatures":[{"sig":"MEUCIQD6j6eHyWs0Ed6LPSOeUsQVz/VkP27Rq8761tyQ+WnLLAIgZ3k7ifUhz22cteV05jc/grSklSZh/h+0WW/YWJ72RZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":102569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbMXr7CRA9TVsSAnZWagAAsswP/12A9/NJ6bh//CLC6IgF\nHs26o+TEadYA6kvR9Kq4E2ER4gCdaIpJIU0QjCUL7zcRUgj+zbR+wvUkQoNH\nX4wOVGFWHE+SWEvPZcyMef1Vl15BFGUoxn+JQ0bavhOFmKgB4niROt3Icgq6\nQWjNm2+PE/WMb8B6aTdkj6JbrRlzz4mQCj0uN/M+YD04HmWdaz/MZ92++1pM\nE70FIyF4W0om34fmYIGxFgDliyuuerzk7wWikAoXmYRsNjfrKxArR5xQzTMA\nMfMFhFfcUbcNealcifFNyzZaWbNZP/TGHsD0J2YjOMAye3W8gEXH8X6BZ2Lz\nhPxUXNfia3mBpEX3vc3vVF26HkEJQ3FDayqSZFu3AzMhq613bqRZSEFCxZut\nAXfiH2CtJ9Iv8ErftZOnUY122y5c5mSYDvSC8gWZtgpmz/1vOO440ffIOltF\nL5Qir7eXh1a5s7tZ5iRCp8Twybc1h/IytA8W4tL9v5eY+JrxB7WNpxOIUXXB\ny6pohzfA7/okn6GS8miVjgUJKa10GvP/hISGuZiCv7Y5pMO96YQ1zA2uipir\nTBpU7Aq+42lT9zxQ+Wg1NqVd2t/xgQ2Yd8onTYAZ30fKj7WwXAQh7LhFZZLg\niEgCljQBQARE2IemmZjaO7FxMBOs6+cB6PgBc7bFiNfngAlBgW1ugvSa1Y2O\nBTU2\r\n=CzOw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","files":["icons","index.js","pages"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> A react component for installing octicons\n\n## Install\n\n```\n$ npm install @github/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an octicon which\nhandles the `<svg>` element and all of its attributes. To render a specific\nicon, you must pass it either via `icon` prop or as a child:\n\n```jsx\n// icon prop (function)\n<Octicon icon={Icon} />\n// icon prop (element)\n<Octicon icon={<Icon/>} />\n// child\n<Octicon><Icon/></Octicon>\n```\n\n### Icons\nThe `@github/octicons-react` ES6 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 '@github/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],\nthe resulting bundle would only include the \"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, there's a special `icons/all` entry which\nprovides you with two ways to get any icon:\n\n#### `getIconByName()`\nThe default export of `@github/octicons-react/icons/all` is a function that\ntakes a lowercase octicon name (such as `arrow-right`) and returns the\ncorresponding icon class. Using this helper, it's possible to create an Octicon\nclass that takes a `name` prop and resolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@github/octicons-react'\nimport getIcon from '@github/octicons-react/icons/all'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIcon(name)} />\n}\n```\n\n`@github/octicons-react/icons/all` also exports a `iconsByName` object that\nmaps keys (such as `arrow-right`) to component functions, which you can use to\ngenerate listings of all the octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@github/octicons-react'\nimport {iconsByName} from '@github/octicons-react/icons/all'\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### Alignment\n\nBy default the octicons have `vertical-align: text-bottom;` applied to them. But there are cases where you'll want to change the alignment. The props available are `top`, `middle`.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nexport default () => (\n  <h1>\n    <Octicon name=\"repo\" large middle /> github/github\n  </h1>\n)\n```\n\n\n### ariaLabel\n\nYou have the option to add accessibility information to the icon using `aria-label`.\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nexport default () => (\n  <button>\n    <Octicon name=\"plus\" ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\n\nThe properties `large`, `medium`, `small` are available for setting the size of the icon.\n\n| Prop | Rendered Size |\n| :- | :- |\n| Small | 16px height by `computed` width |\n| Medium | 32px height by `computed` width |\n| Large | 64px height by `computed` width |\n\n```js\n// Example usage\nimport Octicon from \"@github/octicons-react\"\n\nexport default () => (\n  <h1>\n    <a href=\"https://github.com\">\n      <Octicon name=\"logo-github\" large ariaLabel=\"GitHub\"/>\n    </a>\n  </h1>\n)\n```\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo guidelines](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","scripts":{"test":"jest","start":"next","prepare":"script/build.js","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.3","dependencies":{"react":"^16.4.0","prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^6.0.3","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","react-test-renderer":"^16.4.1"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_7.4.0-alpha.a520fbed_1529969403213_0.8568047261216096","host":"s3://npm-registry-packages"}},"7.4.0-alpha.091aa36a":{"name":"@github/octicons-react","version":"7.4.0-alpha.091aa36a","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub Inc."},"license":"MIT","_id":"@github/octicons-react@7.4.0-alpha.091aa36a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"9b39caa465312c414803ab94648bb118088f3234","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-7.4.0-alpha.091aa36a.tgz","fileCount":184,"integrity":"sha512-g5gWZLIGiYTNF9BlTRVqjpK8c8qJzt7GnJWeRiZ1dMFwIncjhZf/4RIVB4IlnFq7lj1AzDzkVsGw5KejxsmUDQ==","signatures":[{"sig":"MEUCICo9VxwRFdzXLhlRi3B3Z0L9QizCNjDSnkkmOt5CTyZvAiEAxD5QqK7mJXsYBbpFZkeIqf06bnr2feQMi1NrVZbxRpw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":102914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbMXxnCRA9TVsSAnZWagAA2nYP/0FkXwoCKAyHUs6GmCkZ\ndXQHQXcItwy1L8K11VzBPSMD0l4Mxwh0xNGrNEPI+lNylM/eD+1u2xQ+UkCe\nsIlrZ017K1SSqZGHOPZ6I2PYPDlr6gjYXaWdfVbRibyN18MPxmcfnOxP88LN\nBB7K+bBNy8Q0QVse/OfnE/96FOSqeuAkcnO312sYsZoWvUqPhHcDnHcS2ILr\n2TdwQ41gNIzqDAs6LRKp6+VjrA5AT+0qQVt+x3yyb4EDOXYkMM/O+ZgtRS/l\ng41JLMNlAPFSvbd/ltDjQ9Fk4uUEacke19tJPocwZz5I+nNNfmtWS0mfmB73\nxhbcwhuATPyn3BQIuc+CcTzs/1icxC7RCL41XSTeWvyZRpmma0OWDNOnlVdJ\nl40+pvK+6/R6c+GUjtSaKFQPjrK8UxbfMFAc5/l0AQoW0UN8V/OMYf/B127Z\nl/cUyr3MnSumkW44unOWbjfgR1jeVu9ch/rzBce81zJRm7PtdD+qAu4AccmV\nGDoKfraUCWqr3+szbw15HnH1FnO2HUCj166KKiDuxgqM7773Bn2ARNWNe+OX\nB4BWlAlbqPJ8c6Zn7Re6Pu5287DSel1JrqHYAIGFoNpT+AIwlCX3tMqJATYp\nFmSTpPUc0iMRPig9VRqKYorhb0lGYjgi5hEDO3LrmiP9Mj/VsQE75zSpABuQ\nDBeh\r\n=PQKs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","files":["icons","index.js","pages"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> A react component for installing octicons\n\n## Install\n\n```\n$ npm install @github/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an octicon which\nhandles the `<svg>` element and all of its attributes. To render a specific\nicon, you must pass it either via `icon` prop or as a child:\n\n```jsx\n// icon prop (function)\n<Octicon icon={Icon} />\n// icon prop (element)\n<Octicon icon={<Icon/>} />\n// child\n<Octicon><Icon/></Octicon>\n```\n\n### Icons\nThe `@github/octicons-react` ES6 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 '@github/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],\nthe resulting bundle would only include the \"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, there's a special `icons/all` entry which\nprovides you with two ways to get any icon:\n\n#### `getIconByName()`\nThe default export of `@github/octicons-react/icons/all` is a function that\ntakes a lowercase octicon name (such as `arrow-right`) and returns the\ncorresponding icon class. Using this helper, it's possible to create an Octicon\nclass that takes a `name` prop and resolves it to the right component:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@github/octicons-react'\nimport getIcon from '@github/octicons-react/icons/all'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIcon(name)} />\n}\n```\n\n#### `iconsByName` object\n`@github/octicons-react/icons/all` also exports a `iconsByName` object that\nmaps keys (such as `arrow-right`) to component functions, which you can use to\ngenerate listings of all the octicons:\n\n```jsx\nimport React from 'react'\nimport Octicon from '@github/octicons-react'\nimport {iconsByName} from '@github/octicons-react/icons/all'\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 from '@github/octicons-react'\n\nexport default () => (\n  <h1>\n    <Octicon name='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 from \"@github/octicons-react\"\n\nexport default () => (\n  <button>\n    <Octicon name=\"plus\" ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\n\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 from '@github/octicons-react'\n\nexport default () => (\n  <h1>\n    <a href='https://github.com'>\n      <Octicon name='logo-github' size='large' ariaLabel='GitHub'/>\n    </a>\n  </h1>\n)\n```\n\n## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo guidelines](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","scripts":{"test":"jest","start":"next","prepare":"script/build.js","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.3","dependencies":{"react":"^16.4.0","prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^6.0.3","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","react-test-renderer":"^16.4.1"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_7.4.0-alpha.091aa36a_1529969767034_0.4848557434564871","host":"s3://npm-registry-packages"}},"7.4.0-alpha.9f23124e":{"name":"@github/octicons-react","version":"7.4.0-alpha.9f23124e","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub Inc."},"license":"MIT","_id":"@github/octicons-react@7.4.0-alpha.9f23124e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"108dd9e7fa62adb60d5f7884b7c843a2ba26afb9","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-7.4.0-alpha.9f23124e.tgz","fileCount":183,"integrity":"sha512-F+LPjfckDBkqa//OmOjHY3rbEG7fH3zkc5lw1apN7IK6x7H31/VUkvjAzPeQUHyghewuNdr9kDhMPDLPvQx42Q==","signatures":[{"sig":"MEUCIQCBjjB63G0eZQwjB7RT4AhjKIPRKlvvNomp5jqrv1KHRQIgOK7YkRcoZW+zLhQNbHorINgxIPtJcqQnSy2pGkbOPD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":96573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbMnFBCRA9TVsSAnZWagAATx4P/izIxDJ61SX15iSYW/UY\nlosd0kA4ZhMmDOEmFB91GSN9jXAdIWTbeUqm1uF8LBg5IVJCC/Ql+PCoCiMG\nqWY9jgbHPgZBv3j/JjRMrqe2pviA+YKMt+GrfvabHbx9SXj3P7el6SqFILvY\nQa4QNwH5zfjgvHUF4lnK0siCxkGDix98U5QYFtgOFsDmn0omHBbHmppQ8lZ4\nF+vuxdWGxpMzOE1VYbqcbkhJbSu1WWQvBpLCdo7IdDnzGIdhr+nLw5OYSe8C\nRoxvVkPhXhZXlu4oskCzT1wIAu92iFIrDPGYhG/lBGBQdYy7Te5pTtRBSomg\ntYivOC1wGlb5QjGFViUTu+ygCjs4D383GhUdq7u7hCwAQc6erSAJpxk2T9+R\nJvmyjsVenbST8e/iayAeiLxIwIYHh+16eV4gjGleJZ9jAJYUNFSqVz9+y0t0\no4MXt062uJHaSVu8cI+zL+yVSePi0yKbRbrA2ZY+zHcUdj3LQ46sloY10fPn\nvtil/GbysshbNZwgkCUdlBQxr+cJHP3OttDS12vmVumP4mCa6eiZN1PNwnGv\npdcXc7Bb4Ku4bWH7J3VfeSnOoPa9cXOADj8Y1EVUsggz4XqF8xcjyxbmCm+q\nlHrLk4kyL4euPGpc8CWAJ+ttW/erx6gPM7vH/I3JI0Q2zlaNS/Ta5ThYBbS5\nMv0I\r\n=/Lym\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","files":["icons","index.js","pages"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> A react component for installing octicons\n\n## Install\n\n```\n$ npm install @github/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an octicon which\nhandles the `<svg>` element and all of its attributes. To render a specific\nicon, you must pass it either via `icon` prop or as a child:\n\n```jsx\n// icon prop (function)\n<Octicon icon={Icon} />\n// icon prop (element)\n<Octicon icon={<Icon/>} />\n// child\n<Octicon><Icon/></Octicon>\n```\n\n### Icons\nThe `@github/octicons-react` ES6 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 '@github/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 the following named\nexports:\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 '@github/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIcon(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 '@github/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 '@github/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 '@github/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\n\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 '@github/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## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo guidelines](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","scripts":{"test":"jest","start":"next","prepare":"script/build.js","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.3","dependencies":{"react":"^16.4.0","prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^6.0.3","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","react-test-renderer":"^16.4.1"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_7.4.0-alpha.9f23124e_1530032449895_0.0563851855786035","host":"s3://npm-registry-packages"}},"7.4.0-alpha.3d51a748":{"name":"@github/octicons-react","version":"7.4.0-alpha.3d51a748","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub Inc."},"license":"MIT","_id":"@github/octicons-react@7.4.0-alpha.3d51a748","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"e7c0bcd17f7e34dd8e1afbb2e44553e8c0025298","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-7.4.0-alpha.3d51a748.tgz","fileCount":183,"integrity":"sha512-++ltO8GLGsNzEFoqpNivLAjWPxRKxmUQA4on46QQ6HJRwGzdNny8yGhUa8A6AwrKmABsuv8wPly5P/6Fz+bnAA==","signatures":[{"sig":"MEQCIC/OOst4GN8xEKkQYOPlpj5UOwjkPTNJoq8x9PFSf4aTAiAFkmxK3zZE+iXTvrlDmH0vhQ0D8vy2PITv60ewlqE+BA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":96558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbMnIFCRA9TVsSAnZWagAAej8P/RmGPuonNfLPgBCYKtZx\ncmoyV6X9yH9AlRcK4pMkNzb0gFd75r8QiVAU6fZdd3eVdA7HrcBxJVvJP/yH\nApQyWKig36cMzOmKToDa+UqxL3g1jfJgh3Umbo2Wu0qYICRpgNyBkvueESok\n1+bLMk7bcRDCbcsj8NeFuaj92A+8x6Na41hvT5SPTlIO6pe/9S2uC0r0Ji+W\npdkJDAi5TLRiC7WWwj8BVGyHf0iVkuCcD8auhXO82cZXBZl7PTe0n0nxzawB\ndJvdHWMAR8VLi5i8XiltaHP/1n8HUzmTaNrjEdft0ci80JNblli7oSFcSu7U\nUveLpgzAcRQEw8yHerhaSCcgfj8cS5Henw4BxI1q1JX74roopIxtBPQT6An+\nnCXifkoPcpqyBVq0hV1sLOkR6PZiNxGI2iK2eED2dikT4bWwEVvxUlumhtkp\n9iunfxgucE4VW8We9SJbW/hWOwLsNFDtZ+WcgdRBsywQGyGuMIQyG+Nhn6uJ\n7Ev1zeRyQh41ErQ8xP5C5y+SneWglVfXfH6laGeLBOLQK2nXcBaGFg78EDiZ\nT2McnrIHyRwhS2bQpsb6kus03V9BOiD5en+qFVoRyLygWljyUf0uW42Uasrf\nRGnx5/mF8UKi7GKvd1Hsk6p9m01Iq6fRikxmFHSAAmhiClT9nicckg8pnbB+\nh2h7\r\n=/mQk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","files":["icons","index.js","pages"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> [Octicons] as React components\n\n## Install\n\n```\n$ npm install @github/octicons-react --save\n```\n\n## Usage\n\n### `<Octicon>`\nThe `<Octicon>` component is really just the \"shell\" of an octicon which\nhandles the `<svg>` element and all of its attributes. To render a specific\nicon, you must pass it either via `icon` prop or as a child:\n\n```jsx\n// icon prop (function)\n<Octicon icon={Icon} />\n// icon prop (element)\n<Octicon icon={<Icon/>} />\n// child\n<Octicon><Icon/></Octicon>\n```\n\n### Icons\nThe `@github/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 '@github/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 the following named\nexports:\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 '@github/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIcon(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 '@github/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 '@github/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 '@github/octicons-react'\n\nexport default () => (\n  <button>\n    <Octicon icon={Plus} ariaLabel=\"Add new item\" /> New\n  </button>\n)\n```\n\n\n### Sizes\n\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 '@github/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## License\n\n(c) GitHub, Inc.\n\nWhen using the GitHub logos, be sure to follow the [GitHub logo guidelines](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","scripts":{"test":"jest","start":"next","prepare":"script/build.js","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.3","dependencies":{"react":"^16.4.0","prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^6.0.3","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","react-test-renderer":"^16.4.1"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_7.4.0-alpha.3d51a748_1530032645316_0.06161138332196536","host":"s3://npm-registry-packages"}},"7.4.0-alpha.07ea1751":{"name":"@github/octicons-react","version":"7.4.0-alpha.07ea1751","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub Inc."},"license":"MIT","_id":"@github/octicons-react@7.4.0-alpha.07ea1751","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"16be6c3ecc11ffe75166aa0515d68229afafb091","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-7.4.0-alpha.07ea1751.tgz","fileCount":183,"integrity":"sha512-gf4Zjz4zHIWxnAbVkGNCWsPO2OQ/e0O66tp/fjNwbqc3L1ymoDUuZZ79L+Wx7vnX1xfcYC36CqGsDU669UO+iA==","signatures":[{"sig":"MEUCID8uxTHCaYXXiqFNTzsUzakTciTMVzsX4vIkTIlbQAw8AiEAwS8Fzi2BZxVk5SyKvpiPwWd30PrWvGqIljn2ISAvCnw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":97353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbMnUVCRA9TVsSAnZWagAAjmoP/0Dawiu/s/GdqgwhpLny\nkvErHT+VEwcx+LvIJmzq0fFP5aPqUgye91wPQ9LLt4pswvz+wfYdOz+ZMtrd\nYxKjyIDqsmM8astfRlUB0SKdVNsX0xDk01ILoxYGVrT+kpPgFDGeyBgYmaWj\nwRIYmxP/lbUoK+zxhwJoLLtmatCpWWo1MmYuAXyTFG4hop8Ai3E2+t5WXnTV\no7He1qANrj1jM7YloqokPLazQCAG0LySoxFLagreVHt0hfr9CdXR+ryz1J3j\nFC7rJbRp5BdX0jEeS3jTSzpY8M7oDsIM042dalnpd1JZcrNSlP5SopL8u8Z6\nGk8fHygt3SEuWT6iA1KIMRz7fo4fwbVyosH+sI9pNpmkiboY2GYa26jYxGKf\nMaCE9LdjViq5yJdg+7XEg45BnY4LvaivunZV0c0PUirsj8th7eBh/RRhUiD2\n1Rkc6J8T6f5Sxa/rou9LXim5wNPKHsdSoG4wTbartEGOSG4D/b0meRmet2JJ\nT51CflTuRHJtJgel7z1B/RKM6B+aLPUZqwbtocvJtl0vvP2/+1OhWv5t1lCI\nb2+kfvIPYwSUbSeDvYA8b7vEbMUI+5h87Q7BotDjMYcc2a3bLfZe1+HawAuM\nohJVv0d7gzYU1BpUd4LdL/XVF1Fp78xX/R8GrKNuPvxeMFkTaCLz4xtucNeh\n3V/p\r\n=TaGY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","files":["icons","index.js","pages"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> [Octicons] for React\n\n## Install\n\n```\n$ npm install @github/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// icon prop (function)\n<Octicon icon={Icon} />\n// icon prop (element)\n<Octicon icon={<Icon/>} />\n// child\n<Octicon><Icon/></Octicon>\n```\n\n### Icons\nThe `@github/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 '@github/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 the following named\nexports:\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 '@github/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIcon(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 '@github/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 '@github/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 '@github/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 '@github/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 '@github/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 guidelines](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","scripts":{"test":"jest","start":"next","prepare":"script/build.js","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.3","dependencies":{"react":"^16.4.0","prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^6.0.3","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","react-test-renderer":"^16.4.1"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_7.4.0-alpha.07ea1751_1530033429412_0.6485797855208366","host":"s3://npm-registry-packages"}},"7.4.0-alpha.63c5588a":{"name":"@github/octicons-react","version":"7.4.0-alpha.63c5588a","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub Inc."},"license":"MIT","_id":"@github/octicons-react@7.4.0-alpha.63c5588a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"d02ab376700d15ba6f0cc21e6fdc84d7a58e0da5","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-7.4.0-alpha.63c5588a.tgz","fileCount":183,"integrity":"sha512-CpahPyEssWXgFCss7cVsbFriRhepHx/v06zqbrsf68sJ453bEtisdwH9nVFV55LMaXbqMSEtA2zsMaAT5wYl8Q==","signatures":[{"sig":"MEYCIQDTgjsyLQlRr8+CdVjdejio0nREpmlbsB1BqDSZDWQrEAIhANqCWIQ4JfuHMs2r/kn5tBBlP5wh5CjgM4y6khICEaH7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":97564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbMnZLCRA9TVsSAnZWagAAjlQP/RJpwlaScB8OAC4pVul9\nyM5jhEisHETHZLzU41qftEhDWOkI+XUbYZ3qOt7c1C3gIMAa26bOhon492UY\nxGlDJYIdOsVmKsAECVniCgyLYD9F5QNJzMmcjqMjiuEKngqOFx9p6PLfnMgi\nOvUUPdIXcW3QdCLEoEMN+1B+EIg5SqBGHwjKNexwNwlHLp5X7ns0xHRjQJPe\nD7U14CJTvtuCfNz57neJvaTXAyj5XiY9WEkBr9DRZgVjmrdnNAYUBj+KLCJf\n7NULfE1+UEmLk1dbtQALA1Ph14wBVnaFf8c5k6/ynIrkuche4w+y+WklkBsV\nctB6+iAH5gYZhuf6t2ciHz1Xf4B1knChrjhXB+SB6JYH2WU625MtNswVuieg\nYuzhArnbjbdK6IqNJ8Qfsr57yMrACM2BrVuUcZEoVqPMCetRuU555W0dT6IX\nBjbUrQ05fLB3e1V02hFPENZy9Xr9KiJL7Z2APa55pQEgrfPl94suChRnZKIH\n77Q+FUVPiG6UBj1YPfQW60S3vGCawohRto9NeAY5onWD+7Rxchi2YMmGg3w7\nE+B5EtisI+3Euy2/laND5q0Tpm7ggYPC9tDwxFu5j6107hDSNF/8l7csz598\nrO/F0opWuitTznr3orYENH/gS1nOyfdmfGgydRFd6+XKlU1x35V4OrQxKEpt\nfwAI\r\n=xlXy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","files":["icons","index.js","pages"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> [Octicons] for React\n\n## Install\n\n```\n$ npm install @github/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 `@github/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 '@github/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 the following named\nexports:\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 '@github/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIcon(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 '@github/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 '@github/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 '@github/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 '@github/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 '@github/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 guidelines](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","scripts":{"test":"jest","start":"next","prepare":"script/build.js","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.3","dependencies":{"react":"^16.4.0","prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^6.0.3","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","react-test-renderer":"^16.4.1"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_7.4.0-alpha.63c5588a_1530033739029_0.1924233767751231","host":"s3://npm-registry-packages"}},"7.4.0-alpha.6f5c47d0":{"name":"@github/octicons-react","version":"7.4.0-alpha.6f5c47d0","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@github/octicons-react@7.4.0-alpha.6f5c47d0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"5ac4b587c485d648f4d136f463646146cf079b0d","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-7.4.0-alpha.6f5c47d0.tgz","fileCount":183,"integrity":"sha512-ug2JQGNt1YH1czCYuRdLotoZgJ0XYzv8gadRBCzgt/qjRMiuvvaFDr6IsjwLFaI3tLpPq4bg8PoSnxAo/4NjTA==","signatures":[{"sig":"MEUCIHHiuJmc2qat9bkQg2gxPimzoQz+H7auAkwbkJPAMMf+AiEA03dx2I+i8UUQbzvmx9GkxwTbk/+QPxXeG4HYDOAnXjQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":97622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbM8B0CRA9TVsSAnZWagAA9NgP/RKaCUqQjsnahP+xumJA\nd9t+bQjMBr7iFeqxDesJEexvoQBkQRybnhaSdkR2+SGWYMUi3lOA062KVyHI\naNWNAYqYONz3IRgyuJTklv5bvkPcaphnswTIvMDYHfQOMQVn4TYSRCr5fwqA\n+KCPN9lwBp3KUKgH/3ORVWeer8XCnMDJivd472O7WufbntzH0esmgqs5VoOt\n3JSnywAeStYHtHN6em4n9mB3kJmfEfzpgSahKfC1EvPZvNHP3FoaLF8ANr0i\nkms4bUvPHL6pmYbamf+rEpZiucb2HACz9d9JP6OzAhXi95JLekF/XC2l0X1V\nnVj2NyI5PDPXgYWv7v1u9dfz2HcA7xHu+JP7seCek+K133XRwm6jWil5RW0C\nfNCuXn6Uq87xThkmC1dmtZq6LJb87RphLnjAAv7LhRH2OrOvPRbNdAZqr3+u\n47jzZty2mcGJ3p8DB3ZJVTyT/5sZt6JddNCvo6e32bE6Eh91FD+oHda7ePD6\nAcW9F7tzUNr/JSHo4kCMYV9SiOrTlLbRy4zE31RXcWAO56cosYx09BnVYjjU\nV4bhRlMOaw64+J8Q5Qj+gD8qU3tEEh9VS+GDR42j7BxBHzLwqrunnlvpXEAe\nImJPRbgpBBz7oj1C6vYUac83u+VQiKE9Q3ymydZ45Q58eAwmg4zKv0/vnSkR\nFz6x\r\n=8+1a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","files":["icons","index.js","pages"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> [Octicons] for React\n\n## Install\n\n```\n$ npm install @github/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 `@github/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 '@github/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 the following named\nexports:\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 '@github/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIcon(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 '@github/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 '@github/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 '@github/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 '@github/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 '@github/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 guidelines](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","scripts":{"test":"jest","start":"next","prepare":"script/build","publish":"../../script/notify success","preversion":"script/build","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.3","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^6.0.3","react":"^16.4.0","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","react-test-renderer":"^16.4.1"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_7.4.0-alpha.6f5c47d0_1530118260839_0.36381639443625957","host":"s3://npm-registry-packages"}},"7.4.0-alpha.3e482a24":{"name":"@github/octicons-react","version":"7.4.0-alpha.3e482a24","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@github/octicons-react@7.4.0-alpha.3e482a24","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"067c5f72235a7b54fa32ae5a921f70cf0efba7d0","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-7.4.0-alpha.3e482a24.tgz","fileCount":183,"integrity":"sha512-0etTszwgDsIs5ppTzn8SYIgXDZOepY3JBbtEttb1pFrEurCWDG94jHy5BOcVTaEdHUnviovWcAWa7cdWkrsfcw==","signatures":[{"sig":"MEUCIHHoVam6xxi9JuqdITzo5ZYcLh4SHhyH912SEq9MZIHpAiEAoXXKcBCJc/dMTBlXMypCA3YUdtdxEgRMGp+yuogzqqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":97580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbNBEMCRA9TVsSAnZWagAAcm8QAI0QLCCB5Zc1D0uD58hA\nEwfMkBR+35eUNaKodXyOxo5AALQUS7PRT7ebodZy4BA6Ff4shVCkN8Mex/sl\nLQsT+JsKaupd1Op9oNmt3bB0iyX4zygIQcJvRbSNJZer5DYsKY5dAZhERc7A\nezgXyuBaCr8vYM3Db2roCrtvjlQY/2Cl8L4hlfTZqdtht6T4O0IZ9N/CqVeZ\n+QMnfR2fUOdfm/cF0mwRicwouL3VsF7Mz3CJrqPkJzwlDYkcfJe5xmpxJF9+\nUL3G+urwkkRTUoUELsAnPeLQsPx7fS3bFoa8Wa+vkm3lqfx5apUsRPz0Kjgj\nWMbSGruMZQG7LpJRaprpZYHrAE2Y5jx9s9oZX2ZLcOnC/FrS+Sb7WwDrSGzm\nLlyYwmnnyTkBJ6qIL7SVZedUiXjDwxNMRCDoq7skoU/fpRJH73WkqECW5PGj\noTdVKJky+t2qIrJHMtaLeI7aFjsxlENA0H44JfM1vEuBAdGbyaAkMUwXpZ+C\nLZ+UWLyT7ygYa1zy4qnTyEDpBHAPNa738TYOBbNLiFSLORZMyJtLDQ2cgt1Q\nr9qCHS8BKY89bYRMr7pqjTQPlXoOv3tOxX8gVT64yZylBI9WvLSUyo/Xv88L\nnjr4zzA/BMps0mdAYq27JXfizO/9GKFCOjfq0ZoOXd926EVW95ipUR0scMRf\nXIEx\r\n=Rla5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","files":["icons","index.js","pages"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> [Octicons] for React\n\n## Install\n\n```\n$ npm install @github/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 `@github/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 '@github/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 the following named\nexports:\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 '@github/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIcon(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 '@github/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 '@github/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 '@github/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 '@github/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 '@github/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 guidelines](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 index.js script","test":"jest","build":"script/build.js","start":"next","prepare":"npm run build -s","pretest":"npm run lint -s","publish":"../../script/notify success","preversion":"npm run build -s","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.3","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^6.0.3","react":"^16.4.0","eslint":"^5.0.1","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.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","eslint-plugin-github":"^1.1.0"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_7.4.0-alpha.3e482a24_1530138892798_0.4545872433531344","host":"s3://npm-registry-packages"}},"7.4.0-alpha.4baea4bb":{"name":"@github/octicons-react","version":"7.4.0-alpha.4baea4bb","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@github/octicons-react@7.4.0-alpha.4baea4bb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"ac40e2ec0bbbe4054d4b1c11e427ab978f01de5a","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-7.4.0-alpha.4baea4bb.tgz","fileCount":183,"integrity":"sha512-LCYxrX+50OjkpuJMxWCUNfMRGaG1bTynty77UZfoG83hQtOCNzoZZmxyyVXFSSw8q14Q238hwHCxIMX7ifrw5Q==","signatures":[{"sig":"MEUCIDJh+507iANaJfRzOJIta+OlIHrvkaICQYKCRl9vtxfTAiEA8rAvMYa2zub6b8jUpQMqIaqhM1v2mGC7ax4pqUkaJnQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":97590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbNBMQCRA9TVsSAnZWagAAQHkP/1icTLJruTmZkIqMoFRS\nVWTNMC0rGyi4FtlvOYy5X0ssURJy+klyYKR+ZtqwNZI157z4uJt6tv0mmU7G\nnzSIeXnSMVls2MN0XvcKWGOPy+j+2Kg3CjenffrDt34iVyDgLBUw4wrgIa7a\n5ob6cTXXJZZgyF7vz3rkIgKZtGfU7o56JSheGLjOgJxTh/CeUWSVqHgn8BZC\nGVzUxZISf4dQVAUZWzni++azPD7+YvRoxVUZXDZz5+SmiybL2jRVIRFj4evh\nszsPAU+gE7MkiLJJVZM01ZPw66IUYequQMZaJR/ivU2DOBPvdGNUHPtmI0yP\nD6ELUWzmp0avjp+cGYCU+98UC2SHgekHebqD2lK6d1Cee4xgHVVipPu3dcj0\nG+Nx2umFwJaB00fMb/XUu358y8njxZqqzT47OEKIKrJDZd2/o1m4iUPiUrMG\n+5jq3bMWKDYCeS6mwyUxLianUnL0Sz8roQvCPLq5S1CfYBlQeams3qSuvvuR\nBnxGbwKYcnA8Ns7gYe/3oScDR5k7b1M1bwGTwSswGPzc2s+YyDU5Fld9v6S6\nwOaK4HWkJFIkBwBRd5cvmlaOIySDWhEvEVmq+zj/Y0kE41upxq00UFCjbZY/\n7cavZPcmeWZelN7jsEPPfcY0HrTMif4jub/EMj+QAo1aX8iLY+VyUAHFhWSO\nkDOc\r\n=T7AE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","files":["icons","index.js","pages"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> [Octicons] for React\n\n## Install\n\n```\n$ npm install @github/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 `@github/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 '@github/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 the following named\nexports:\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 '@github/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIcon(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 '@github/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 '@github/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 '@github/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 '@github/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 '@github/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 guidelines](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 index.js __tests__ script","test":"jest","build":"script/build.js","start":"next","prepare":"npm run build -s","pretest":"npm run lint -s","publish":"../../script/notify success","preversion":"npm run build -s","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.3","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^6.0.3","react":"^16.4.0","eslint":"^5.0.1","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.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","eslint-plugin-github":"^1.1.0"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_7.4.0-alpha.4baea4bb_1530139408696_0.8397350982113261","host":"s3://npm-registry-packages"}},"7.4.0-alpha.c01fb793":{"name":"@github/octicons-react","version":"7.4.0-alpha.c01fb793","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@github/octicons-react@7.4.0-alpha.c01fb793","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"835a8f0ab9de0462302a688a6c2a7963d2226db0","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-7.4.0-alpha.c01fb793.tgz","fileCount":183,"integrity":"sha512-5bICQ6JjSMt3qb398GaA4ZgvYQKglzdPVQqLqVJjRGjeTkY0y0kCPKqhjCDXv9OPRDRvmH0xAF7YiWhjoKYQkA==","signatures":[{"sig":"MEUCIQCzyBnzsGAs6esFpyB4uu+K73jv2pqX3etEcAo9J+SiHQIgICv7aJv2x1IRYq3/nvae39apTTkw78tEcaDdFm9ITA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":97638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbNByCCRA9TVsSAnZWagAAJS0P/1X0FOxaQio/rUDy4c9d\niAL2hUDKatqCQprl2skLteb5VXqKRGKaNiYql2s10Z9GFh4ASKye33Sr6sZd\nR/85mqi4EP+8x6EDQ2ZCc6+QNebVfRg92YhWW6K9dAniLHCyMoUcH0q9B+q0\nclLZGok+5LTRe3bXIEC7aw/S+MjlkC94rnGLdGzPanSHxX3OFpKYPLQ345rn\nUJ0403142EEPOBy692OSD00x7FdgVCU7Zr7Kr33lWf7qfFBMHB6GRZYZgEtz\nrX/4kyA1SxBi1/Nn+TZ6rot35uKuJB5cWsuogx1EtxmQ6GzWI9EQ3M6VFZ71\nk7cdbvaxmekzpZ7a78FYx9ZmGLkw1sc0BYIyC/IWLIRRkZ9GtLC6yvUerRzX\ncT884eDn5/PP8bU/6wklUP8VvtNYZ6GjH+LSlZH1wmOwI5GvFuugfPuLbja+\nSuKSx9iIhj4rf6X0n2h+owv0jltafjvu5m8AltdYnZrCeuU0K7+GBbsyu5Jj\nBrsoSxHG1u/PPkYTmEAy0fW7DxTifFYpb/X6kyOt2MxfTI+7Ls/5Fik8+L/d\nC1+P9Y2y+rp8uBx4C3moJKoQAH8zirqYjJGMmp3xxHRSESq4uSZWKNmrhrqq\nRqqC9OAAF/613tPAPusyB1XbuP8zJfwqyqmJEmMRPpXx5WS91IRbmB2FICsm\nql2o\r\n=xIBR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","files":["icons","index.js","pages"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> [Octicons] for React\n\n## Install\n\n```\n$ npm install @github/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 `@github/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 '@github/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 the following named\nexports:\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 '@github/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIcon(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 '@github/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 '@github/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 '@github/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 '@github/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 '@github/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 guidelines](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 index.js __tests__ script","test":"jest","build":"script/build.js","start":"next","prepare":"npm run build -s","pretest":"npm run lint -s","publish":"../../script/notify success","preversion":"npm run build -s","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.3","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^6.0.3","react":"^16.4.0","eslint":"^5.0.1","fs-extra":"^6.0.1","octicons":"7.2.0","react-dom":"^16.4.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","eslint-plugin-github":"^1.1.0"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_7.4.0-alpha.c01fb793_1530141826696_0.2172508242906359","host":"s3://npm-registry-packages"}},"7.4.0-alpha.c307693f":{"name":"@github/octicons-react","version":"7.4.0-alpha.c307693f","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@github/octicons-react@7.4.0-alpha.c307693f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"8ece706659513de71358522c5189b062e4b0d1ff","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-7.4.0-alpha.c307693f.tgz","fileCount":184,"integrity":"sha512-5b1N9wdv3E1xwhHaNZn4YnNnOGCGte50EpHike0OO7DnzYsfK496Rb1KxvsWrCsQ+ypwktiwjvgG/JaC+vQXLQ==","signatures":[{"sig":"MEYCIQCzDILgBh2cVo1STqLK+99Rqlg6fUcCC1q6kiL8LmUCqgIhAPq2R/K18wphxOGdsVk0pGc/jLDEpgIvg63+H9yYdJTF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbNQ+jCRA9TVsSAnZWagAAAPUP+gO5fhzyfA5h8WxXWwF9\nW0Tbq0aih+V5VERlSJxoMTrv3RLpBr0GkXlcs8JHNOizxDwi1aKSwEZhyAC4\nQMaVKoWn8n75d4V9SRDouU9ygI/QlHLw6ywwQZ7vO6HHL21XMfa51PPiPuNL\nQhqoYPR2Tu3wLSMIwXAMBAhVOWRxaB6mFWTYshNB+kL41C/66wC6d0hpbHYW\n+G4dJiRPJ31Og75eiom3xfmgtqrdI/rF1EF7DtuqMRZWc729CiRVaSYSuFJR\ne//GA93f/rio4Yy8yYZqGQIxBqA/9t92zOfBDLkRR4CLkPERQpO03H7PzQPJ\nffq4XSd0A5jFH6Ge3k+sYrkv7quo9PZIuU+mLLmkwM2sHWmXoUfMj2IoqlRp\nSxadFx+kMTB1y9bYiNNy/dBqpavyhF/Yy6Orcew7p3hDJhp1OmseOnryEyNt\nhFpC0BRyckP0+0x2/w78e59+7+Yix7TgClZS58lqL1uD2i29+FI9gyTf33m2\nEbmXHgatFMUFTy4vwP2OUvMumyhSYpvPSWyWexEvfzP6fqo47CNt59lXNn14\ncpuF1r1+UvRV2r5Rb7DIpmrl4U7tOdJYBDEcQcUiTOpndxNu4eK8Nzqe5eMC\nUFVRwaHcCZLlMtpCWF8Im2vnyPQlGQQMvrmUrycj09/QvoqCu3bclZF+WT8E\nPbN7\r\n=WArk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","files":["build","icons","index.js","pages"],"module":"index.js","readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> [Octicons] for React\n\n## Install\n\n```\n$ npm install @github/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 `@github/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 '@github/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 the following named\nexports:\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 '@github/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIcon(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 '@github/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 '@github/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 '@github/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 '@github/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 '@github/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 guidelines](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 index.js __tests__ script","test":"jest","build":"rollup -c rollup.config.js","start":"next","prepare":"npm run build -s","pretest":"npm run lint -s","publish":"../../script/notify success","prebuild":"script/build.js","preversion":"npm run build -s","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.3","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^6.0.3","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","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","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_7.4.0-alpha.c307693f_1530204067871_0.3044946882889976","host":"s3://npm-registry-packages"}},"7.4.0-alpha.eca10f7d":{"name":"@github/octicons-react","version":"7.4.0-alpha.eca10f7d","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@github/octicons-react@7.4.0-alpha.eca10f7d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"6d9a6aa0a51ec493c343a9bf1797792f80629669","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-7.4.0-alpha.eca10f7d.tgz","fileCount":184,"integrity":"sha512-MqzLhSR8u+u9HFTl5BqN4S5oEGIuLeuhVw4gOVU0ABzjJzlm9tLbpMy15JJot/Hpp2w6IiiIePylnfMaH9L1Aw==","signatures":[{"sig":"MEQCIA5NiiR8q5MonKYXdynN0lZQw4KccVkcJi7ofAksb1nFAiBk510Tid49cS3JGPCNWig9wrM9pokTWaZEv4egbciJGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbNR67CRA9TVsSAnZWagAAbVUP/0lQSJ83CSoO/pbP12/4\nRQ4mub3sdhK30MEfNMuXSidP3kjdEM+v+1ZQOFiWW2ht+2uhpjxSUBXKkqW5\nFNsiVMGw2fJF62EDasCkSB+V/PmoUmSwc46wRzOS6zFRoPthOPp3U8OXOZLg\nk40QbqQuG6hAFmee+0RT4oQlAonVcVjI1oXT1s4tu5a988DK2iIl7q8KaWGs\nOJk2nQR+rnoftyPOoJiCdIhgeynS8I7Ubl1S5DoxqFsoRkQLdoG7aVEfXjN1\nh2FEt3ThaT3/k7OezUpT0oBMPcK9IwyQih3RVcyunn3HwYFU4tD5gThbi2ed\no1AX9NdTEquajEuu7UbJfJm+xrpUFaEhvPsgo4Q1UsxaUuONBIsmBvEmRTsq\n6+5LociZnJAJ9/QVcObI9NETjJZ+g6atzFvVgLlax4LENWEhK2rSJPsqsvg5\nXE6uiKzdXZkz1u1OEAihu1kKKGaaHutAbnv6AJ2n+3tPaAFPars9FDx3qZVK\nWR8NItaYaeyL+/34MFw2aJTrvBEwPfXpHdUDTrXVYT1jygI4k/T0VJAztt5K\nqLMaIO4TDZpIm6sg0As2giFFRLo34kVlahUcYcR6LDZda7adOE0TnAmxyg0t\n5274XZmbXPE2CFvVANjokh/ljNINmzCRG7br8giIqA37M5qbJMVva/m2YHrG\nRSr6\r\n=LvVH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","files":["build","icons","index.js","pages"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> [Octicons] for React\n\n## Install\n\n```\n$ npm install @github/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 `@github/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 '@github/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 the following named\nexports:\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 '@github/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIcon(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 '@github/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 '@github/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 '@github/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 '@github/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 '@github/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 guidelines](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 index.js __tests__ script","test":"jest","build":"rollup -c rollup.config.js","start":"next","prepare":"npm run build -s","pretest":"npm run lint -s","publish":"../../script/notify success","prebuild":"script/build.js","preversion":"npm run build -s","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.3","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^6.0.3","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","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","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_7.4.0-alpha.eca10f7d_1530207931455_0.6123647436830553","host":"s3://npm-registry-packages"}},"7.4.0-alpha.6839c7e0":{"name":"@github/octicons-react","version":"7.4.0-alpha.6839c7e0","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@github/octicons-react@7.4.0-alpha.6839c7e0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"503302f35e010c2c4f8434b04aaf3f86513a9662","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-7.4.0-alpha.6839c7e0.tgz","fileCount":6,"integrity":"sha512-8CXlnWYInepHMYDmSzRzenZc9fZGWsGTtOrOeSdysPfZwKq3TQfAMCj9oenYnqJK7iPDUoIjGUMhNI7drEa++w==","signatures":[{"sig":"MEUCIQDQTaQlPpS+TBZpVE0WOe/VsicAVCrQ9pL4+5SEirvUOQIgHB2TVNcFgiWkuzvIEmfooKu5GfnFfyMxTAavRCRKdgI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":88163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbNR9ACRA9TVsSAnZWagAAEvEP/A64zmXXx/nRl8yfOXWk\nWUeadZDS9qIij+Hd8Py0Rpr4W6eBJCftuHC9AQdQ7PqAZw1/yCKpnoHbj20a\nrmVejWR91KFvgYUyOHE2mXDxRaMPFAmxr4kYUY7z1PU9LQ3cFFxqYgKt3EPR\nBCEsGnGax/fntLdkidZuRC2YFBNru7phAA9x5fkzyOzHXl6E792HwlOs/mvC\nw+r/J+2hLhq1VO9zaHKyhWQtSQN+pHgj6Vj0+RulM7eylPG/GKDfLKGY91Sk\nJ9JeclbBzfEMdBcLXjnZSOLrHr2mq+REN7zUJ0Y4jamPl9Gx9/W4h/G+hQrV\n+Cq2NcnfAUbhqUq6uTjok2yXiG7AKPuwUzg95KORtnUxe27905DcotjlPm2u\nmDW1nyJRq8IxNsgiIPVgT2FCgR7d8Qfh7kDFpWUl/o6NtJe7A4D2HEtsU3gy\nVGQ34PN1gyIsQlzoWnabP4KRmLcuEi6X9bNsZWbJ2tk61IA35dl2pfi49mRP\n/Ygkq3hNsqf/xZKzGEcuEqJ4TrWLsBDK/ZUy6ABVvFT3rwQXQ5/ovWEIALP5\np6519BW3a/AAKkYzQjo4FmTRkV0WhKwk/2EicvXnzvKMLlfRFFZ8bRFRinxI\nYUvJxhITWvF6Y6tKpTD3kI+9EB0kZpAOdjfQOtWd2yoNtYagEv8xmPO11dy3\nuHw6\r\n=8+Jr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","files":["build","icons","index.js","pages"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> [Octicons] for React\n\n## Install\n\n```\n$ npm install @github/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 `@github/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 '@github/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 the following named\nexports:\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 '@github/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIcon(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 '@github/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 '@github/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 '@github/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 '@github/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 '@github/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 guidelines](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 script","test":"jest","build":"rollup -c rollup.config.js","start":"next","prepare":"npm run build -s","pretest":"npm run lint -s","publish":"../../script/notify success","prebuild":"script/build.js","preversion":"npm run build -s","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.3","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^6.0.3","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","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","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_7.4.0-alpha.6839c7e0_1530208064170_0.9385431045766508","host":"s3://npm-registry-packages"}},"7.4.0-alpha.a4b16c23":{"name":"@github/octicons-react","version":"7.4.0-alpha.a4b16c23","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@github/octicons-react@7.4.0-alpha.a4b16c23","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"e42db8b72453b25e335ae94e7b7f4c9c0d0735da","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-7.4.0-alpha.a4b16c23.tgz","fileCount":6,"integrity":"sha512-hcnCWb9byAWeZejs+TrWaQsvhj/vDTtHRMf/fANF4i9aAgSqHgLRG9Upkqeax9bjCXiVAbm4bOTPE2pwCK+RAA==","signatures":[{"sig":"MEUCIFrac/axzUNfX75LWA3Wb1bk7uqGTwJnUqWxIZ4MJqSXAiEAkemkwQCss+cYAyJKhwucXfKj9oxaaQeVAgvzGl4K/Mo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":88163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbNT3rCRA9TVsSAnZWagAA17MQAKSSEyT1JWxO47i5BxQl\nJfjzf2xq7nU6BaeAyyyx/jngYLP6BmVB5ZNRPxDMXAq0SEEBdF4qgTkRSCY1\n+EGqUVyP0dtBe4pCtT108Tbe7wxrWdjtUSjnPd9x9NjFM8HjI1j4Rpkrx6Qq\nBRsOck0fev5wTLysRxq+NI/wOapBuRaIjExrfdxizpLu8vdr3j5kTE9FSmYI\nviCQ+Oak8HmCYp9GHv9ezuRDMUbAAObrYlaSMwRIH1bPImKKxq1TfiqrCd5t\nWxL766tHXKfH7POA+DnJFpJpjGRQQeaKUOqsAI3IypULLatNXdFkRh+3Zg+P\n6yEnqI4PCRTwn08ZIQk3jdA5y25KUIKlKtzu37NxbnImh9Z8yTD56sDKnALs\nKJbB0zX6xBslRD4loa7LD4yZsJp99mFNeUxJeRHJxGHHOGhNSL69puTXJ4h/\nVao4pUFvjibB49GKz2hNov7REY4mkfVR+d1fOtgjtH3dSZDZhjLI+psU54a9\nQsUrGTa4AYZC0RgSfYPL23cE7VahHbEfXT+xUd0toUCAuBGOWfA7BMT9CpgX\n/IAoHhmJrs04ieVB6Vg9BTGUygI8LfQSjdI/F2jnEJTTx78cQ1qO/jX/2rBI\nKR5ChKQJE4z7fV5BwFl2cKBI5NTdz8VtEkjD8yHfPipjP8hrQyJIegvR3ZFa\n8545\r\n=/6ZU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","files":["build","icons","index.js","pages"],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> [Octicons] for React\n\n## Install\n\n```\n$ npm install @github/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 `@github/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 '@github/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 the following named\nexports:\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 '@github/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIcon(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 '@github/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 '@github/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 '@github/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 '@github/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 '@github/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 guidelines](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 script","test":"jest","build":"rollup -c rollup.config.js","start":"next","prepare":"npm run build -s","pretest":"npm run lint -s","publish":"../../script/notify success","prebuild":"script/build.js","preversion":"npm run build -s","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.3","dependencies":{"prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.2.0","next":"^6.0.3","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","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","eslint-plugin-github":"^1.1.0","rollup-plugin-commonjs":"^9.1.3"},"peerDependencies":{"react":">=15"},"_npmOperationalInternal":{"tmp":"tmp/octicons-react_7.4.0-alpha.a4b16c23_1530215915580_0.25887702288692194","host":"s3://npm-registry-packages"}},"7.4.0-alpha.92883216":{"name":"@github/octicons-react","version":"7.4.0-alpha.92883216","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@github/octicons-react@7.4.0-alpha.92883216","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"ede24fdae7c1ff9cea6fda8764e7854ca031a020","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-7.4.0-alpha.92883216.tgz","fileCount":5,"integrity":"sha512-C7rRjceRKGFLTN82mkqfnPdIRW5b7mf0gt+HEhu2gszUb9QlCVm0AyfTPPV5ShmvnlHIayPapugeOrurOueTIA==","signatures":[{"sig":"MEUCIQD0AlJEAQ1miPUML3gu/nEDWzJdVcfxQ2LDeDv2LZ8mrQIgDdrInae5O7Drves735Prt6Gq5CIPEXkDPDLmQ4N9Hmo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbNmmjCRA9TVsSAnZWagAAreEP/07+SimDnPoBYE0JxEKu\n4j5RRu4jNx/mW5u1BGAb8Mbe7yb/GIpHStq2cEl83/2siDdoywGuyattRY4K\nZz6/xjkbQ+f6j5Jb/0GqWo2m80r1cV266XrCEfGhKA7UUw1g26KUcPixFvms\n4h1dC5wXMATixlg5F258bqFY/rZ8mzRow/6lY00nbtmBIvvVVNEcEPFEuPLe\nwlJCDIWzJIGGFqRIjNJsn0a/VGyW/j+kJaRAUlMYedqTEVaCemvedh3TXdmo\n1IrlfbLoCQIHqANyAa1AqeddQ7qG8vjwKR3zQrSh7NoAUiU65CZD0FfEQ0QM\n1R/TGTsP607mx2VT/2wkjCk3EAOAoc7E15IseTkvZ/547Lb/BiuOoykkfd/x\n7xY9ovXraWMZ3W/6m6WrDVlE2R3zqZ/NoFga8BzEkIsHxyxlCtbvcpMCXDbi\nhKrU54Tl33w+Gd2+eUf1XknFzZquExEKT6KfAFNTx4bg90OD2kqhCaZvsA55\n3HMzAJX1Ya+EdgZuwNeqZTa2z0l7T/KAAYMQeGC3I9KEjnRCXXX9Sa4EcoeA\noh85lUBlyo2hKOAbfFQSKcP7AgCS8gldSQO18a8vCjkY2vQqJp0s4yG+V+GU\nQkx9YVvqCd22F6Li6VW/hXR1ilmgxlQyP4ieUnKqpV0ytf0ZoyYrAt5lKgLH\nHdVb\r\n=AgRZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","module":"dist/index.esm.js","readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> [Octicons] for React\n\n## Install\n\n```\n$ npm install @github/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 `@github/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 '@github/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 '@github/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIcon(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 '@github/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 '@github/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 '@github/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 '@github/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 '@github/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 script","test":"jest","build":"npm -s run rollup","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"npm -s run build","pretest":"npm run lint -s","publish":"../../script/notify success","prebuild":"script/build.js","preversion":"npm -s run build","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.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","octicons":"7.2.0","react-dom":"^16.4.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_7.4.0-alpha.92883216_1530292643350_0.005366102218779867","host":"s3://npm-registry-packages"}},"7.4.0-alpha.45ba88e5":{"name":"@github/octicons-react","version":"7.4.0-alpha.45ba88e5","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@github/octicons-react@7.4.0-alpha.45ba88e5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"27714dcc4aa9eb80ebfec091bd12fb295735dac8","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-7.4.0-alpha.45ba88e5.tgz","fileCount":7,"integrity":"sha512-dkMnwwcAgn1mhYsM9F2+AzS7pQmcVrJZhbeQYfs3o433Zs37sq1VtiFPEhA8s1res8Q92kyv6d9NWd3eQ80WZw==","signatures":[{"sig":"MEUCIHDLqSnQnhtD5EwO0/oN1oNiLvxAZYqhOS8U4iiTTUMjAiEA8l4FP9VHfDwSQjT8X/Y1xTI9G66r5gSBMgE+hfvFcM4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbNnhFCRA9TVsSAnZWagAAUmQP/A7oUasD4uRcGVv3TRCd\nHdJCYlgKo11/3NVoFVDeF7ZMl/Fy/rHL5e7+2tkStmPPzkUzxhHukH6gtu9a\nBf4wNrSZLJatwVvmz9IcMHuNqiAu9Lf02X/+wNJBv4ZBHXOKPqIrtqSVi094\nDbUBVqIx/Y2H+kdejKvMpuxNKvEMRVS08hTRDanhqZKnSuDqe7HOqYSItP41\n+VQ89vjqMn4iHkBMg1AWILGr08ocy7cjT8Emq9jIh9maANK1qoK9UQZv8wIV\n7vF5/onjTm2AT9DwRJso/XhLuKpn6c0R6PmoKraLcR1Oc/HsgKGdHVE//NSr\newHoo1j9F7TRb+oWrMljdhORNIExPqSxduSYycsYGzxUyaaJPOTxSSKuy7Wj\nJnZfgUO3bMHTKB77CiTvhScyq1xqq/g7J7qPw8o1l5dZJGLDdyj9lWgUurIg\nFLcm4B1/Yb6DpXiLAvRCIrrjv7BWfgE1RthLMrLg4giWXTlXIPhOq7YmAqh0\nsL1BBRJqmuD9WTFtBUmmgOh0PkVrz1e6ahCFE0quvjmk27BDPt1ot8TlnH3g\n/jNejp0XlBuhrYVpn+xAJS4OWosgzSmcVo/jsFu+gwkA9VCwhk7mvqJHz13g\nGNHRExYwkMJYIUxnbXkR5Y9WFZivor+rkb+NI3Es9vRbjryC2ntQ0B+dWgiN\nDl91\r\n=BEbr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.umd.js","module":"dist/index.esm.js","readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> [Octicons] for React\n\n## Install\n\n```\n$ npm install @github/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 `@github/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 '@github/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 '@github/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIcon(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 '@github/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 '@github/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 '@github/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 '@github/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 '@github/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 script","test":"jest","start":"NODE_ENV=production next","rollup":"rollup -c","prepare":"script/build.js && npm -s run rollup","pretest":"npm run lint -s","publish":"../../script/notify success","preversion":"npm -s run prepare","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.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.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","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_7.4.0-alpha.45ba88e5_1530296389308_0.5700840668070644","host":"s3://npm-registry-packages"}},"7.4.0":{"name":"@github/octicons-react","version":"7.4.0","keywords":["GitHub","icons","svg","octicons","react","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"@github/octicons-react@7.4.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"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":"d5f12a59cde67b07ce17a4c4b5cb51a030718a30","tarball":"https://registry.npmjs.org/@github/octicons-react/-/octicons-react-7.4.0.tgz","fileCount":7,"integrity":"sha512-E2aQBAIXAvfWcoJ+AQ9HINUU39tpEtALjv84Fu3IR/wybvtKh2yiz76hFbfwOZApaSrecmpW2KOBIlpSwWp/uQ==","signatures":[{"sig":"MEYCIQCxOrQYkZHyiQIKkPFFEGLH1LxHTN2wre0EzkQ+AGoA2AIhAOEhcABcC8KsVbaKFfRYTbIV2B0feSaPJl2ftbcxp4RE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2I4zCRA9TVsSAnZWagAAkvgP/36UMZyjVyGINGW9HF5i\nWLBIarfaUeWijPNTEa8MznnEupVxWvHQTyoJ4V4RiQHNItTxldZd8O+Iz0xY\nMpMiN7nMaaCTJEyGCouL2xggqQ4BmdGxWQKXyYaMj1ScIz/gWRJkklm9xNX8\n9iJiMxxkKMW6Lnclo9F6UoXuVmaKisXi08Zyhlzw2aAXO70Jzy7/xbfHUDIC\n3FDyvKWyv3XeH/negCTcATQZjs6c0rx+7IDcWAmjOePE2nMdupJokrYGxBSi\nOij0uM/qf/HX6aA5clGFP6HCt9RAvdUkKPumRROavqPv+6X3PICykCeuh1NW\n/DXKs+KAeByO6AjL/n10Y/k0odXz/o1v0JSJyrHnodFZ73/kdElEs++WQRMx\nFcpjCBYMddV1PTLKVvR5qZmXDlpk8Q7bi05EmXtc2TDP0EPeuqsVOfYRygLO\nwflwue+VKKqIbH+YPAHLLy8V7RXoI2ULXIgfPV0dHFg4opa8ntp8iKIs5Y+X\nEEBvY5t4u/GtMNP6vtHg7q6tAdcpEc0ND73Zj0lEYU327iozbeaSg5RyTIxH\n97Yd+r+3MOa+nfB9a+y+c1sTegMA7r/e3n9JUe/wUFiRamKt1XsRkpl7hhIh\nJs06ikVkZyd9uMK8xc6eeZqUsDJHc5VLG691IZeMNOuLn3GZnZqaWcZ4eIwM\nO/Jz\r\n=O4nb\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":"primer-css","email":"design-systems@github.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.3","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_7.4.0_1531177843125_0.180946195913273","host":"s3://npm-registry-packages"}}},"time":{"created":"2018-02-21T19:52:16.365Z","modified":"2026-08-07T19:04:39.486Z","1.1.0-alpha.542d2f63":"2018-02-21T19:52:16.482Z","0.2.0-alpha.a0d68d5d":"2018-02-22T04:09:49.710Z","0.2.0-alpha.d7728f2d":"2018-02-22T04:12:39.617Z","1.1.0-alpha.60d21a75":"2018-02-22T05:26:38.739Z","1.2.0-alpha.9d94633b":"2018-02-22T05:29:57.844Z","1.2.0-alpha.8f120ac7":"2018-02-22T05:55:49.183Z","1.2.0-alpha.b41121ca":"2018-02-27T19:00:57.583Z","1.2.0-alpha.63ac8805":"2018-03-27T03:02:04.558Z","1.2.0-alpha.0a0d8862":"2018-03-27T03:50:27.148Z","1.2.0-alpha.e0464570":"2018-03-27T21:23:09.679Z","1.2.0-alpha.4ae41723":"2018-03-27T21:37:25.179Z","7.4.0-alpha.b3713556":"2018-06-25T21:40:24.702Z","7.4.0-alpha.cecb4ef2":"2018-06-25T22:43:42.257Z","7.4.0-alpha.b36308c8":"2018-06-25T23:26:14.788Z","7.4.0-alpha.a520fbed":"2018-06-25T23:30:03.300Z","7.4.0-alpha.091aa36a":"2018-06-25T23:36:07.199Z","7.4.0-alpha.9f23124e":"2018-06-26T17:00:49.965Z","7.4.0-alpha.3d51a748":"2018-06-26T17:04:05.441Z","7.4.0-alpha.07ea1751":"2018-06-26T17:17:09.604Z","7.4.0-alpha.63c5588a":"2018-06-26T17:22:19.102Z","7.4.0-alpha.6f5c47d0":"2018-06-27T16:51:00.953Z","7.4.0-alpha.3e482a24":"2018-06-27T22:34:52.956Z","7.4.0-alpha.4baea4bb":"2018-06-27T22:43:28.768Z","7.4.0-alpha.c01fb793":"2018-06-27T23:23:46.741Z","7.4.0-alpha.c307693f":"2018-06-28T16:41:07.981Z","7.4.0-alpha.eca10f7d":"2018-06-28T17:45:31.546Z","7.4.0-alpha.6839c7e0":"2018-06-28T17:47:44.266Z","7.4.0-alpha.a4b16c23":"2018-06-28T19:58:35.654Z","7.4.0-alpha.92883216":"2018-06-29T17:17:23.526Z","7.4.0-alpha.45ba88e5":"2018-06-29T18:19:49.445Z","7.4.0":"2018-07-09T23:10:43.293Z"},"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":"manuelpuyol@github.com","name":"manuelpuyol"},{"email":"yes@jonrohan.codes","name":"jonrohan"},{"email":"design-systems@github.com","name":"primer-css"},{"email":"lugraciecy@gmail.com","name":"gracepark"},{"email":"jibrang@github.com","name":"jibrangarcia"},{"email":"arelia.jones@gmail.com","name":"arelia"},{"email":"tylerjdev@github.com","name":"tylerthedev"},{"email":"clay@smockle.com","name":"smockle"},{"email":"sim@simurai.com","name":"simurai"},{"email":"katehiga8@gmail.com","name":"khiga8"},{"email":"simon.taranto@gmail.com","name":"srt32"},{"email":"dgreif+githubbotnpm@github.com","name":"githubbot"},{"email":"jonathan.fuchs@gmail.com","name":"jfuchs"},{"email":"andri.j.alexandrou@gmail.com","name":"andrialexandrou"},{"email":"joycezhu@github.com","name":"joycezhu"},{"email":"bteng22@gmail.com","name":"bteng22"},{"email":"dustin.savery@gmail.com","name":"dustin.savery"},{"email":"ncalteen@github.com","name":"ncalteen"},{"email":"alaingoga@gmail.com","name":"alaingoga"},{"email":"andrei.girip99@gmail.com","name":"andreiig"}],"readme":"# GitHub Octicons React Component\n\n[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)\n[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)\n\n> [Octicons] for React\n\n## Install\n\n```\n$ npm install @github/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 `@github/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 '@github/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 '@github/octicons-react'\n\nexport default function OcticonByName({name, ...props}) {\n  return <Octicon {...props} icon={getIcon(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 '@github/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 '@github/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 '@github/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 '@github/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 '@github/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","readmeFilename":"README.md"}