# @buildpackapp/micheal-icons

Social Media Icons Pack

## 🚀 Installation

```bash
npm install @buildpackapp/micheal-icons
# or
yarn add @buildpackapp/micheal-icons
```

## 📦 Usage

1. Import the CSS:
```javascript
import '@buildpackapp/micheal-icons/icons.css';
// or
import '@buildpackapp/micheal-icons/icons.min.css';
```

2. Use icons in your HTML:
```html
<!-- Basic usage -->
<i class="bp-regular bp-home"></i>

<!-- Class structure explained -->
<!-- bp-regular: Specifies the icon style -->
<!-- bp-{icon-name}: Identifies the specific icon -->

<!-- With size modifiers -->
<i class="bp-regular bp-home bp-icon-sm"></i>  <!-- 16px -->
<i class="bp-regular bp-home bp-icon-lg"></i>  <!-- 32px -->

<!-- Custom size -->
<i class="bp-regular bp-home bp-icon-custom" style="--bp-icon-size: 48px;"></i>
```

## 🎨 Customizing Icons


These are regular icons that use strokes. You can customize them in two ways:

1. Using CSS classes:
```css
/* Change icon color */
.bp-regular.bp-home {
    color: #FF0000;  /* Red icon */
}

/* Using currentColor (default) */
.my-component {
    color: blue;
}
.my-component .bp-regular.bp-home {
    /* Automatically inherits blue color */
}
```

2. Using inline styles:
```html
<i class="bp-regular bp-home" style="--icon-color: #FF0000;"></i>
```

## 📏 Sizing Options

- Default: 24x24px
- Small (`bp-icon-sm`): 16x16px
- Large (`bp-icon-lg`): 32px
- Custom: Use `bp-icon-custom` with `--bp-icon-size` CSS variable

Example:
```html
<!-- Custom size using CSS variable -->
<i class="bp-regular bp-home bp-icon-custom" style="--bp-icon-size: 48px;"></i>
```

## 🌍 RTL Support

Icons automatically flip in RTL layouts:
```html
<div dir="rtl">
    <i class="bp-regular bp-arrow-left"></i>  <!-- Automatically flips -->
</div>
```

## 📑 Available Icons

- `bp-user`
- `bp-instagram`
- `bp-home`

## 🔗 Links

- [BuildPack Website](https://buildpack.app)
- [GitHub](https://github.com/buildpackapp/buildpack)
- [Issues](https://github.com/buildpackapp/buildpack/issues)

## 📄 License

MIT © 2025 BuildPack