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

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

Framework Support

⚛️ React Components (Recommended for React apps)

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)

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

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

<!-- 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)

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

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

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

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

// 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)

<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:

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

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

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

Helper Functions

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

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:

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

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

Icon Information

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:

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:

// ✅ 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:

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

Migration Guide

From Raw SVG to React Components

// 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

// 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