Skip to content

CONTRIBUTING.md

Latest commit

 

History

History
53 lines (40 loc) · 1.54 KB

CONTRIBUTING.md

File metadata and controls

53 lines (40 loc) · 1.54 KB

@pierre/icons

@pierre/icons is an open source icon library designed first and foremost for Diffs.com by The Pierre Computer Company. Available as source SVGs exported from Figma and as compiled React components.

Setup

npm i

Adding icons

  1. Drop SVG files into svg/
  2. Run npm run icons:build
  3. Commit the generated src/icons/*.tsx files
  4. Import from @pierre/icons
import { IconArrow, IconCheck } from '@pierre/icons';

<IconArrow size={20} color="red" />;

Scripts

Command Description
npm run icons Build components, sprite, and preview
npm run icons:build Generate React components from SVGs
npm run icons:sprite Generate SVG sprite
npm run icons:preview Generate HTML preview
npm run build Clean dist, generate components, compile TS
npm run clean Remove dist folder
npm run lint Run ESLint
npm run format Run Prettier

Icon props

interface IconProps {
  size?: number | string; // default: 16
  color?: string; // default: 'currentcolor'
  style?: CSSProperties;
  className?: string;
}

Preview

After building, open dist/index.html in a browser to browse all icons.