React Tool Icons 📦

A modern, optimized collection of SVG icons for React applications, featuring tech stack, blockchain, and social media icons.

Features

• Optimized SVG Icons: Pre-processed and optimized for performance
• TypeScript Support: Full type definitions included
• Tree-Shakeable: Import only what you need
• Customizable: Control size, color, and other SVG properties
• Three Main Categories:
  • Tech Stack Icons (React, Node.js, etc.)
  • Blockchain Icons (Bitcoin, Ethereum, etc.)
  • Social Media Icons

Installation

# Using npm
npm install react-tool-icons

# Using yarn
yarn add react-tool-icons

# Using pnpm (recommended)
pnpm add react-tool-icons

Usage

Basic Usage

import { TechReactIcon, ChainBitcoinIcon, SocialTwitterIcon } from 'react-tool-icons';

function App() {
  return (
    <div>
      <TechReactIcon size={32} color="#61DAFB" />
      <ChainBitcoinIcon size={32} color="#F7931A" />
      <SocialTwitterIcon size={32} color="#1DA1F2" />
    </div>
  );
}

Props

| Prop | Type | Default | Description | | --------- | -------------------- | -------------- | ---------------------------- | | size | number | 32 | Width and height of the icon | | color | string | "currentColor" | Color of the icon | | className | string | undefined | Additional CSS classes | | ...props | SVGProps | - | Any valid SVG props |

Categories

Tech Stack Icons

import { TechReactIcon, TechNodeIcon, TechPythonIcon } from 'react-tool-icons';

Blockchain Icons

import { ChainBitcoinIcon, ChainEthereumIcon } from 'react-tool-icons';

Social Media Icons

import { SocialTwitterIcon, SocialGithubIcon } from 'react-tool-icons';

Custom Styling

// Using className
<TechReactIcon className="custom-class" size={48} />

// Using inline style
<TechReactIcon style={{ margin: '10px' }} color="blue" />

Developer Guide

Setup Development Environment

# Clone the repository
git clone https://github.com/AdityaKumar41/react-tool-icons.git
cd react-tool-icons

# Install dependencies
pnpm install

Project Structure

react-tool-icons/
├── src/
│   ├── components/     # Icon components
│   ├── types/         # TypeScript type definitions
│   └── utils/         # Utility functions
├── scripts/           # Build and automation scripts
├── tests/            # Test files
└── examples/         # Usage examples

Available Scripts

# Start development server
pnpm dev

# Build the library
pnpm build

# Run tests
pnpm test

# Run linting
pnpm lint

# Generate types
pnpm types

Adding New Icons

1. Place your SVG file in src/assets/{category}/ directory
2. Run the icon generation script:

   pnpm generate-icons

3. The script will:
   • Optimize the SVG
   • Create a React component
   • Add TypeScript types
   • Update the exports

Code Style

• We use TypeScript for type safety
• Follow the React TypeScript Cheatsheet
• Use functional components with hooks
• Follow ESLint and Prettier configurations

Testing

• Write tests for new components using React Testing Library
• Ensure all tests pass before submitting PR
• Maintain test coverage above 80%

Browser Support

• Chrome (Latest)
• Firefox (Latest)
• Safari (Latest)
• Edge (Latest)

Contributing

Contributions are welcome! Please see our Contributing Guidelines.

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

License

MIT © Aditya Moharana

Contributors

• Aditya Moharana
• Yash Rana
• Toshak Parmar

Support

• Issues
• Discussions