@buildpackapp/stefan-icons-icons v1.0.2

@buildpackapp/stefan-icons

Social Media Icons Pack

🚀 Installation

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

📦 Usage

1. Import the CSS:

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

2. Use icons in your HTML:

<!-- Default size (24px) -->
<i class="bp-home"></i>

<!-- Available sizes -->
<i class="bp-home bp-icon-sm"></i>  <!-- 16px -->
<i class="bp-home bp-icon-lg"></i>  <!-- 32px -->

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

🎨 Customizing Icons

These are regular icons that use strokes. Customize them using color:

/* Change icon color */
.bp-home {
    color: #FF0000;  /* Red icon */
}

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

📏 Sizing Options

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

🌍 RTL Support

Icons automatically flip in RTL layouts:

<div dir="rtl">
    <i class="bp-arrow-left"></i>  <!-- Automatically flips -->
</div>

📑 Available Icons

• bp-user
• bp-instagram
• bp-home

🔗 Links

• BuildPack Website
• GitHub
• Issues

📄 License

MIT © 2025 BuildPack