feat(pictograms-react): add pictograms-react (carbon-design-system#3850)

* feat(pictograms-react): add pictograms-react

* docs(pictograms-react): remove two-tone reference

Author: joshblack

packages/pictograms-react/.npmignore

@@ -0,0 +1,4 @@
+**/__mocks__/**
+**/__tests__/**
+**/examples/**
+**/tasks/**

packages/pictograms-react/README.md

@@ -0,0 +1,116 @@
+# @carbon/pictograms-react
+
+> React components for pictograms in digital and software products using the
+> Carbon Design System
+
+## Getting started
+
+To install `@carbon/pictograms-react` in your project, you will need to run the
+following command using [npm](https://www.npmjs.com/):
+
+```bash
+npm install -S @carbon/pictograms-react
+```
+
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
+
+```bash
+yarn add @carbon/pictograms-react
+```
+
+## Usage
+
+Icons in this package support the following sizes: `16`, `20`, `24`, and `32`
+pixels. These sizes refer to the width and height of the icon. You can import an
+icon component into your project by referring to its name and size:
+
+```jsx
+import { Add24 } from '@carbon/pictograms-react';
+```
+
+We also provide CommonJS and UMD files in the `lib` and `umd` directories,
+respectively.
+
+To import using CommonJS, you can do the following:
+
+```js
+const { Add24 } = require('@carbon/pictograms-react');
+```
+
+_Note: if you would like to find the import path for an icon, you can reference
+our
+[Icon Library](https://www.carbondesignsystem.com/guidelines/iconography/library)_
+
+### Icon fill
+
+All icons from the library support being styled by the `fill` property. You can
+change the color of an icon by passing in a custom class name that sets this
+property (preferred), or by passing in an inline style. For example:
+
+```css
+// CSS custom class name to set the fill of the icon to `rebeccapurple`
+svg.my-custom-class {
+  fill: rebeccapurple;
+}
+```
+
+```jsx
+import { Airplane } from '@carbon/pictograms-react';
+
+function MyComponent() {
+  return (
+    <button>
+      <Airplane aria-label="Add" className="my-custom-class" />
+    </button>
+  );
+}
+```
+
+### Focus and `aria-label`
+
+By default, the icon components from `@carbon/pictograms-react` are treated as
+decorative content. This means that we set `aria-hidden="true"` unless certain
+props are passed to the component.
+
+If you would like the icon to be announced by a screen reader, you can supply an
+`aria-label` or `aria-labelledby`. For example:
+
+```jsx
+import { Airplane } from '@carbon/pictograms-react';
+
+function MyComponent() {
+  return (
+    <button>
+      <Airplane aria-label="Add" />
+    </button>
+  );
+}
+```
+
+Doing this will add the appropriate `role` to the `<svg>` node, as well.
+
+If you would like the `<svg>` to receive focus, you will need to pass in a
+`tabIndex` value. For example:
+
+```jsx
+import { Airplane } from '@carbon/pictograms-react';
+
+function MyComponent() {
+  return <Airplane aria-label="Add" tabIndex="0" />;
+}
+```
+
+Including `tabIndex` and `aria-label` (or `aria-labelledby`) will set the
+corresponding `tabindex` on the underlying `<svg>` and verify support in older
+browsers like Internet Explorer 11 by setting `focusable` to `true`.
+
+## 🙌 Contributing
+
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀
+
+## 📝 License
+
+Licensed under the [Apache 2.0 License](/LICENSE).

packages/pictograms-react/examples/.yarnrc

@@ -0,0 +1 @@
+yarn-offline-mirror false

packages/pictograms-react/examples/storybook/.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

packages/pictograms-react/examples/storybook/.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /\.stories\.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

packages/pictograms-react/examples/storybook/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "carbon-icons-react-storybook",
+  "license": "Apache-2.0",
+  "scripts": {
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@babel/core": "^7.4.5",
+    "@storybook/addon-actions": "^5.1.3",
+    "@storybook/addon-links": "^5.1.3",
+    "@storybook/addons": "^5.1.3",
+    "@storybook/react": "^5.1.3",
+    "babel-loader": "^8.0.6"
+  }
+}

packages/pictograms-react/examples/storybook/stories/index.stories.js

@@ -0,0 +1,10 @@
+import { Airplane } from '../../../es';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+import React from 'react';
+
+storiesOf('Icon', module)
+  .add('default', () => <Airplane />)
+  .add('with aria-label', () => <Airplane aria-label="Label" />)
+  .add('with focus', () => <Airplane aria-label="Label" tabIndex="0" />);