@setu/crucible-icons v1.0.10

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

• Line Icons

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