Icons for digital and software products using the Carbon Design System
npm install @rocketsoftware/icons> Icons for digital and software products using the Carbon Design System
To install @rocketsoftware/icons in your project, you will need to run the
following command using npm:
``bash`
npm install -S @rocketsoftware/icons
If you prefer Yarn, use the following command
instead:
`bash`
yarn add @rocketsoftware/icons
Icons in Carbon are provided through a variety of packages, often specific for
the framework that will use them. Currently, we support the following packages
for various frameworks:
We also support using icons in Vanilla JavaScript.
In order to use an icon, it may be helpful to reference our
Icon library
reference page in order to find the specific icon you would like to use.
Once you've found an icon and you're looking to use it in Vanilla JavaScript,
you can import the icon by writing the following in your JavaScript file:
`js`
import IconName from '@carbon/icons/
For example, if I wanted to import the 16x16
add
icon, I would write:
`js`
import AddIcon from '@carbon/icons/es/add/16';
In this case, es is used for ES2015 modules (ESM), but one may also use lib
for CommonJS or for UMD modules.
In order to render this to the screen, we'll make use of our
icon-helpers package. This package gives us two options for
rendering our icons: toString and toSVG. If rendering in templates, you maytoSVG
want to use the former. If rendering to the DOM, may be helpful.
In our case, we'll use toSVG to create a node in the DOM for the 16x16 add
icon:
`js
import { getAttributes, toSVG } from '@carbon/icon-helpers';
import addIcon from '@carbon/icons/es/add/16';
const addIconNode = toSVG({
...addIcon,
attrs: getAttributes(addIcon.attrs),
});
`
Certain icons in the library support an alternate fill inside of the icon, for
example
warning--filled
supports styling the inner ! path.
In order to style the inner path, you will need to target the SVG using CSS. In
general, you can target the path by writing the following:
`css`
svg [data-icon-path='inner-path'] {
fill: blue;
opacity: 1;
}
In the code snippet above, we are targetting the inner path attribute with
[data-icon-path="inner-path"]. The value of fill will be the custom coloropacity
you would like to set for the inner path. We also need to set to 1`
in order to get this inner path to be visible on the page.
You can view a full reference of our icons
here . This is
useful for finding the path information in order to import an icon.
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.