SF Icons

SVG-based React/TypeScript icon components for Shipfusion projects.

Installation

``bash
npm install shipfusion-icons
`

Import options

You can import icons in two ways:

$3

`tsx
import { Add, CheckCircle, CalendarFill } from '@shipfusion/shipfusion-icons';

export function MyComponent() {
return (



);
}
`

$3

`tsx
import { Icon } from '@shipfusion/shipfusion-icons';

export function MyComponent({ iconName }: { iconName: IconName }) {
return (
<>



{/ Eager load critical icons /}


);
}
`

API

$3

- Accept all standard React SVGProps
- Common props:
- className, style, title
- fill (defaults to currentColor)
- size (semantic: xs|sm|md|lg|xl or number). Default: 16 (px)
- width / height (auto-set from size; if both provided, they take precedence)

$3

- Props:
- icon: IconName (string union of all icons)
- size: xl | lg | md | sm | xs (default: sm)
- eager: boolean (default: false) - When true, the icon is eagerly loaded (no code splitting). When false, the icon is lazy-loaded using React.lazy.
- Plus all standard SVGProps
- Sizes map to pixels: xl=48, lg=40, md=32, sm=24, xs=16
- Lazy loading (default): Icons are lazy-loaded using React.lazy and wrapped in Suspense with fallback={null}. This enables code splitting and reduces initial bundle size.
- Eager loading: When eager={true}, icons are imported directly without code splitting. Use this for critical above-the-fold icons that should load immediately.

#### Example with eager loading:

`tsx
import { Icon } from '@shipfusion/shipfusion-icons';

export function MyComponent() {
return (
<>
{/ Lazy loaded (default) - code splitting enabled /}


{/ Eager loaded - no code splitting, loads immediately /}


);
}
`

Development

Source SVGs live under assets/. Generated React components live in src/icons/.

Generate/refresh icons from SVGs:

`bash
npm run build-icons
`

This will:

1. Clean previous generated outputs
2. Convert SVGs to React components
3. Apply renames and prop adjustments
4. Regenerate src/index.ts and src/icons-map.ts`

License

ISC