neo-ui-icons

A collection of Neo UI SVG icons and animated motion components for modern web applications. This package provides React and Vue components, as well as raw SVG files for maximum flexibility.

Features

• 🎨 20 Beautiful Icons - Carefully crafted Neo UI themed icons
• ⚛️ React Components - Ready-to-use React components with TypeScript support
• 🟢 Vue Components - Vue 3 components with Composition API
• 🎬 Motion Components - Animated versions of icons with customizable effects
• 📦 Multiple Formats - CommonJS, ES Modules, and raw SVG files
• 🔧 TypeScript Support - Full TypeScript definitions included
• 🎯 Tree Shaking - Only import what you need
• 📱 Responsive - Icons scale perfectly at any size

Installation

npm install neo-ui-icons
# or
yarn add neo-ui-icons
# or
pnpm add neo-ui-icons

Available Icons

• BinaryCode - Binary code representation
• CodeAgent - Code development agent
• EnterDoor - Entry/exit door
• FilmAgent - Film and media agent
• HealthAgent - Health and wellness agent
• MathAgent - Mathematical operations agent
• MatrixCube - Matrix cube visualization
• MatrixPill - Matrix pill representation
• NavAgent - Navigation agent
• NeoGlassesBlack - Neo glasses (black variant)
• NeoGlassesWhite - Neo glasses (white variant)
• NeoLens - Neo lens visualization
• ResearchAgent - Research and analysis agent
• ScholarAgent - Academic and learning agent
• SearchAgent - Search functionality agent
• SecurityAgent - Security and protection agent
• SupportAgent - Customer support agent
• ThinkingAgent - AI thinking process
• WhiteRabbit - White rabbit reference

Motion Components

• MatrixCubeRotating - Continuous rotation with customizable speed and direction
• BinaryCodeFlashing - Binary data processing with glow effect
• WhiteRabbitHopping - Playful bouncing animation with rotation

Usage

React Components

import { BinaryCode, CodeAgent, Icon } from 'neo-ui-icons/react';

function App() {
  return (
    <div>
      {/* Individual icon components */}
      <BinaryCode size={24} color="#333" />
      <CodeAgent size={32} color="#007bff" />
      
      {/* Dynamic icon component */}
      <Icon name="ThinkingAgent" size={48} color="#28a745" />
    </div>
  );
}

Vue Components

<template>
  <div>
    <!-- Individual icon components -->
    <BinaryCode :size="24" color="#333" />
    <CodeAgent :size="32" color="#007bff" />
    
    <!-- Dynamic icon component -->
    <Icon name="ThinkingAgent" :size="48" color="#28a745" />
  </div>
</template>

<script setup lang="ts">
import { BinaryCode, CodeAgent, Icon } from 'neo-ui-icons/vue';
</script>

Motion Components

import { 
  MatrixCubeRotating, 
  BinaryCodeFlashing, 
  WhiteRabbitHopping 
} from 'neo-ui-icons/motion';

function LoadingScreen() {
  return (
    <div>
      {/* Basic usage */}
      <MatrixCubeRotating size={48} color="#00FF85" />
      
      {/* Customized animation */}
      <BinaryCodeFlashing 
        size={32} 
        glowColor="#00FF85" 
        duration={2} 
      />
      
      {/* With custom hop height */}
      <WhiteRabbitHopping 
        size={24} 
        hopHeight={10} 
        color="#ffffff" 
      />
    </div>
  );
}

Raw SVG Files

import { BinaryCode } from 'neo-ui-icons';

// Use as image source
<img src={BinaryCode} alt="Binary Code" />

// Or import directly
import binaryCodeSvg from 'neo-ui-icons/svg/BinaryCode.svg';

Programmatic Usage

import { iconNames, getIconByName, IconName } from 'neo-ui-icons';

// Get all available icon names
console.log(iconNames);

// Get icon by name
const iconPath = getIconByName('BinaryCode');

// Type-safe icon name
const iconName: IconName = 'CodeAgent';

Motion Components API

MatrixCubeRotating

A continuously rotating matrix cube with customizable speed and direction.

<MatrixCubeRotating 
  size={48}
  color="#00FF85"
  duration={5}
  direction="clockwise"
  loop={true}
/>

Props:

• size (number): Width and height in pixels (default: 24)
• color (string): Stroke color (default: "#00FF85")
• duration (number): Animation duration in seconds (default: 5)
• direction ("clockwise" | "counterclockwise"): Rotation direction (default: "clockwise")
• loop (boolean): Whether to loop the animation (default: true)

BinaryCodeFlashing

A binary code icon with flashing/glowing effect.

<BinaryCodeFlashing 
  size={32}
  color="#00FF85"
  glowColor="#00FF85"
  duration={1.5}
  glow={true}
/>

Props:

• size (number): Width and height in pixels (default: 24)
• color (string): Icon color (default: "#00FF85")
• glowColor (string): Glow effect color (default: "#00FF85")
• duration (number): Animation duration in seconds (default: 1.5)
• glow (boolean): Enable glow effect (default: true)

WhiteRabbitHopping

A white rabbit with gentle hopping animation.

<WhiteRabbitHopping 
  size={24}
  color="#ffffff"
  hopHeight={8}
  duration={1.5}
  rotate={true}
/>

Props:

• size (number): Width and height in pixels (default: 24)
• color (string): Rabbit body color (ear stays green) (default: "#ffffff")
• hopHeight (number): Height of the hop in pixels (default: 8)
• duration (number): Animation duration in seconds (default: 1.5)
• rotate (boolean): Add slight rotation during hop (default: true)

Usage Examples

Loading States

import { MatrixCubeRotating, BinaryCodeFlashing } from 'neo-ui-icons/motion';

function LoadingStates() {
  return (
    <div>
      {/* General loading */}
      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
        <MatrixCubeRotating size={32} color="#00FF85" />
        <span>Loading data...</span>
      </div>
      
      {/* Processing state */}
      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
        <BinaryCodeFlashing size={32} color="#00FF85" />
        <span>Loading the matrix...</span>
      </div>
      
      {/* Completion state */}
      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
        <WhiteRabbitHopping size={32} color="#ffffff" />
        <span>Finalizing your job...</span>
      </div>
    </div>
  );
}

Custom Animations

// Fast rotation
<MatrixCubeRotating 
  size={64} 
  duration={2} 
  direction="counterclockwise" 
/>

// Intense flashing
<BinaryCodeFlashing 
  size={48} 
  duration={0.8} 
  glowColor="#ff6b6b" 
/>

// High hops
<WhiteRabbitHopping 
  size={32} 
  hopHeight={15} 
  duration={2} 
/>

API Reference

Icon Props

All icon components accept the following props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number \| string | 24 | Width and height of the icon | | color | string | undefined | Fill color of the icon | | class | string | undefined | CSS class name (Vue only) | | style | object | {} | Inline styles (Vue only) |

Additional SVG props are also supported (e.g., onClick, className, etc.).

Motion Component Props

All motion components extend the base icon props and add animation-specific properties:

| Prop | Type | Default | Description | |------|------|---------|-------------| | duration | number | Varies | Animation duration in seconds | | delay | number | 0 | Animation delay in seconds | | loop | boolean | true | Whether to loop the animation | | easing | string | Varies | CSS easing function | | className | string | '' | Additional CSS classes |

Dynamic Icon Component

The Icon component accepts an additional name prop:

| Prop | Type | Required | Description | |------|------|----------|-------------| | name | IconName | true | Name of the icon to render |

TypeScript Types

import type { IconName, IconProps } from 'neo-ui-icons/react';
import type { 
  MatrixCubeRotatingProps, 
  BinaryCodeFlashingProps, 
  WhiteRabbitHoppingProps 
} from 'neo-ui-icons/motion';

// IconName is a union type of all available icon names
const iconName: IconName = 'BinaryCode'; // ✅ Valid
const invalidName: IconName = 'InvalidIcon'; // ❌ Type error

// Motion component props
const matrixProps: MatrixCubeRotatingProps = {
  size: 48,
  color: '#00FF85',
  duration: 5,
  direction: 'clockwise',
};

Examples

Styling with CSS

/* Custom styling */
.neo-icon {
  transition: all 0.2s ease;
}

.neo-icon:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Motion component styling */
.motion-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #1a1a1a;
  border-radius: 8px;
}

<div className="motion-container">
  <MatrixCubeRotating className="neo-icon" size={32} />
  <span>Processing...</span>
</div>

Conditional Rendering

import { Icon, iconNames } from 'neo-ui-icons/react';

function IconSelector({ selectedIcon }: { selectedIcon: IconName }) {
  return (
    <div>
      {iconNames.map((name) => (
        <Icon
          key={name}
          name={name}
          size={24}
          color={name === selectedIcon ? '#007bff' : '#666'}
          onClick={() => onIconSelect(name)}
        />
      ))}
    </div>
  );
}

Responsive Icons

<BinaryCode 
  size="clamp(16px, 2vw, 32px)" 
  color="currentColor" 
/>

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog

1.1.0

• ✨ Added motion components (MatrixCubeRotating, BinaryCodeFlashing, WhiteRabbitHopping)
• 🎨 Improved animation smoothness and realism
• 📚 Enhanced documentation with motion component examples
• 🔧 Updated build configuration for motion components
• 🏷️ Added motion-related keywords for better discoverability

1.0.0

• Initial release
• 20 Neo UI themed icons
• React and Vue components
• TypeScript support
• Multiple build formats