npm package: @shadowfax-tech/sfx-ui-icons
Description: Standalone SVG icons package for SFX applications
Author: Shadowfax Technologies
Latest version: 0.1.3

# SFX Cargo UI Icons

A comprehensive collection of 382 SVG icons for use in React and Angular applications, available both as raw SVG strings and framework-specific components.

## Installation

```bash
yarn add @shadowfax-tech/sfx-cargo-ui
```

## Framework Support

### ⚛️ React Components (Recommended for React apps)

```tsx
import { RocketLaunch, TrashRedo, Duotone1 } from '@shadowfax-tech/sfx-cargo-ui/icons/react';

// Use like any React component
<RocketLaunch size={24} color="#3b82f6" />
<TrashRedo size={32} color="red" fill={true} />
<Duotone1 size={48} color="currentColor" className="my-icon" />
```

### 🅰️ Angular Components (Recommended for Angular apps)

```typescript
// Import the module
import { SfxIconsModule } from '@shadowfax-tech/sfx-cargo-ui/icons/angular';

@NgModule({
  imports: [SfxIconsModule],
  // ...
})
export class AppModule {}
```

```html
<!-- Use in templates -->
<sfx-rocket-launch [size]="24" color="#3b82f6"></sfx-rocket-launch>
<sfx-trash-redo [size]="32" color="red" [fill]="true"></sfx-trash-redo>
<sfx-duotone1 [size]="48" color="currentColor" className="my-icon"></sfx-duotone1>
```

### 🔧 Raw SVG Usage (Universal - works with any framework)

```typescript
import { allIcons, getIcon } from '@shadowfax-tech/sfx-cargo-ui/icons';

// Get an icon by name
const rocketIcon = getIcon('rocketLaunch');

// Use in your HTML
document.getElementById('icon-container').innerHTML = rocketIcon;
```

## Component Props

### React Component Props

```tsx
interface IconProps {
  size?: number | string;  // Size in pixels or any CSS unit (default: 24)
  color?: string;          // Any valid CSS color (default: 'currentColor')
  fill?: boolean;          // Whether to fill the icon (default: false)
  className?: string;      // CSS class name
  style?: React.CSSProperties; // Inline styles
}
```

### Angular Component Props

```typescript
interface IconComponentProps {
  size?: number | string;  // Size in pixels or any CSS unit (default: 24)
  color?: string;          // Any valid CSS color (default: 'currentColor')
  fill?: boolean;          // Whether to fill the icon (default: false)
  className?: string;      // CSS class name
  style?: { [key: string]: any }; // Inline styles
}
```

## Available Icons

### React Components (382 total)

#### Individual Named Icons
- `<RocketLaunch />` - Rocket launch icon
- `<TrashRedo />` - Trash redo icon  
- `<Vector />` - Vector icon
- `<Vector1 />` - Vector 1 icon

#### Generated Components
All icons are available as PascalCase React components:
- **Duotone icons** (95): `<Duotone />`, `<Duotone1 />`, `<Duotone2 />`, etc.
- **Filled icons** (95): `<Filled />`, `<Filled1 />`, `<Filled2 />`, etc.
- **Light icons** (95): `<Light />`, `<Light1 />`, `<Light2 />`, etc.
- **Regular icons** (93): `<Regular />`, `<Regular1 />`, `<Regular2 />`, etc.

### Angular Components (382 total)

#### Individual Named Icons
- `<sfx-rocket-launch>` - Rocket launch icon
- `<sfx-trash-redo>` - Trash redo icon  
- `<sfx-vector>` - Vector icon
- `<sfx-vector1>` - Vector 1 icon

#### Generated Components
All icons are available as kebab-case Angular components:
- **Duotone icons** (95): `<sfx-duotone>`, `<sfx-duotone1>`, `<sfx-duotone2>`, etc.
- **Filled icons** (95): `<sfx-filled>`, `<sfx-filled1>`, `<sfx-filled2>`, etc.
- **Light icons** (95): `<sfx-light>`, `<sfx-light1>`, `<sfx-light2>`, etc.
- **Regular icons** (93): `<sfx-regular>`, `<sfx-regular1>`, `<sfx-regular2>`, etc.

## Usage Examples

### React Examples

```tsx
import React from 'react';
import { RocketLaunch, Duotone1, Filled2 } from '@shadowfax-tech/sfx-cargo-ui/icons/react';

export const MyComponent = () => {
  return (
    <div>
      {/* Basic usage */}
      <RocketLaunch />
      
      {/* Custom size and color */}
      <RocketLaunch size={32} color="#ef4444" />
      
      {/* Filled version */}
      <Duotone1 fill={true} color="#10b981" />
      
      {/* With custom styling */}
      <Filled2 
        size={48}
        color="#3b82f6"
        className="my-icon"
        style={{ margin: '8px' }}
      />
      
      {/* Dynamic sizing with CSS units */}
      <RocketLaunch size="2rem" color="currentColor" />
    </div>
  );
};
```

### Angular Examples

```typescript
// Component
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div>
      <!-- Basic usage -->
      <sfx-rocket-launch></sfx-rocket-launch>
      
      <!-- Custom size and color -->
      <sfx-rocket-launch [size]="32" color="#ef4444"></sfx-rocket-launch>
      
      <!-- Filled version -->
      <sfx-duotone1 [fill]="true" color="#10b981"></sfx-duotone1>
      
      <!-- With custom styling -->
      <sfx-filled2 
        [size]="48"
        color="#3b82f6"
        className="my-icon"
        [style]="{ margin: '8px' }">
      </sfx-filled2>
      
      <!-- Dynamic sizing with CSS units -->
      <sfx-rocket-launch size="2rem" color="currentColor"></sfx-rocket-launch>
    </div>
  `
})
export class MyComponent {}
```

### Vue.js Example (using raw SVG)

```vue
<template>
  <div 
    :class="className"
    :style="{ 
      width: size + 'px', 
      height: size + 'px', 
      color: color 
    }"
    v-html="iconSvg"
  />
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { getIcon } from '@shadowfax-tech/sfx-cargo-ui/icons';

interface Props {
  name: string;
  size?: number;
  color?: string;
  className?: string;
}

const props = withDefaults(defineProps<Props>(), {
  size: 24,
  color: 'currentColor'
});

const iconSvg = computed(() => getIcon(props.name as any));
</script>
```

## Icon Categories

### Duotone Icons (95 icons)
Two-tone style icons with dual color support.
- **React**: `<Duotone />`, `<Duotone1 />`, `<Duotone2 />`, etc.
- **Angular**: `<sfx-duotone>`, `<sfx-duotone1>`, `<sfx-duotone2>`, etc.

### Filled Icons (95 icons)
Solid filled icons for bold visual impact.
- **React**: `<Filled />`, `<Filled1 />`, `<Filled2 />`, etc.
- **Angular**: `<sfx-filled>`, `<sfx-filled1>`, `<sfx-filled2>`, etc.

### Light Icons (95 icons)
Light weight stroke icons for minimal designs.
- **React**: `<Light />`, `<Light1 />`, `<Light2 />`, etc.
- **Angular**: `<sfx-light>`, `<sfx-light1>`, `<sfx-light2>`, etc.

### Regular Icons (93 icons)
Regular weight stroke icons for balanced appearance.
- **React**: `<Regular />`, `<Regular1 />`, `<Regular2 />`, etc.
- **Angular**: `<sfx-regular>`, `<sfx-regular1>`, `<sfx-regular2>`, etc.

### Individual Icons (4 icons)
Named individual icons:
- **React**: `<RocketLaunch />`, `<TrashRedo />`, `<Vector />`, `<Vector1 />`
- **Angular**: `<sfx-rocket-launch>`, `<sfx-trash-redo>`, `<sfx-vector>`, `<sfx-vector1>`

## TypeScript Support

The package includes full TypeScript support with type definitions:

```typescript
import type { 
  IconName, 
  DuotoneIconName, 
  FilledIconName, 
  LightIconName, 
  RegularIconName,
  IconProps,
  IconComponentName
} from '@shadowfax-tech/sfx-cargo-ui/icons';

// For React components
import type { IconProps } from '@shadowfax-tech/sfx-cargo-ui/icons/react';

// For Angular components
import type { IconComponentProps } from '@shadowfax-tech/sfx-cargo-ui/icons/angular';
```

## Raw SVG API (Advanced Usage)

### Search Icons

```typescript
import { searchIcons } from '@shadowfax-tech/sfx-cargo-ui/icons';

// Find all icons containing "rocket"
const rocketIcons = searchIcons('rocket');
console.log(rocketIcons); // ['rocketLaunch']
```

### Helper Functions

```typescript
import { 
  getDuotoneIcon, 
  getFilledIcon, 
  getLightIcon, 
  getRegularIcon 
} from '@shadowfax-tech/sfx-cargo-ui/icons';

// Get specific icon types
const duotone = getDuotoneIcon('duotone1');
const filled = getFilledIcon('filled1');
const light = getLightIcon('light1');
const regular = getRegularIcon('regular1');
```

### Import Specific Categories

```typescript
import { 
  duotoneIcons, 
  filledIcons, 
  lightIcons, 
  regularIcons, 
  icons 
} from '@shadowfax-tech/sfx-cargo-ui/icons';

// Use specific category
const duotoneIcon = duotoneIcons.duotone1;
```

## Styling Icons

Icons inherit the current text color by default. You can customize them with CSS:

```css
.icon {
  width: 24px;
  height: 24px;
  color: #3b82f6; /* Blue color */
}

.icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
```

## Icon Information

```typescript
import { iconCount, getAllIconNames } from '@shadowfax-tech/sfx-cargo-ui/icons';

console.log(iconCount);
// {
//   total: 382,
//   duotone: 95,
//   filled: 95,
//   light: 95,
//   regular: 93,
//   other: 4
// }

console.log(getAllIconNames()); // Array of all icon names
```

## Development

To regenerate the icon exports after adding new SVG files:

```bash
yarn generate-icons
```

This will scan the `src/icons/src/svg/` directory and automatically generate:
- Raw SVG exports
- React components
- Angular components
- TypeScript type definitions

## Bundle Size Optimization

### Tree Shaking Support

Both React and Angular components support tree shaking, so you only bundle the icons you actually use:

```typescript
// ✅ Only bundles RocketLaunch component
import { RocketLaunch } from '@shadowfax-tech/sfx-cargo-ui/icons/react';

// ❌ Bundles all icons
import * as Icons from '@shadowfax-tech/sfx-cargo-ui/icons/react';
```

### Raw SVG for Minimal Bundle

For the smallest possible bundle size, use raw SVG strings:

```typescript
import { getIcon } from '@shadowfax-tech/sfx-cargo-ui/icons';
const icon = getIcon('rocketLaunch'); // Minimal overhead
```

## Migration Guide

### From Raw SVG to React Components

```typescript
// Before
import { getIcon } from '@shadowfax-tech/sfx-cargo-ui/icons';
const iconSvg = getIcon('rocketLaunch');

// After
import { RocketLaunch } from '@shadowfax-tech/sfx-cargo-ui/icons/react';
<RocketLaunch size={24} color="#3b82f6" />
```

### From Raw SVG to Angular Components

```typescript
// Before
import { getIcon } from '@shadowfax-tech/sfx-cargo-ui/icons';
const iconSvg = getIcon('rocketLaunch');

// After
<sfx-rocket-launch [size]="24" color="#3b82f6"></sfx-rocket-launch>
```

## License

MIT