npm package: @outbook/webcomponents-type-icon
Description: Web components type-icon
Author: Antonio Rodríguez
Latest version: 1.1.4

# @outbook/webcomponents-type-icon

This package provides two web components for displaying icons: `outbook-type-icon` (using Shadow DOM) and `outbook-type-icon-open` (using Open DOM). Both components allow displaying icons either from a font-based icon set or from a provided list of SVG icons.

## Installation

```bash
npm install @outbook/webcomponents-type-icon
```

## Usage

This package provides two components for different use cases.

### `outbook-type-icon` (Shadow DOM)

This component encapsulates its styles within a Shadow DOM.

#### Direct HTML Usage

```javascript
import '@outbook/webcomponents-type-icon/shadow';
```

```html
<outbook-type-icon name="star" size="M"></outbook-type-icon>
```

#### Using the `TypeIcon` helper function (for Lit templates)

```javascript
import { html } from 'lit';
import { TypeIcon } from '@outbook/webcomponents-type-icon/shadow';

function render() {
  return html`
    ${TypeIcon({ icon: 'star', size: 'M' })}
  `;
}
```

#### Properties

| Property | Attribute | Type     | Description                                              |
| -------- | --------- | -------- |----------------------------------------------------------|
| `icon`   | `name`    | `String` | The name of the icon to display.                         |
| `size`   | `size`    | `String` | The size of the icon (e.g., 'XXS', 'XS', 'S', 'M', 'L', 'XL', 'XXL'). |
| `icons`  | -         | `Object` | A custom map of SVG icons to use instead of the default. |

#### Custom Icons

You can provide your own set of SVG icons by passing an object to the `icons` property. The object should have icon names as keys and SVG content as values.

```javascript
import { html } from 'lit';
import { TypeIcon } from '@outbook/webcomponents-type-icon/shadow';

const customIcons = {
  'custom-icon': `<svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>`
};

function render() {
  return html`
    ${TypeIcon({ icon: 'custom-icon', icons: customIcons, size: 'L' })}
  `;
}
```

#### Styling

This component uses Shadow DOM, and its styles are self-contained. The component's styles are automatically applied and encapsulated, so there is no need to import any additional stylesheets.

---

### `outbook-type-icon-open` (Open DOM)

This component does NOT use Shadow DOM, allowing its internal elements to be styled directly using global stylesheets.

#### Direct HTML Usage

```javascript
import '@outbook/webcomponents-type-icon/open';
```

```html
<outbook-type-icon-open name="star" size="M"></outbook-type-icon-open>
```

#### Using the `TypeIconOpen` helper function (for Lit templates)

```javascript
import { html } from 'lit';
import { TypeIconOpen } from '@outbook/webcomponents-type-icon/open';

function render() {
  return html`
    ${TypeIconOpen({ icon: 'star', size: 'M' })}
  `;
}
```

#### Properties

| Property | Attribute | Type     | Description                                              |
| -------- | --------- | -------- |----------------------------------------------------------|
| `icon`   | `name`    | `String` | The name of the icon to display.                         |
| `size`   | `size`    | `String` | The size of the icon (e.g., 'XXS', 'XS', 'S', 'M', 'L', 'XL', 'XXL'). |
| `icons`  | -         | `Object` | A custom map of SVG icons to use instead of the default. |

#### Styling

This component does not use Shadow DOM, so its internal elements can be styled directly using global stylesheets.

You need to include the component's SCSS file in your project's main stylesheet.

```scss
@use 'type-icon-open' as type-icon-open;

@include type-icon-open.style();
```

## License

This package is licensed under the Apache-2.0 License.