@carbon/icons-react 10.4.0-rc.3 → 10.4.0

package/README.md

@@ -23,10 +23,10 @@ yarn add @carbon/icons-react
 
 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 doing one of the following:
+icon component into your project by referring to its name and size:
 
 ```jsx
-import Add24 from '@carbon/icons-react/es/add/16';
+import { Add24 } from '@carbon/icons-react';
 ```
 
 We also provide CommonJS and UMD files in the `lib` and `umd` directories,
@@ -35,11 +35,104 @@ respectively.
 To import using CommonJS, you can do the following:
 
 ```js
-const Add24 = require('@carbon/icons-react/lib/Add/24');
+const { Add24 } = require('@carbon/icons-react');
 ```
 
 _Note: if you would like to find the import path for an icon, you can reference
-our [icon preview](https://carbon-elements.netlify.com/icons/examples/preview/)_
+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 { Add16 } from '@carbon/icons-react';
+
+function MyComponent() {
+  return (
+    <button>
+      <Add16 aria-label="Add" className="my-custom-class" />
+    </button>
+  );
+}
+```
+
+#### Two-tone icons
+
+Certain icons in the library support two distinct fill colors. You can target
+the inner path by using the `[data-icon-path="inner-path"]` attribute selector.
+For example:
+
+```scss
+// CSS custom class name to set the fill of the icon to `yellow`
+svg.outer-icon-fill {
+  fill: yellow;
+}
+
+// Use the `data-icon-path` attribute selector to target the inner path
+// where we want to set the fill to `black`. We also set `opacity` to `1` so
+// that this inner-path is visible.
+svg.outer-icon-fill [data-icon-path='inner-path'] {
+  fill: black;
+  opacity: 1;
+}
+```
+
+```jsx
+import { WarningFilled16 } from '@carbon/icons-react';
+
+function MyComponent() {
+  return <WarningFilled16 aria-label="Add" className="my-custom-class" />;
+}
+```
+
+### Focus and `aria-label`
+
+By default, the icon components from `@carbon/icons-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 { Add16 } from '@carbon/icons-react';
+
+function MyComponent() {
+  return (
+    <button>
+      <Add16 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 { Add16 } from '@carbon/icons-react';
+
+function MyComponent() {
+  return <Add16 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
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-react",
   "description": "React components for icons in digital and software products using the Carbon Design System",
-  "version": "10.4.0-rc.3",
+  "version": "10.4.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -29,14 +29,14 @@
     "clean": "rimraf es lib umd"
   },
   "dependencies": {
-    "@carbon/icon-helpers": "10.3.0-rc.3"
+    "@carbon/icon-helpers": "10.3.0"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
-    "@carbon/cli-reporter": "10.3.0-rc.3",
-    "@carbon/icons": "10.4.0-rc.3",
-    "browserslist-config-carbon": "10.4.0-rc.3",
+    "@carbon/cli-reporter": "10.3.0",
+    "@carbon/icons": "10.4.0",
+    "browserslist-config-carbon": "10.4.0",
     "change-case": "^3.1.0",
     "core-js": "^3.1.3",
     "fs-extra": "^7.0.0",
@@ -50,5 +50,5 @@
     "rollup-plugin-strip-banner": "^0.2.0"
   },
   "sideEffects": false,
-  "gitHead": "8ff9500b61ec590a2a66f395f227b58cff690849"
+  "gitHead": "1a786efd8ef95572699cc00a03bc2858c794ca08"
 }