@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

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

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

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

Using the TypeIcon helper function (for Lit templates)

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.

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

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

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

Using the TypeIconOpen helper function (for Lit templates)

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.

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

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

License

This package is licensed under the Apache-2.0 License.