1.0.2 • Published 1 year ago

@buildpackapp/testing-icons-icons v1.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

@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