@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.