@buildpackapp/micheal-icons-icons v1.0.2

@buildpackapp/micheal-icons

Social Media Icons Pack

🚀 Installation

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

📦 Usage

1. Import the CSS:

import '@buildpackapp/micheal-icons/icons.css';
// or
import '@buildpackapp/micheal-icons/icons.min.css';

2. Use icons in your 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:

/* 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:

<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:

<!-- 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:

<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
• GitHub
• Issues

📄 License

MIT © 2025 BuildPack