npm package: @rhavenside/baseline-icons
Description: Icon font library from the Baseline Design System - lightweight and framework-agnostic
Author: rhavenside
Latest version: 1.0.0

# Baseline Icons

<div align="center">
  <img src="https://examples.rhavenside.de/logo.svg" alt="Baseline Logo" width="64" height="64">
</div>

A comprehensive icon font library with 2,000+ icons - extracted from the Baseline Design System as a standalone, lightweight package.

[![npm version](https://img.shields.io/npm/v/@rhavenside/baseline-icons.svg)](https://www.npmjs.com/package/@rhavenside/baseline-icons)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## Features

✓ **2,000+ Icons** - Comprehensive collection of high-quality vector icons  
✓ **Lightweight** - Only ~500KB for the complete icon font  
✓ **Framework Agnostic** - Works with any framework or plain HTML/CSS  
✓ **Easy to Use** - Simple class-based system  
✓ **Customizable** - Easily change size, color, and style with CSS  
✓ **Multiple Formats** - WOFF2 and WOFF font formats for broad browser support  

## Installation

### Via npm

```bash
npm install @rhavenside/baseline-icons
```

### Via CDN

```html
<link rel="stylesheet" href="https://unpkg.com/@rhavenside/baseline-icons/dist/baseline-icons.css">
```

Or minified version:

```html
<link rel="stylesheet" href="https://unpkg.com/@rhavenside/baseline-icons/dist/baseline-icons.min.css">
```

## Usage

### Basic HTML

After including the CSS file, use icons with the `bl` and `bl-{icon-name}` classes:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="node_modules/@rhavenside/baseline-icons/dist/baseline-icons.css">
  <title>Baseline Icons Example</title>
</head>
<body>
  <i class="bl bl-heart-fill"></i>
  <i class="bl bl-star"></i>
  <i class="bl bl-github"></i>
  <i class="bl bl-search"></i>
</body>
</html>
```

### With JavaScript/Module Bundlers

Import the CSS file in your JavaScript:

```javascript
// ES6 Import
import '@rhavenside/baseline-icons/css'

// CommonJS
require('@rhavenside/baseline-icons/css')
```

Or use with React, Vue, Angular, etc.:

```jsx
// React Example
import '@rhavenside/baseline-icons/css'

function MyComponent() {
  return (
    <div>
      <i className="bl bl-heart-fill"></i>
      <i className="bl bl-star"></i>
    </div>
  )
}
```

### With SCSS

Import the SCSS source file for more customization options:

```scss
// Import SCSS source
@import '~@rhavenside/baseline-icons/scss';

// Or customize variables before importing
$baseline-icons-font-dir: '../fonts';
@import '~@rhavenside/baseline-icons/src/baseline-icons.scss';
```

## Styling Icons

Icons inherit the text color and can be styled with CSS:

```html
<!-- Size with font-size -->
<i class="bl bl-heart" style="font-size: 24px;"></i>
<i class="bl bl-heart" style="font-size: 32px;"></i>
<i class="bl bl-heart" style="font-size: 48px;"></i>

<!-- Color with color property -->
<i class="bl bl-heart-fill" style="color: red;"></i>
<i class="bl bl-star-fill" style="color: gold;"></i>
<i class="bl bl-github" style="color: #333;"></i>
```

Or with CSS classes:

```css
.icon-large {
  font-size: 48px;
}

.icon-primary {
  color: #0066cc;
}

.icon-danger {
  color: #dc3545;
}
```

```html
<i class="bl bl-heart-fill icon-large icon-danger"></i>
```

## Icon Categories

The Baseline Icons library includes icons in the following categories:

- **UI & Interface** - Arrows, chevrons, carets, navigation
- **Actions** - Edit, delete, save, download, upload
- **Communication** - Mail, chat, phone, notifications
- **Media** - Play, pause, stop, volume, camera
- **Files & Folders** - Documents, folders, file types
- **Social Media** - Facebook, Twitter, Instagram, GitHub, LinkedIn
- **E-commerce** - Cart, bag, credit card, wallet
- **Weather** - Sun, cloud, rain, snow, storm
- **Technology** - Devices, hardware, code, terminal
- **Business** - Building, briefcase, calendar, clock
- **Shapes & Symbols** - Geometric shapes, mathematical symbols
- **And many more...**

## Popular Icons

Here are some of the most commonly used icons:

```html
<!-- Navigation -->
<i class="bl bl-arrow-left"></i>
<i class="bl bl-arrow-right"></i>
<i class="bl bl-chevron-down"></i>
<i class="bl bl-house"></i>

<!-- Actions -->
<i class="bl bl-search"></i>
<i class="bl bl-pencil"></i>
<i class="bl bl-trash"></i>
<i class="bl bl-check"></i>
<i class="bl bl-x"></i>

<!-- Communication -->
<i class="bl bl-envelope"></i>
<i class="bl bl-bell"></i>
<i class="bl bl-chat"></i>
<i class="bl bl-telephone"></i>

<!-- Media -->
<i class="bl bl-play-fill"></i>
<i class="bl bl-pause-fill"></i>
<i class="bl bl-camera"></i>
<i class="bl bl-image"></i>

<!-- Social -->
<i class="bl bl-github"></i>
<i class="bl bl-twitter"></i>
<i class="bl bl-facebook"></i>
<i class="bl bl-linkedin"></i>

<!-- UI Elements -->
<i class="bl bl-heart-fill"></i>
<i class="bl bl-star-fill"></i>
<i class="bl bl-gear"></i>
<i class="bl bl-three-dots"></i>
```

## Icon Naming Convention

Icons follow a clear naming pattern:

- **Base icon**: `bl-{name}` (e.g., `bl-heart`)
- **Filled variant**: `bl-{name}-fill` (e.g., `bl-heart-fill`)
- **Directional**: `bl-arrow-{direction}` (e.g., `bl-arrow-left`)
- **Size variants**: `bl-{name}-{size}` (e.g., `bl-dash-lg`)
- **Style variants**: `bl-{name}-{style}` (e.g., `bl-circle-fill`)

## Browser Support

Baseline Icons supports all modern browsers:

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Opera (latest)

Font formats:
- **WOFF2** - Modern browsers (recommended)
- **WOFF** - Fallback for older browsers

## Package Contents

```
@rhavenside/baseline-icons/
├── dist/
│   ├── baseline-icons.css        # Expanded CSS (with source map comment)
│   ├── baseline-icons.min.css    # Minified CSS (production ready)
│   └── fonts/
│       ├── baseline-icons.woff   # Icon font (WOFF format)
│       └── baseline-icons.woff2  # Icon font (WOFF2 format)
├── src/
│   └── baseline-icons.scss       # SCSS source file
└── README.md
```

## Advanced Usage

### Custom Font Path

If you need to customize the font file path, you can override the SCSS variable:

```scss
$baseline-icons-font-dir: '/custom/path/to/fonts';
@import '~@rhavenside/baseline-icons/src/baseline-icons.scss';
```

### Using with CSS Variables

You can create reusable icon sizes and colors with CSS variables:

```css
:root {
  --icon-size-sm: 16px;
  --icon-size-md: 24px;
  --icon-size-lg: 32px;
  --icon-color-primary: #0066cc;
  --icon-color-danger: #dc3545;
}

.bl {
  font-size: var(--icon-size-md);
}

.bl.icon-sm { font-size: var(--icon-size-sm); }
.bl.icon-lg { font-size: var(--icon-size-lg); }
.bl.text-primary { color: var(--icon-color-primary); }
.bl.text-danger { color: var(--icon-color-danger); }
```

## Building from Source

If you want to build the CSS from the SCSS source:

```bash
# Clone the repository or install via npm
npm install @rhavenside/baseline-icons

# Build CSS
npm run build

# Build minified CSS only
npm run build:minify
```

## Related Packages

Baseline Icons is part of the Baseline Design System ecosystem:

- **[@rhavenside/baseline](https://www.npmjs.com/package/@rhavenside/baseline)** - Complete design system with components, icons, and utilities
- **[@rhavenside/scaffold](https://www.npmjs.com/package/@rhavenside/scaffold)** - Layout system for structured page layouts
- **[@rhavenside/cadence](https://www.npmjs.com/package/@rhavenside/cadence)** - Motion system for consistent animations



---

Built with ❤️ by rhavenside