dile-button-icon

Web Component to create a customized button with an icon.

Installation

npm i @dile/dile-button-icon

This component extends dile-button, so you can use the component in a similar way. The main diference is that the componente can display an icon.

Usage

Import the component.

import '@dile/dile-button-icon/dile-button-icon.js';

The icon is assigned via icon property.

html`<dile-button-icon .icon="${someIconHtmlTemplate}">Button Label</dile-button-icon>`

Usualy the provided icon will be a lit-html template, so, when you use it on a lit component is necesary to bind the property value using a dot in the component attribute.

Using a custom icon

You can customize the icon of the button using a template with your own svg. To do that its is posible to declare a lit-html template:

const appsIcon = html`<svg class="dile-icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>`;

Then, you can use the template created:

html`<dile-button-icon .icon="${appsIcon}">Button Label</dile-button-icon>`

Using a icons library

There are some icons in the @dile/icons package. So, you can use them easily in your components.

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

// Late, in render() method of the component
html`<dile-button-icon .icon="${closeIcon}">Button Label</dile-button-icon>`

Using an image

It is also possible to use any image or SVG you have binding a template with a <img> tag.

let imageIcon = html`<img src="./images/loto.png">`;
html`<dile-button-icon .icon=${imageIcon}>Yoga practice</dile-button-icon>`

Properties

Same as dile-button, but also:

• icon: Lit-html template with the content to display the icon

CSS Custom Properties

You can customize it using the same dile-button CSS Custom Properties but also:

dile-button-icon demos

Button icon demo

import { appsIcon } from "../../../packages/icons/index.js";

class MyComponent extends LitElement {
  static get styles() {
    return css`
      :host {
        --dile-icon-color: #fff;
      }
    `
  }

  render() {
    return html`
      <dile-button-icon .icon=${this.appsIcon}>Control Panel</dile-button-icon>
    `
  }

  firstUpdated() {
    // This should not be necessary but the component to show the demo does not work well with interpoplation of strings
    this.shadowRoot.querySelector('dile-button-icon').icon = appsIcon;
  }
}
customElements.define('my-component', MyComponent);
export const JsStory = () => html`<my-component></my-component>`;

Styled button icon

class OtherComponent extends LitElement {
  static get styles() {
    return css`
      .styled {
        --dile-button-border-color: #0f010f; 
        --dile-button-background-color: #ffffdd;
        --dile-button-hover-background-color: #f3d6e3;
        --dile-button-text-color:  #396; 
        --dile-button-hover-text-color:  #000; 
        --dile-button-font-weight: bold;
        --dile-button-font-size: 1.4rem;
        --dile-button-ring-color: #cc5099;
        --dile-button-ring-offset-width: 2px;
        --dile-button-border-radius: 3px;
        --dile-button-text-transform: uppercase;
        --dile-icon-color: #fff;
        --dile-icon-size: 32px;
      }
    `
  }

  render() {
    return html`
      <dile-button-icon class="styled" .icon=${this.icon}>Polydile</dile-button-icon>
    `
  }

  firstUpdated() {
    // This should not be necessary but the component to show the demo does not work well with interpoplation of strings
    this.shadowRoot.querySelector('dile-button-icon').icon = this.icon;
  }

  get icon() {
    return html`
    <img src="/images/logo-polydile.png" style="width: 40px;">
    `
  }
}
customElements.define('other-component', OtherComponent);
export const Js2Story = () => html`<other-component></other-component>`;