afro-react-icons/readme.md

A professional React icon pack inspired by African culture and design, featuring tribal symbols, kente patterns, drums, masks, and more.

# Afro React Icons

A professional React icon pack inspired by African culture and design, featuring beautiful SVG icons including tribal symbols, kente patterns, drums, masks, and more.

## Features

- 🎨 **5 Unique Icons** - Carefully designed African-inspired icons
- ⚛️ **React Components** - Each icon is a React functional component
- 🎯 **TypeScript Ready** - Full TypeScript support
- 📦 **Tree Shakeable** - Import only the icons you need
- 🎨 **Customizable** - Easily customize size, color, and other props
- 📱 **Responsive** - Scalable SVG icons that work on all screen sizes

## Installation

```bash
npm install afro-react-icons
```

or

```bash
yarn add afro-react-icons
```

## Usage

### Basic Usage

```jsx
import React from 'react';
import { GyeNyame, AfricanMask, DjembeDrum } from 'afro-react-icons';

function App() {
  return (
    <div>
      <GyeNyame size={24} color="#000" />
      <AfricanMask size={32} color="#8B4513" />
      <DjembeDrum size={48} color="#D2691E" />
    </div>
  );
}

export default App;
```

### TypeScript Usage

```tsx
import React from 'react';
import { GyeNyame, AfricanMask, DjembeDrum, IconProps } from 'afro-react-icons';

interface MyComponentProps {
  iconSize: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ iconSize }) => {
  return (
    <div>
      <GyeNyame size={iconSize} color="#000" />
      <AfricanMask size={iconSize} color="#8B4513" />
      <DjembeDrum size={iconSize} color="#D2691E" />
    </div>
  );
};

export default MyComponent;
```

### Individual Imports

```jsx
import GyeNyame from 'afro-react-icons/icons/GyeNyame';
import AfricanMask from 'afro-react-icons/icons/AfricanMask';
```

### Props

All icons accept the following props:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `number` | `24` | Size of the icon in pixels |
| `color` | `string` | `'currentColor'` | Color of the icon |
| `...props` | `SVGProps` | `{}` | Any additional SVG props |

## Available Icons

### GyeNyame
The Adinkra symbol meaning "except for God" - represents the supremacy of God.

```jsx
<GyeNyame size={24} color="#000" />
```

### AfricanMask
A stylized representation of traditional African masks used in ceremonies and rituals.

```jsx
<AfricanMask size={24} color="#8B4513" />
```

### DjembeDrum
The iconic West African goblet drum, central to African music and culture.

```jsx
<DjembeDrum size={24} color="#D2691E" />
```

### KentePattern
Inspired by the geometric patterns of traditional Kente cloth from Ghana.

```jsx
<KentePattern size={24} color="#FFD700" />
```

### BaobabTree
The majestic African baobab tree, known as the "Tree of Life."

```jsx
<BaobabTree size={24} color="#228B22" />
```

## Styling Examples

### Custom Colors

```jsx
<GyeNyame size={32} color="#FF6B35" />
<AfricanMask size={32} color="#8B4513" />
<DjembeDrum size={32} color="#D2691E" />
```

### Using CSS Classes

```jsx
<GyeNyame className="my-icon-class" />
```

```css
.my-icon-class {
  color: #FF6B35;
  width: 2rem;
  height: 2rem;
}
```

### Responsive Icons

```jsx
<GyeNyame 
  size={24} 
  style={{ 
    width: '100%', 
    height: 'auto', 
    maxWidth: '48px' 
  }} 
/>
```

## Cultural Significance

This icon pack celebrates the rich cultural heritage of Africa:

- **Gye Nyame**: An Adinkra symbol from Ghana representing the omnipotence of God
- **African Masks**: Sacred objects used in traditional ceremonies across Africa
- **Djembe Drum**: A goblet-shaped drum from West Africa, central to community gatherings
- **Kente Patterns**: Traditional woven cloth patterns from Ghana with deep symbolic meaning
- **Baobab Tree**: The iconic African tree, revered across the continent as a symbol of life

## Contributing

We welcome contributions! Please feel free to submit issues and pull requests.

## License

MIT © Omoike Benjamin

## Support

If you find this package useful, please consider giving it a star on GitHub!

---

Made with ❤️ for the African diaspora and lovers of African culture worldwide.




## Premium Offer

Elevate your web and mobile applications with Afro React Icons – a meticulously crafted, premium icon pack that celebrates the rich tapestry of African culture and modern digital life. Designed for developers and designers who demand both aesthetic excellence and cultural authenticity.

### What You'll Get:

Your purchase includes 5 striking, African-inspired icons, each provided in both JavaScript (.js) and TypeScript (.tsx) formats:

1.  AfroSun ☀️: A radiant sun with patterns inspired by African textiles.
2.  TribalMask 🎭: A minimalist, geometric African mask design.
3.  TalkingDrum 🥁: A sleek representation of the traditional West African communication drum.
4.  AfricanLeaf 🍃: A stylized leaf adorned with subtle cultural motifs.
5.  KenteGrid ⬜: A bold, geometric pattern inspired by the iconic Kente cloth.

Plus:

*   Comprehensive `README.md` with detailed usage instructions and examples.
*   An interactive `demo.html` file to visually showcase all icons in your browser.
*   `package.json` configured for easy publishing to NPM.

[Purchase the Premium Pack Here](https://iconafro.gumroad.com/l/rkhui)