WK Animated Icons

🎨 A beautiful collection of animated SVG icons built with React, GSAP, and TypeScript. Perfect for modern web applications that need engaging visual elements for financial services and business applications.

✨ Features

• 🚀 Smooth Animations - Powered by GSAP for high-performance animations
• 📱 React Ready - Built specifically for React applications
• 🎯 TypeScript Support - Full type safety out of the box
• 🎨 Customizable - Easy to style and modify with props
• 📦 Lightweight - Optimized bundle size with tree-shaking support
• 🔧 Tree Shakable - Import only what you need
• 💼 Business Focused - Icons designed for financial and business applications

� Installation

npm install wk-animated-icons
# or
yarn add wk-animated-icons  
# or
pnpm add wk-animated-icons

� Quick Start

import React from 'react';
import { AutoLase, PersonalLoan, WukadLogo2Animation } from 'wk-animated-icons';
import 'wk-animated-icons/elements.css';

function App() {
  return (
    <div>
      <h1>Welcome to WK Animated Icons</h1>
      <AutoLase width={200} height={120} />
      <PersonalLoan width={150} height={100} />
      <WukadLogo2Animation />
    </div>
  );
}

export default App;

� Available Icons

🏦 Financial Services Icons

• AutoLase - Auto lease animation with card design
• PersonalLoan - Personal loan icon with smooth animations
• CC - Credit card icon
• Mortage - Mortgage/home loan icon
• BuyoutLoan - Buyout loan illustration
• BuyoutLoanOld - Alternative buyout loan design

🏢 Brand & Logo Icons

• WukadLogo2Animation - Animated Wukad logo with motion effects
• WukadCheckMarkAnimation - Animated checkmark for success states
• Logo - General logo component

🏙️ About Us Section Icons

• City - City illustration for location/presence
• Finance - Finance and money management icon
• Mission - Mission statement visual
• Puzzle - Puzzle piece for collaboration/solutions
• Vision - Vision and future goals icon

💎 Values & Principles Icons

• Accessibility - Accessibility and inclusion icon
• Empowerment - Empowerment and growth icon
• Inclusion - Innovation and technology icon
• Integrity - Integrity and trust icon
• Transparency - Transparency and openness icon
• SharedSuccess - Shared success and partnership icon

🤝 Business Partnership Icons

• BeAPartner - Partnership invitation icon
• BeAWukader - Join the team icon
• ContactUs - Contact and communication icon

📋 Product Features & Steps

• BeAPartnerFeatures1 - Partnership feature highlight 1
• BeAPartnerFeatures2 - Partnership feature highlight 2
• BeAPartnerStoriesAndStatistics - Success stories and stats
• CreditCardFromWukadFeature1-4 - Credit card feature series
• ProductsStepsBeAPartner - Partnership process steps
• ProductsStepsAutoLase - Auto lease process steps
• ProductsStepsPersonalLoane - Personal loan process steps
• ProductsStepsMortgageLoane - Mortgage process steps

🔄 Product Variants

• ProductsCC - Product-specific credit card icon
• ProductsCCOld - Alternative credit card design
• ProductsMortage - Product-specific mortgage icon
• ProductsAutoLase - Product-specific auto lease icon
• ProductsPersonalLoan - Product-specific personal loan icon

💡 Usage Examples

Basic Usage with Default Size

import { AutoLase, Mission } from 'wk-animated-icons';

function FinancialSection() {
  return (
    <div className="financial-icons">
      <AutoLase />
      <Mission />
    </div>
  );
}

Custom Sizing

import { WukadLogo2Animation } from 'wk-animated-icons';

function Header() {
  return (
    <div className="header">
      <WukadLogo2Animation 
        width={200} 
        height={100}
      />
    </div>
  );
}

With Custom Styling

import { PersonalLoan } from 'wk-animated-icons';

function StyledIcon() {
  return (
    <PersonalLoan 
      width={150}
      height={150}
      style={{ 
        filter: 'drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1))',
        transition: 'transform 0.3s ease'
      }}
      className="hover:scale-110"
    />
  );
}

Tree Shaking (Recommended for Bundle Size)

// Import only what you need for optimal bundle size
import AutoLase from 'wk-animated-icons/AutoLase';
import PersonalLoan from 'wk-animated-icons/PersonalLoan';

function OptimizedComponent() {
  return (
    <div>
      <AutoLase width={100} height={60} />
      <PersonalLoan width={100} height={60} />
    </div>
  );
}

🎨 Customization

Props Interface

All icons accept standard SVG props plus custom sizing:

interface SVGProps {
  width?: number;
  height?: number;
  className?: string;
  style?: React.CSSProperties;
  // ... other standard SVG props
}

CSS Styling

/* Global icon styling */
.wk-icon {
  transition: all 0.3s ease;
}

.wk-icon:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Responsive sizing */
@media (max-width: 768px) {
  .wk-icon {
    width: 80%;
    height: auto;
  }
}

⚙️ Requirements

• React 16.8+ (hooks support required)
• TypeScript (optional but recommended)
• Modern browser with SVG support
• GSAP (included as dependency for animations)

🧪 Testing

We use Vitest + React Testing Library for comprehensive testing.

# Run all tests
pnpm test

# Run tests with coverage
pnpm test:coverage

# Run tests in watch mode  
pnpm test:watch

# Run tests with UI
pnpm test:ui

📖 Storybook

Explore all available icons and their animations in our interactive Storybook:

# Start Storybook development server
pnpm storybook

# Build static Storybook
pnpm build-storybook

🛠️ Development

Want to contribute? Here's how to get started:

# Clone the repository
git clone <repository-url>
cd wk-animated-icons

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Run linting
pnpm lint

# Build the library
pnpm build

🚀 Performance

• Optimized Bundle: Tree-shakable exports mean you only bundle what you use
• GSAP Animations: Hardware-accelerated animations for smooth 60fps performance
• SVG Based: Scalable vector graphics that look crisp at any size
• Minimal CSS: Lightweight styling with zero external dependencies
• TypeScript: Full type checking prevents runtime errors

📄 TypeScript Support

Full TypeScript support is included out of the box:

import { AutoLase } from 'wk-animated-icons';

const MyComponent: React.FC = () => {
  return (
    <AutoLase 
      width={100}      // TypeScript autocomplete 
      height={100}     // Type checking included
      className="my-icon" 
    />
  );
};

🤝 Contributing

We welcome contributions! Please follow these steps:

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

📜 License

MIT © Ahmed Maghraby

🔗 Links

• NPM Package: wk-animated-icons
• Author: Ahmed Maghraby
• Email: [email protected]

Made with ❤️ by Ahmed Maghraby