icons

This package contains some useful icons and a style declaration to customize the size and the icon color.

Installation

npm install @dile/icons 

Usage

Import the icon you need:

import { infoIcon } from '@dile/icons';

Use the icon in a Lit template:

render() {
  return html`
    // Your component template
    ${ infoIcon }
  `;
}

Manage icon styles

To create the icon styles easily you may use the CSS declaration provided in this package.

import { iconStyles } from '@dile/icons';

Then, you can use the style declaration in your Lit component:

static get styles() {
  return [iconStyles, css`
    :host {
        --dile-icon-color: #fce;
      }
  `];
}

Using icons with dile-icon component

This icons library works well with the dile-icon component.

When you use <dile-icon> you will have configured the icon custom properties and styles to the icon box, in order to fit your icons in a better way.

import { calendarIcon } from '@dile/icons';
import '@dile/dile-icon/dile-icon.js';

html`<dile-icon icon=${calendarIcon}</dile-icon>`;

See dile-icon docs for more information.

CSS Custom Properties

You can customize it using CSS Custom Properties.

Custom property	Description	Default
--dile-icon-size	Icon size	24px
--dile-icon-color	Icon color	#888

Icons included