logo polydile dile-components


This package only contains two files to implement a simple close icon, to use in other web components: One SVG icon and a Lit Template to implement a that icon.

Now is better to use dile-icon together with icons because you will have more versatility, with more style customizations and many diferent icons to use in your components.


npm install @dile/dile-close-icon-template


import { closeIcon } from '@dile/dile-close-icon-template';

Yo may use this icon in a Lit template:

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

To easy style the icon you may use the CSS declaration provided in this package.

import { closeIcon, closeIconCss } from '@dile/dile-close-icon-template';

You may use this style declaration like this:

static get styles() {
  return [closeIconCss, css`
    :host {
        --dile-close-icon-template-color: #fce;

As you may note, there is a custom CSS property named --dile-close-icon-template-color. Use it to set the color of the icon.