Merge pull request #222 from primer/reocticons

React Octicons!

README.md

@@ -21,14 +21,15 @@ The octicons node.js library is the main JavaScript library. With [a JavaScript
 | Package | Version |
 |---|---|
 | **[octicons](/lib/octicons_node)** <br />Node.js package with Javascript API | [![npm version](https://img.shields.io/npm/v/octicons.svg)](https://www.npmjs.org/package/octicons) |
+| **[@github/octicons-react](/lib/octicons_react)** <br />React octicons components | [![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react) |
 
 ### Ruby
 
 | Package | Version |
 |---|---|
 | **[octicons](/lib/octicons_gem)** <br />Ruby gem with Ruby API | [![Gem version](https://img.shields.io/gem/v/octicons.svg)](https://rubygems.org/gems/octicons) |
 | [octicons_helper](/lib/octicons_helper)<br />Rails helper for using octicons|  [![Gem version](https://img.shields.io/gem/v/octicons_helper.svg)](https://rubygems.org/gems/octicons_helper) |
-| [jekyll-octicons](/lib/jekyll-octicons)<br />Jekyll plugin for using octicons | [![Gem version](https://img.shields.io/gem/v/jekyll-octicons.svg)](https://rubygems.org/gems/jekyll-octicons) |
+| [jekyll-octicons](/lib/octicons_jekyll)<br />Jekyll plugin for using octicons | [![Gem version](https://img.shields.io/gem/v/jekyll-octicons.svg)](https://rubygems.org/gems/jekyll-octicons) |
 
 ## License
 

lerna.json

@@ -4,7 +4,8 @@
     "lib/octicons_node",
     "lib/octicons_gem",
     "lib/octicons_helper",
-    "lib/jekyll-octicons"
+    "lib/octicons_jekyll",
+    "lib/octicons_react"
   ],
   "version": "7.3.0"
 }

lib/jekyll-octicons/lib/jekyll-octicons.rb → lib/octicons_jekyll/lib/jekyll-octicons.rb

@@ -1,4 +1,3 @@
-# rubocop:disable Naming/FileName
 require "octicons"
 require "jekyll-octicons/version"
 require "liquid"

lib/octicons_react/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["env", "stage-0", "react"],
+  "env": {
+    "production": {
+      "presets": ["next/babel"]
+    }
+  }
+}

lib/octicons_react/.eslintignore

@@ -0,0 +1 @@
+src/icons/*.js

lib/octicons_react/.eslintrc.json

@@ -0,0 +1,9 @@
+{
+  "extends": [
+    "plugin:github/recommended",
+    "plugin:github/es6",
+    "plugin:github/react"
+  ],
+  "rules": {
+  }
+}

lib/octicons_react/.gitignore

@@ -0,0 +1,3 @@
+.cache
+.next
+dist/

lib/octicons_react/.npmignore

@@ -0,0 +1,9 @@
+*.config.js
+.*.sw?
+.*rc
+.cache
+.eslint*
+.gitignore
+.next
+script
+src

lib/octicons_react/.nvmrc

@@ -0,0 +1 @@
+8

lib/octicons_react/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 GitHub Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

lib/octicons_react/README.md

@@ -0,0 +1,200 @@
+# GitHub Octicons React Component
+
+[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)
+[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)
+
+> [Octicons] for React
+
+## Install
+
+```
+$ npm install @github/octicons-react --save
+```
+
+## Usage
+
+### `<Octicon>`
+The `<Octicon>` component is really just the "shell" of an Octicon that renders
+the `<svg>` element and all of its attributes. To render a specific icon, you
+must pass it either via the `icon` prop, or as the only child:
+
+```jsx
+/**
+ * The prop form is shorter, but doesn't allow you to pass icon props.
+ */
+<Octicon icon={Icon} />
+
+/**
+ * The child form allows you to pass props.
+ */
+<Octicon><Icon x={10}/></Octicon>
+```
+
+Note that none of our builtin icons take props, so unless you're creating
+[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.
+
+### Icons
+The `@github/octicons-react` module exports the `Octicon` component as
+`default` and the individual icon symbols as separate [named
+exports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This
+allows you to import only the icons that you need without blowing up your
+bundle:
+
+```jsx
+import React from 'react'
+import Octicon, {Beaker, Zap} from '@github/octicons-react'
+
+export default function Icon({boom}) {
+  return <Octicon icon={boom ? Zap : Beaker}/>
+}
+```
+
+If you were to compile this example with a tool that supports [tree-shaking][]
+(such as Webpack, Rollup, or Parcel) the resulting bundle would only include
+the "zap" and "beaker" icons.
+
+### All icons
+If you don't mind your bundle being huge or you need to be able to render
+arbitrarily named icons at runtime, you can import either of the following
+named exports:
+
+#### `getIconByName()`
+The `getIconByName` export is a function that takes a lowercase octicon name
+(such as `arrow-right`) and returns the corresponding icon class. Using this
+helper, it's possible to create an Octicon class that takes a `name` prop and
+resolves it to the right component:
+
+```jsx
+import React from 'react'
+import Octicon, {getIconByName} from '@github/octicons-react'
+
+export default function OcticonByName({name, ...props}) {
+  return <Octicon {...props} icon={getIcon(name)} />
+}
+```
+
+#### `iconsByName`
+The `iconsByName` export is an object that maps keys (such as `arrow-right` or
+`zap`) to component functions, which you can use to generate listings of all
+the octicons:
+
+```jsx
+import React from 'react'
+import Octicon, {iconsByName} from '@github/octicons-react'
+
+export default function OcticonsList() {
+  return (
+    <ul>
+      {Object.keys(iconsByName).map(key => (
+        <li key={key}>
+          <tt>{key}</tt>
+          <Octicon icon={iconsByName[key]}/>
+        </li>
+      ))}
+    </ul>
+  )
+}
+```
+
+### Vertical alignment
+By default the octicons have `vertical-align: text-bottom;` applied as inline
+styles. You can change the alignment via the `verticalAlign` prop, which can be
+either `middle`, `text-bottom`, `text-top`, or `top`.
+
+```js
+import Octicon, {Repo} from '@github/octicons-react'
+
+export default () => (
+  <h1>
+    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github
+  </h1>
+)
+```
+
+
+### `ariaLabel`
+You have the option of adding accessibility information to the icon with the
+[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the
+capitalization of `L`!).
+
+```js
+// Example usage
+import Octicon, {Plus} from '@github/octicons-react'
+
+export default () => (
+  <button>
+    <Octicon icon={Plus} ariaLabel="Add new item" /> New
+  </button>
+)
+```
+
+
+### Sizes
+The `size` prop takes `small`, `medium`, and `large` values that can be used to
+render octicons at standard sizes:
+
+| Prop | Rendered Size |
+| :- | :- |
+| `size='small'` | 16px height by `computed` width |
+| `size='medium'` | 32px height by `computed` width |
+| `size='large'` | 64px height by `computed` width |
+
+```js
+// Example usage
+import Octicon, {LogoGithub} from '@github/octicons-react'
+
+export default () => (
+  <h1>
+    <a href='https://github.com'>
+      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>
+    </a>
+  </h1>
+)
+```
+
+
+## Custom icons
+Each of our icon components is really just a function that renders its SVG
+`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component
+determines the `viewBox` of the `<svg>` element by first looking for a `size`
+array on the icon component class. For instance, if you wanted to create a
+custom icon that consisted of three circles side by side, you could do this:
+
+```jsx
+import React from 'react'
+import Octicon from '@github/octicons-react'
+
+function CirclesIcon() {
+  return (
+    <React.Fragment>
+      <circle r={5} cx={5} cy={5}/>
+      <circle r={5} cx={15} cy={5}/>
+      <circle r={5} cx={25} cy={5}/>
+    </React.Fragment>
+  )
+}
+
+CirclesIcon.size = [30, 10]
+
+export default CirclesOcticon(props) {
+  return <Octicon {...props} icon={CirclesIcon} />
+}
+```
+
+
+## License
+
+(c) GitHub, Inc.
+
+When using the GitHub logos, be sure to follow the [GitHub logo
+guidelines](https://github.com/logos).
+
+[MIT](./LICENSE)  
+
+[octicons]: https://octicons.github.com/
+[primer]: https://github.com/primer/primer
+[docs]: http://primercss.io/
+[npm]: https://www.npmjs.com/
+[install-npm]: https://docs.npmjs.com/getting-started/installing-node
+[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking
+[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

lib/octicons_react/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@github/octicons-react",
+  "version": "7.3.0",
+  "description": "A scalable set of icons handcrafted with <3 by GitHub.",
+  "homepage": "https://octicons.github.com",
+  "author": "GitHub, Inc.",
+  "license": "MIT",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.esm.js",
+  "repository": "primer/octicons",
+  "scripts": {
+    "pretest": "npm run lint -s",
+    "test": "jest",
+    "start": "NODE_ENV=production next",
+    "lint": "eslint src script",
+    "prepare": "script/build.js && npm -s run rollup",
+    "prepublishOnly": "../../script/notify pending",
+    "preversion": "npm -s run prepare",
+    "publish": "../../script/notify success",
+    "rollup": "rollup -c"
+  },
+  "keywords": [
+    "GitHub",
+    "icons",
+    "svg",
+    "octicons",
+    "react",
+    "primer"
+  ],
+  "dependencies": {
+    "prop-types": "^15.6.1"
+  },
+  "devDependencies": {
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "eslint": "^5.0.1",
+    "eslint-plugin-github": "^1.1.0",
+    "eslint-plugin-jest": "^21.17.0",
+    "fs-extra": "^6.0.1",
+    "jest": "^23.2.0",
+    "next": "^5.1.0",
+    "octicons": "7.2.0",
+    "primer-react": "0.0.6-alpha.1",
+    "react": "^16.4.0",
+    "react-dom": "^16.4.1",
+    "react-test-renderer": "^16.4.1",
+    "rollup": "^0.62.0",
+    "rollup-plugin-babel": "^3.0.5",
+    "rollup-plugin-commonjs": "^9.1.3"
+  },
+  "peerDependencies": {
+    "react": ">=15"
+  },
+  "engines": {
+    "node": ">=8"
+  }
+}

lib/octicons_react/pages/_document.js

@@ -0,0 +1,17 @@
+import Document, { Head, Main, NextScript } from 'next/document'
+
+export default class PrimerDocument extends Document {
+  render() {
+    return (
+      <html lang='en'>
+        <Head>
+          <link rel='stylesheet' href='https://unpkg.com/primer/build/build.css' />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}