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

• Line Icons

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 svgLineIcons and svgPictograms in assets/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 fill properties, NO stroke property and no more than 4 CUSTOMIZABLE fill props.

• LINEICON should only have 1 stroke property and default stroke value should be #000.

• For PICTOGRAM :

  • When names changed or new icons added update them in iconNames file.
  • Update the styles of the icons if changed or of new icons added in iconSpecificStyles file.

• To build, run yarn build and then for storybook run yarn storybook

• Update the version of the current package in package.json
• Before pushing it to new branch, run yarn build to build the package