@buildpackapp/micheal-icons-icons
Version:
Icon package
102 lines (75 loc) • 2.07 kB
Markdown
# @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