### Clone Repository

Source: https://github.com/pqoqubbw/icons/blob/main/CONTRIBUTING.md

Clones the project repository from GitHub to your local machine, initiating the development environment setup.

```bash
git clone https://github.com/pqoqubbw/icons.git
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/pqoqubbw/icons/blob/main/CONTRIBUTING.md

Installs all necessary project dependencies using Yarn, ensuring the development environment is ready.

```bash
yarn install
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/pqoqubbw/icons/blob/main/CONTRIBUTING.md

Changes the current directory to the cloned project's root, preparing for further development commands.

```bash
cd icons
```

--------------------------------

### Run Project Tests and Linting

Source: https://github.com/pqoqubbw/icons/blob/main/CONTRIBUTING.md

Performs code linting and generates CLI assets to ensure code quality and proper functionality before committing changes.

```bash
yarn lint
yarn gen-cli
```

--------------------------------

### Build Project

Source: https://github.com/pqoqubbw/icons/blob/main/CONTRIBUTING.md

Executes the project build process using Yarn, compiling the code and checking for any compilation errors.

```bash
yarn build
```

--------------------------------

### Commit Changes to Git

Source: https://github.com/pqoqubbw/icons/blob/main/CONTRIBUTING.md

Commits the staged changes to the local Git repository with a descriptive message, summarizing the added icon.

```bash
git commit -m "Add [icon-name] animated icon"
```

--------------------------------

### Push Changes to Remote Fork

Source: https://github.com/pqoqubbw/icons/blob/main/CONTRIBUTING.md

Pushes the committed changes from your local branch to your forked repository on GitHub, making them available for a pull request.

```bash
git push origin your-branch-name
```

--------------------------------

### Import New Icon Component

Source: https://github.com/pqoqubbw/icons/blob/main/CONTRIBUTING.md

Imports the newly created animated icon component into the main `icons/index.tsx` file, making it available for inclusion in the global icon list.

```tsx
import { [YourIconName]Icon } from './[icon-name]';
```

--------------------------------

### Create New Feature Branch

Source: https://github.com/pqoqubbw/icons/blob/main/CONTRIBUTING.md

Creates and switches to a new Git branch for your feature or bug fix, isolating your changes from the main branch.

```bash
git checkout -b your-branch-name
```

--------------------------------

### Animated Icon Component Template (React/TypeScript)

Source: https://github.com/pqoqubbw/icons/blob/main/CONTRIBUTING.md

Provides the base React/TypeScript template for creating a new animated icon component. Developers should replace placeholders like `[YourIconName]` and insert SVG path elements from Lucide icons, along with custom animation logic.

```tsx
'use client';

import { useAnimation } from 'motion/react';
import type { HTMLAttributes } from 'react';
import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
import { cn } from '@/lib/utils';

export interface [YourIconName]IconHandle {
  startAnimation: () => void;
  stopAnimation: () => void;
}

interface [YourIconName]IconProps extends HTMLAttributes<HTMLDivElement> {
  size?: number;
}

const [YourIconName]Icon = forwardRef<[YourIconName]IconHandle, [YourIconName]IconProps>(
  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
    const controls = useAnimation();
    const isControlledRef = useRef(false);

    useImperativeHandle(ref, () => {
      isControlledRef.current = true;
      return {
        startAnimation: () => controls.start('animate'),
        stopAnimation: () => controls.start('normal'),
      };
    });

    const handleMouseEnter = useCallback(
      (e: React.MouseEvent<HTMLDivElement>) => {
        if (!isControlledRef.current) {
          controls.start('animate');
        } else {
          onMouseEnter?.(e);
        }
      },
      [controls, onMouseEnter]
    );

    const handleMouseLeave = useCallback(
      (e: React.MouseEvent<HTMLDivElement>) => {
        if (!isControlledRef.current) {
          controls.start('normal');
        } else {
          onMouseLeave?.(e);
        }
      },
      [controls, onMouseLeave]
    );

    return (
      <div
        className={cn(className)}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        {...props}
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width={size}
          height={size}
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          {/* your svg code here */}
        </svg>
      </div>
    );
  }
);

[YourIconName]Icon.displayName = '[YourIconName]Icon';

export { [YourIconName]Icon };
```

--------------------------------

### Add Icon to Global List (React/TypeScript)

Source: https://github.com/pqoqubbw/icons/blob/main/CONTRIBUTING.md

Adds the new icon's metadata, including its name, component reference, and relevant keywords, to the `ICON_LIST` array in `icons/index.tsx`. This step registers the icon for use within the application.

```tsx
{
  name: '[icon-name]',
  icon: [YourIconName]Icon,
  keywords: ['keyword1', 'keyword2', 'keyword3'],
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.