1.0.2 • Published 1 year ago
@buildpackapp/testing-icons-icons v1.0.2
@buildpackapp/testing-icons
**@buildpackapp/testing-icons** provides a collection of optimized SVG icons, delivered as CSS classes, for easy use in web projects.
## 🚀 Installation
Install the package via npm:
```bash
npm install @buildpackapp/testing-icons --save
```
## 🚀 Usage
### 1. Import the CSS
- **JavaScript/TypeScript (ES Modules):**
```javascript
import '@buildpackapp/testing-icons/icons.css'; // Standard CSS
// or
import '@buildpackapp/testing-icons/icons.min.css'; // Minified CSS
```
- **HTML:**
```html
<link href="node_modules/@buildpackapp/testing-icons/icons.css" rel="stylesheet">
```
### 2. Apply Icons in HTML
Use the icon classes directly in your HTML or JSX:
```html
<i class="bp-home"></i>
<i class="bp-user bp-icon-lg"></i>
```
## 🌐 Framework Integrations
### React
```jsx
import '@buildpackapp/testing-icons/icons.css';
function App() {
return <i className="bp-home" />;
}
```
### Vue
```js
<script>
import '@buildpackapp/testing-icons/icons.css';
</script>
<template>
<i class="bp-home"></i>
</template>
```
### Next.js
```javascript
// Import CSS in _app.js
import '@buildpackapp/testing-icons/icons.css';
```
## 📏 Icon Sizing
Use predefined classes to adjust icon sizes:
- `bp-icon-sm`: 16px
- `bp-icon-lg`: 32px
## 🌍 Right-to-Left (RTL) Support
Icons will automatically flip when placed in RTL environments by setting `dir="rtl"` on a parent element.
## 📑 Available Icons
- `bp-instagram`bp-home🛠️ Contribution
Found an issue or want to contribute? Please check out our GitHub repository.
📄 License
Licensed under the MIT license.
1.0.2
1 year ago