yarn add @setu/crucible-icons
# or
npm install @setu/crucible-icons<ArrowOverlapping />You can configure crucible icons using props.
<ArrowOverlapping width={50} base="red" />- Pictograms
| Key | Default | Note |
|---|---|---|
width |
64 |
Type : Number |
height |
64 |
Type : Number |
base |
Icon's default fill |
Type : String |
primary |
Icon's default fill |
Type : String |
secondary |
Icon's default fill |
Type : String |
tertiary |
Icon's default fill |
Type : String |
- Line Icons
| Key | Default | Notes |
|---|---|---|
width |
24 |
Type : Number |
height |
24 |
Type : Number |
fill |
- |
Type : String |
stroke |
#000 |
Type : String |
Note: fill prop is only valid for icons BadgeWithTick, CircleWithCross, CircleWithTick.
- Create an issue with the icon/s that needs to be added to the package
- The issue is reviewed and a PR with all the necessary changes is raised to
main - Package is published to npm on merge of the PR
-
Add svg files to respective folders of
svgLineIconsandsvgPictogramsinassets/icons/svgs. -
Try to use inline svg properties instead of using with via CSS classes and convert them to valid JSX syntax property at build time.
-
<defs></defs>tag should only include<style></style>tag in svg. -
PICTOGRAM should only have
fillproperties, NOstrokeproperty and no more than 4 CUSTOMIZABLEfillprops. -
LINEICON should only have 1
strokeproperty and defaultstrokevalue should be#000. -
For PICTOGRAM :
- When names changed or new icons added update them in
iconNamesfile. - Update the styles of the icons if changed or of new icons added in
iconSpecificStylesfile.
- When names changed or new icons added update them in
-
To build, run
yarn buildand then for storybook runyarn storybook
- Update the version of the current package in
package.json - Before pushing it to new branch, run
yarn buildto build the package