UNPKG

@buildpackapp/micheal-icons-icons

Version:
102 lines (75 loc) 2.07 kB
# @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