Creating an official octicons-react component

lib/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/react/README.md

@@ -0,0 +1,60 @@
+# 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)
+
+> A react component for installing octicons
+
+## Install
+
+```
+$ npm install @github/octicons-react --save
+```
+
+## Usage
+
+The 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.
+
+```js
+// Example usage
+import Octicon from "@github/octicons-react"
+
+const AlertIcon = <Octicon name="alert" />
+```
+
+##### ariaLabel
+
+You have the option to add accessibility information to the icon using `aria-label`.
+
+```js
+// Example usage
+import Octicon from "@github/octicons-react"
+
+const PlusIcon = <Octicon name="plus" ariaLabel="Add new item" />
+```
+
+
+##### width & height
+
+You 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.
+
+```js
+// Example usage
+import Octicon from "@github/octicons-react"
+
+const BiggestLogo = <Octicon name="logo-github" height="500" />
+```
+
+## 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

lib/react/index.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import octicons from 'octicons'
+
+export default class Octicon extends React.Component {
+
+  prepareAttributes(octicon) {
+    const {height, width, ariaLabel} = this.props
+
+    const attr = octicon.options
+
+    // If any of the width or height is passed in
+    if(width || height) {
+      attr["width"] = width ? width : (parseInt(height) * octicon.options["width"] / octicon.options["height"])
+      attr["height"] = height ? height : (parseInt(width) * octicon.options["height"] / octicon.options["width"])
+    }
+
+    // If the user passed in aria-label
+    if (ariaLabel) {
+      attr["aria-label"] = ariaLabel
+      attr["role"] = "img"
+
+      // Un-hide the icon
+      delete attr["aria-hidden"]
+    }
+
+    return attr
+  }
+
+  render() {
+    const {name} = this.props
+    const octicon = octicons[name]
+
+    if (octicon) {
+      const svgStyle = {
+        display: "inline-block",
+        fill: "currentColor",
+        verticalAlign: "text-bottom",
+        position: "relative",
+        userSelect: "none"
+      }
+
+      return (
+        <svg
+          {...this.prepareAttributes(octicon)}
+          style={svgStyle}
+          dangerouslySetInnerHTML={ {__html: octicon.path } }>
+        </svg>
+      )
+    } else {
+      throw new Error(`No such octicon: "${name}"!`)
+    }
+  }
+}

lib/react/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@github/octicons-react",
+  "version": "1.1.0-alpha.542d2f63",
+  "description": "A scalable set of icons handcrafted with <3 by GitHub.",
+  "homepage": "https://octicons.github.com",
+  "author": "GitHub Inc.",
+  "license": "MIT",
+  "main": "index.js",
+  "repository": "https://github.com/primer/octicons.git",
+  "bugs": {
+    "url": "https://github.com/primer/octicons/issues"
+  },
+  "keywords": [
+    "GitHub",
+    "icons",
+    "svg",
+    "octicons",
+    "react",
+    "primer"
+  ],
+  "babel": {
+    "presets": [
+      "env",
+      "react"
+    ]
+  },
+  "peerDependencies": {
+    "react": ">=16.2.0"
+  },
+  "dependencies": {
+    "octicons": "7.1.0",
+    "react": "^16.2.0"
+  },
+  "devDependencies": {
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1"
+  }
+}