React Skills Icons
A flexible React component library for displaying programming and technology skill icons, built on top of react-icons.
Features
- 100+ technology and skill icons
- Based on react-icons library
- Support for custom icons
- Customizable size and colors
- Optional labels
- TypeScript support
- Built-in Tailwind CSS support
Installation
npm install react-skills-icons
Usage
import { SkillIcon } from 'react-skills-icons';
// Basic usage
<SkillIcon name="react" />
// With custom size
<SkillIcon name="javascript" size={32} />
// With custom color
<SkillIcon name="typescript" color="#3178C6" />
// With custom icon from react-icons
```bash
npm install react-icons
import { FaCode } from 'react-icons/fa';
<SkillIcon name="custom" customIcon={FaCode} />
// With label
<SkillIcon name="python" showLabel={true} />
// With custom label styling
<SkillIcon
name="nodejs"
showLabel={true}
textSize="lg"
labelClassName="font-bold"
/>
Props
Prop | Type | Default | Description |
---|---|---|---|
name | string | - | The name of the icon to display |
size | number | 24 | Size of the icon in pixels |
color | string | - | Color of the icon (hex, rgb, etc.) |
customIcon | IconType | - | Custom react-icons component |
showLabel | boolean | true | Whether to show the icon label |
labelClassName | string | - | Additional classes for the label |
className | string | - | Additional classes for the icon wrapper |
textSize | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'xs' | Size of the label text |
Custom Icons
The library is built on top of react-icons, which means you can:
- Use any icon from the react-icons library as a custom icon
- Maintain consistency with the built-in icons
- Get the same styling and customization options
Example with custom icon:
import { FaCode } from 'react-icons/fa';
// Use a custom icon from react-icons
<SkillIcon
name="custom-skill"
customIcon={FaCode}
size={32}
color="#ff0000"
showLabel={true}
/>
Available Icons
The library includes icons for popular technologies including:
- Programming Languages (JavaScript, TypeScript, Python, etc.)
- Frontend Frameworks (React, Vue, Angular, etc.)
- Backend Technologies (Node.js, Django, etc.)
- Databases (PostgreSQL, MongoDB, etc.)
- Cloud Services (AWS, Azure, GCP, etc.)
- And many more!
For a complete list of available icons, check out our Storybook documentation.
Documentation
For full documentation and interactive examples, visit our Storybook documentation.
Development
# Install dependencies
npm install
# Run tests
npm test
# Run Storybook
npm run storybook
# Build the library
npm run build
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
MIT © Gal Kremer