iconpackage.src.vaadin-icon.js Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of vaadin-webcomponents Show documentation

Mvnpm composite: Vaadin webcomponents

The newest version!

/**
 * @license
 * Copyright (c) 2021 - 2024 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
import './vaadin-iconset.js';
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { IconMixin } from './vaadin-icon-mixin.js';
import { iconStyles } from './vaadin-icon-styles.js';

registerStyles('vaadin-icon', iconStyles, { moduleId: 'vaadin-icon-styles' });

/**
 * `` is a Web Component for displaying SVG icons.
 *
 * ### Icon property
 *
 * The `` component is designed to be used as a drop-in replacement for ``.
 * For example, you can use it with `vaadin-icons` like this:
 *
 * ```html
 * 
 * ```
 *
 * Alternatively, you can also pick one of the Lumo icons:
 *
 * ```html
 * 
 * ```
 *
 * ### Custom SVG icon
 *
 * Alternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`
 * literal using the [`svg`](#/elements/vaadin-icon#property-svg) property. In this case you can also
 * define the size of the SVG `viewBox` using the [`size`](#/elements/vaadin-icon#property-size) property:
 *
 * ```js
 * import { html, svg } from 'lit';
 *
 * // in your component
 * render() {
 *   const svgIcon = svg``;
 *   return html`
 *     
 *   `;
 * }
 * ```
 *
 * @customElement
 * @extends HTMLElement
 * @mixes IconMixin
 * @mixes ControllerMixin
 * @mixes ThemableMixin
 * @mixes ElementMixin
 */
class Icon extends IconMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))) {
  static get template() {
    return html`
      

      
    `;
  }

  static get is() {
    return 'vaadin-icon';
  }
}

defineCustomElement(Icon);

export { Icon };