# IcoMoon Icon Integration

This directory contains the IcoMoon icon font system for the Esqyre Rental Library.

## Setup Instructions

### 1. Export from IcoMoon

1. Go to [IcoMoon App](https://icomoon.io/app/)
2. Select or upload your icons
3. Click "Generate Font"
4. Click "Download" to get the font package

### 2. Extract and Copy Files

After downloading the IcoMoon package, extract it and copy the following files:

**Font Files** → Copy to `src/lib/styles/fonts/`:
- `fonts/icomoon.eot` (if included)
- `fonts/icomoon.ttf`
- `fonts/icomoon.woff` (or `fonts/icomoon.woff2` if available)
- `fonts/icomoon.svg` (if included)

**CSS Content** → Copy the CSS content to `src/lib/styles/icons/_icomoon.scss`:
- Open `style.css` from the IcoMoon package (in the downloaded zip)
- Copy the `@font-face` declaration and all icon class definitions
- Replace the content in `_icomoon.scss` with your IcoMoon CSS
- Update font paths from `fonts/` to `../fonts/` to match the directory structure

### 3. Update Font Paths

Make sure the font paths in `_icomoon.scss` are relative and point to the `../fonts/` directory:

```scss
@font-face {
  font-family: 'icomoon';
  src: url('../fonts/icomoon.eot?');
  src: url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
       url('../fonts/icomoon.ttf?') format('truetype'),
       url('../fonts/icomoon.woff?') format('woff'),
       url('../fonts/icomoon.svg?#icomoon') format('svg');
  // ...
}
```

### 4. Verify Integration

The IcoMoon styles are automatically imported in `src/lib/styles/index.scss`, so they will be available when you import the library styles.

## Usage

After integration, you can use icons in your components by adding the icon class names with the `esq-icon-` prefix:

```html
<!-- In your component templates -->
<i class="esq-icon-booking-icon"></i>
<i class="esq-icon-dashboard_icon_new"></i>
<i class="esq-icon-analytics-icon"></i>
```

The icon classes are defined in `_icomoon.scss` with the format:
```scss
.esq-icon-booking-icon:before {
  content: "\e91d";
  color: #87929a;
}
```

**Note:** All icons use the `esq-icon-` prefix to avoid conflicts and maintain consistency with the Esqyre design system.

## File Structure

```
src/lib/styles/
├── fonts/
│   ├── icomoon.eot
│   ├── icomoon.ttf
│   ├── icomoon.woff
│   └── icomoon.svg
└── icons/
    ├── _icomoon.scss      (Main SCSS file - used by the library)
    ├── selection.json     (IcoMoon selection file - for reloading in IcoMoon app, optional)
    └── README.md          (this file)
```

### File Locations Explained

- **`_icomoon.scss`** - This is the main file that gets imported. It contains all the icon definitions with corrected font paths.
- **`selection.json`** - This file allows you to reload your icon selection in the IcoMoon app for future edits. It's optional but recommended to keep it for maintenance purposes.
- **Font files** - All font files (`.eot`, `.ttf`, `.woff`, `.svg`) go in the `fonts/` directory.

## Build Process

The fonts are automatically copied to `dist/lib/styles/fonts/` during the build process via the `copy-styles.js` script. No additional configuration is needed.

## Notes

- Font paths are relative to the CSS file location
- The font files will be included in the library distribution
- Icons are available globally when the library styles are imported
- Use the icon class names as defined in your IcoMoon export

