React components for icons in digital and software products using the Carbon Design System
> React components for icons in digital and software products using the UN
> Design System
To install @wfp/icons-react in your project, you will need to run the
following command using npm:
``bash`
npm install -S @wfp/icons-react
If you prefer Yarn, use the following command
instead:
`bash`
yarn add @wfp/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 referring to its name and size:
`jsx`
import { Add24 } from "@wfp/icons-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("@wfp/icons-react");
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:
`cssrebeccapurple
// CSS custom class name to set the fill of the icon to `
svg.my-custom-class {
fill: rebeccapurple;
}
`jsx
import { Add16 } from "@wfp/icons-react";
function MyComponent() {
return (
);
}
`
#### 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:
`scssyellow
// CSS custom class name to set the fill of the icon to
svg.my-custom-class {
fill: yellow;
}
// Use the data-icon-path attribute selector to target the inner pathblack
// where we want to set the fill to . We also set opacity to 1 so`
// that this inner-path is visible.
svg.my-custom-class [data-icon-path="inner-path"] {
fill: black;
opacity: 1;
}
`jsx
import { WarningFilled16 } from "@wfp/icons-react";
function MyComponent() {
return
}
`
By default, the icon components from @wfp/icons-react are treated asaria-hidden="true"
decorative content. This means that we set 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 "@wfp/icons-react";
function MyComponent() {
return (
);
}
`
Doing this will add the appropriate role to the
If you would like the
`jsx
import { Add16 } from "@wfp/icons-react";
function MyComponent() {
return
}
`
Including tabIndex and aria-label (or aria-labelledby) will set thetabindex
corresponding on the underlying
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! 👀
Licensed under the Apache 2.0 License.