Crucible Icons

Setu’s icons package that lets designers and developers ship fast!

Activity

Installation

yarn add @setu/crucible-icons
# or
npm install @setu/crucible-icons

Example usage

<ArrowOverlapping />

Configuration

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.

Contributing to the package

• 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

Guidelines to add icons

• 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

Points to note when raising PR

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