@vaadin/icon 24.8.0-alpha8 → 25.0.0-alpha1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -23
- package/package.json +7 -8
- package/src/vaadin-icon-font-size-mixin.js +2 -4
- package/src/vaadin-icon.d.ts +1 -2
- package/src/vaadin-icon.js +24 -21
- package/web-types.json +5 -5
- package/web-types.lit.json +4 -4
- package/src/vaadin-lit-icon.d.ts +0 -6
- package/src/vaadin-lit-icon.js +0 -62
- package/theme/lumo/vaadin-lit-icon.d.ts +0 -2
- package/theme/lumo/vaadin-lit-icon.js +0 -2
- package/theme/material/vaadin-icon-styles.d.ts +0 -1
- package/theme/material/vaadin-icon-styles.js +0 -12
- package/theme/material/vaadin-icon.d.ts +0 -2
- package/theme/material/vaadin-icon.js +0 -2
- package/theme/material/vaadin-lit-icon.d.ts +0 -2
- package/theme/material/vaadin-lit-icon.js +0 -2
- package/vaadin-lit-icon.d.ts +0 -1
- package/vaadin-lit-icon.js +0 -3
package/README.md
CHANGED
|
@@ -24,29 +24,6 @@ Once installed, import the component in your application:
|
|
|
24
24
|
import '@vaadin/icon';
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
-
## Themes
|
|
28
|
-
|
|
29
|
-
Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
|
|
30
|
-
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/icon/vaadin-icon.js) of the package uses the Lumo theme.
|
|
31
|
-
|
|
32
|
-
To use the Material theme, import the component from the `theme/material` folder:
|
|
33
|
-
|
|
34
|
-
```js
|
|
35
|
-
import '@vaadin/icon/theme/material/vaadin-icon.js';
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
You can also import the Lumo version of the component explicitly:
|
|
39
|
-
|
|
40
|
-
```js
|
|
41
|
-
import '@vaadin/icon/theme/lumo/vaadin-icon.js';
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
|
|
45
|
-
|
|
46
|
-
```js
|
|
47
|
-
import '@vaadin/icon/src/vaadin-icon.js';
|
|
48
|
-
```
|
|
49
|
-
|
|
50
27
|
## Contributing
|
|
51
28
|
|
|
52
29
|
Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/icon",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "25.0.0-alpha1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,15 +35,14 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@
|
|
39
|
-
"@vaadin/
|
|
40
|
-
"@vaadin/vaadin-
|
|
41
|
-
"@vaadin/vaadin-themable-mixin": "24.8.0-alpha8",
|
|
38
|
+
"@vaadin/component-base": "25.0.0-alpha1",
|
|
39
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha1",
|
|
40
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha1",
|
|
42
41
|
"lit": "^3.0.0"
|
|
43
42
|
},
|
|
44
43
|
"devDependencies": {
|
|
45
|
-
"@vaadin/chai-plugins": "
|
|
46
|
-
"@vaadin/test-runner-commands": "
|
|
44
|
+
"@vaadin/chai-plugins": "25.0.0-alpha1",
|
|
45
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha1",
|
|
47
46
|
"@vaadin/testing-helpers": "^1.1.0",
|
|
48
47
|
"sinon": "^18.0.0"
|
|
49
48
|
},
|
|
@@ -51,5 +50,5 @@
|
|
|
51
50
|
"web-types.json",
|
|
52
51
|
"web-types.lit.json"
|
|
53
52
|
],
|
|
54
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
|
|
55
54
|
}
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
|
|
7
6
|
import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
|
|
8
7
|
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
9
8
|
import { needsFontIconSizingFallback } from './vaadin-icon-helpers.js';
|
|
@@ -29,7 +28,7 @@ if (usesFontIconSizingFallback) {
|
|
|
29
28
|
*
|
|
30
29
|
* @polymerMixin
|
|
31
30
|
*/
|
|
32
|
-
export const IconFontSizeMixin =
|
|
31
|
+
export const IconFontSizeMixin = (superclass) =>
|
|
33
32
|
!usesFontIconSizingFallback
|
|
34
33
|
? superclass
|
|
35
34
|
: class extends ResizeMixin(superclass) {
|
|
@@ -72,5 +71,4 @@ export const IconFontSizeMixin = dedupingMixin((superclass) =>
|
|
|
72
71
|
this.style.setProperty('--_vaadin-font-icon-size', `${fontIconSize}px`);
|
|
73
72
|
}
|
|
74
73
|
}
|
|
75
|
-
}
|
|
76
|
-
);
|
|
74
|
+
};
|
package/src/vaadin-icon.d.ts
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
7
6
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
8
7
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
9
8
|
import { IconMixin } from './vaadin-icon-mixin.js';
|
|
@@ -47,7 +46,7 @@ import { IconMixin } from './vaadin-icon-mixin.js';
|
|
|
47
46
|
* }
|
|
48
47
|
* ```
|
|
49
48
|
*/
|
|
50
|
-
declare class Icon extends ThemableMixin(ElementMixin(
|
|
49
|
+
declare class Icon extends ThemableMixin(ElementMixin(IconMixin(HTMLElement))) {}
|
|
51
50
|
|
|
52
51
|
declare global {
|
|
53
52
|
interface HTMLElementTagNameMap {
|
package/src/vaadin-icon.js
CHANGED
|
@@ -4,16 +4,15 @@
|
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import './vaadin-iconset.js';
|
|
7
|
-
import { html,
|
|
8
|
-
import {
|
|
7
|
+
import { html, LitElement } from 'lit';
|
|
8
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
9
9
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
10
10
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
11
|
-
import {
|
|
11
|
+
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
12
|
+
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
12
13
|
import { IconMixin } from './vaadin-icon-mixin.js';
|
|
13
14
|
import { iconStyles } from './vaadin-icon-styles.js';
|
|
14
15
|
|
|
15
|
-
registerStyles('vaadin-icon', iconStyles, { moduleId: 'vaadin-icon-styles' });
|
|
16
|
-
|
|
17
16
|
/**
|
|
18
17
|
* `<vaadin-icon>` is a Web Component for displaying SVG icons.
|
|
19
18
|
*
|
|
@@ -56,39 +55,43 @@ registerStyles('vaadin-icon', iconStyles, { moduleId: 'vaadin-icon-styles' });
|
|
|
56
55
|
* @customElement
|
|
57
56
|
* @extends HTMLElement
|
|
58
57
|
* @mixes IconMixin
|
|
59
|
-
* @mixes ControllerMixin
|
|
60
58
|
* @mixes ThemableMixin
|
|
61
59
|
* @mixes ElementMixin
|
|
62
60
|
*/
|
|
63
|
-
class Icon extends IconMixin(
|
|
64
|
-
static get
|
|
61
|
+
class Icon extends IconMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
|
|
62
|
+
static get is() {
|
|
63
|
+
return 'vaadin-icon';
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
static get styles() {
|
|
67
|
+
return iconStyles;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/** @protected */
|
|
71
|
+
render() {
|
|
65
72
|
return html`
|
|
66
73
|
<svg
|
|
67
74
|
version="1.1"
|
|
68
75
|
xmlns="http://www.w3.org/2000/svg"
|
|
69
76
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
70
|
-
viewBox="
|
|
71
|
-
preserveAspectRatio="
|
|
72
|
-
fill
|
|
73
|
-
stroke
|
|
74
|
-
stroke-width
|
|
75
|
-
stroke-linecap
|
|
76
|
-
stroke-linejoin
|
|
77
|
+
viewBox="${this.__computeViewBox(this.size, this.__viewBox)}"
|
|
78
|
+
preserveAspectRatio="${this.__computePAR(this.__defaultPAR, this.__preserveAspectRatio)}"
|
|
79
|
+
fill="${ifDefined(this.__fill)}"
|
|
80
|
+
stroke="${ifDefined(this.__stroke)}"
|
|
81
|
+
stroke-width="${ifDefined(this.__strokeWidth)}"
|
|
82
|
+
stroke-linecap="${ifDefined(this.__strokeLinecap)}"
|
|
83
|
+
stroke-linejoin="${ifDefined(this.__strokeLinejoin)}"
|
|
77
84
|
aria-hidden="true"
|
|
78
85
|
>
|
|
79
86
|
<g id="svg-group"></g>
|
|
80
|
-
<g id="use-group" visibility
|
|
81
|
-
<use href
|
|
87
|
+
<g id="use-group" visibility="${this.__computeVisibility(this.__useRef, this.svg)}">
|
|
88
|
+
<use href="${this.__useRef}" />
|
|
82
89
|
</g>
|
|
83
90
|
</svg>
|
|
84
91
|
|
|
85
92
|
<slot name="tooltip"></slot>
|
|
86
93
|
`;
|
|
87
94
|
}
|
|
88
|
-
|
|
89
|
-
static get is() {
|
|
90
|
-
return 'vaadin-icon';
|
|
91
|
-
}
|
|
92
95
|
}
|
|
93
96
|
|
|
94
97
|
defineCustomElement(Icon);
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/icon",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "25.0.0-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"properties": [
|
|
27
27
|
{
|
|
28
28
|
"name": "name",
|
|
29
|
-
"description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/
|
|
29
|
+
"description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
|
|
30
30
|
"value": {
|
|
31
31
|
"type": [
|
|
32
32
|
"string"
|
|
@@ -48,11 +48,11 @@
|
|
|
48
48
|
},
|
|
49
49
|
{
|
|
50
50
|
"name": "vaadin-icon",
|
|
51
|
-
"description": "`<vaadin-icon>` is a Web Component for displaying SVG icons.\n\n### Icon property\n\nThe `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.\nFor example, you can use it with `vaadin-icons` like this:\n\n```html\n<vaadin-icon icon=\"vaadin:angle-down\"></vaadin-icon>\n```\n\nAlternatively, you can also pick one of the Lumo icons:\n\n```html\n<vaadin-icon icon=\"lumo:user\"></vaadin-icon>\n```\n\n### Custom SVG icon\n\nAlternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`\nliteral using the [`svg`](https://cdn.vaadin.com/vaadin-web-components/
|
|
51
|
+
"description": "`<vaadin-icon>` is a Web Component for displaying SVG icons.\n\n### Icon property\n\nThe `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.\nFor example, you can use it with `vaadin-icons` like this:\n\n```html\n<vaadin-icon icon=\"vaadin:angle-down\"></vaadin-icon>\n```\n\nAlternatively, you can also pick one of the Lumo icons:\n\n```html\n<vaadin-icon icon=\"lumo:user\"></vaadin-icon>\n```\n\n### Custom SVG icon\n\nAlternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`\nliteral using the [`svg`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-icon#property-svg) property. In this case you can also\ndefine the size of the SVG `viewBox` using the [`size`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-icon#property-size) property:\n\n```js\nimport { html, svg } from 'lit';\n\n// in your component\nrender() {\n const svgIcon = svg`<path d=\"M13 4v2l-5 5-5-5v-2l5 5z\"></path>`;\n return html`\n <vaadin-icon\n .svg=\"${svgIcon}\"\n size=\"16\"\n ></vaadin-icon>\n `;\n}\n```",
|
|
52
52
|
"attributes": [
|
|
53
53
|
{
|
|
54
54
|
"name": "icon",
|
|
55
|
-
"description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/
|
|
55
|
+
"description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
56
56
|
"value": {
|
|
57
57
|
"type": [
|
|
58
58
|
"string"
|
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
"properties": [
|
|
141
141
|
{
|
|
142
142
|
"name": "icon",
|
|
143
|
-
"description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/
|
|
143
|
+
"description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
144
144
|
"value": {
|
|
145
145
|
"type": [
|
|
146
146
|
"string"
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/icon",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "25.0.0-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
23
23
|
"name": ".name",
|
|
24
|
-
"description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/
|
|
24
|
+
"description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
|
|
25
25
|
"value": {
|
|
26
26
|
"kind": "expression"
|
|
27
27
|
}
|
|
@@ -37,12 +37,12 @@
|
|
|
37
37
|
},
|
|
38
38
|
{
|
|
39
39
|
"name": "vaadin-icon",
|
|
40
|
-
"description": "`<vaadin-icon>` is a Web Component for displaying SVG icons.\n\n### Icon property\n\nThe `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.\nFor example, you can use it with `vaadin-icons` like this:\n\n```html\n<vaadin-icon icon=\"vaadin:angle-down\"></vaadin-icon>\n```\n\nAlternatively, you can also pick one of the Lumo icons:\n\n```html\n<vaadin-icon icon=\"lumo:user\"></vaadin-icon>\n```\n\n### Custom SVG icon\n\nAlternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`\nliteral using the [`svg`](https://cdn.vaadin.com/vaadin-web-components/
|
|
40
|
+
"description": "`<vaadin-icon>` is a Web Component for displaying SVG icons.\n\n### Icon property\n\nThe `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.\nFor example, you can use it with `vaadin-icons` like this:\n\n```html\n<vaadin-icon icon=\"vaadin:angle-down\"></vaadin-icon>\n```\n\nAlternatively, you can also pick one of the Lumo icons:\n\n```html\n<vaadin-icon icon=\"lumo:user\"></vaadin-icon>\n```\n\n### Custom SVG icon\n\nAlternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`\nliteral using the [`svg`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-icon#property-svg) property. In this case you can also\ndefine the size of the SVG `viewBox` using the [`size`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-icon#property-size) property:\n\n```js\nimport { html, svg } from 'lit';\n\n// in your component\nrender() {\n const svgIcon = svg`<path d=\"M13 4v2l-5 5-5-5v-2l5 5z\"></path>`;\n return html`\n <vaadin-icon\n .svg=\"${svgIcon}\"\n size=\"16\"\n ></vaadin-icon>\n `;\n}\n```",
|
|
41
41
|
"extension": true,
|
|
42
42
|
"attributes": [
|
|
43
43
|
{
|
|
44
44
|
"name": ".icon",
|
|
45
|
-
"description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/
|
|
45
|
+
"description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
46
46
|
"value": {
|
|
47
47
|
"kind": "expression"
|
|
48
48
|
}
|
package/src/vaadin-lit-icon.d.ts
DELETED
package/src/vaadin-lit-icon.js
DELETED
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import './vaadin-iconset.js';
|
|
7
|
-
import { html, LitElement } from 'lit';
|
|
8
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
9
|
-
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
10
|
-
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
11
|
-
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
12
|
-
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
13
|
-
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
14
|
-
import { IconMixin } from './vaadin-icon-mixin.js';
|
|
15
|
-
import { iconStyles } from './vaadin-icon-styles.js';
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* LitElement based version of `<vaadin-icon>` web component.
|
|
19
|
-
*
|
|
20
|
-
* ## Disclaimer
|
|
21
|
-
*
|
|
22
|
-
* This component is an experiment not intended for publishing to npm.
|
|
23
|
-
* There is no ETA regarding specific Vaadin version where it'll land.
|
|
24
|
-
* Feel free to try this code in your apps as per Apache 2.0 license.
|
|
25
|
-
*/
|
|
26
|
-
class Icon extends IconMixin(ControllerMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement))))) {
|
|
27
|
-
static styles = iconStyles;
|
|
28
|
-
|
|
29
|
-
/** @protected */
|
|
30
|
-
render() {
|
|
31
|
-
return html`
|
|
32
|
-
<svg
|
|
33
|
-
version="1.1"
|
|
34
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
35
|
-
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
36
|
-
viewBox="${this.__computeViewBox(this.size, this.__viewBox)}"
|
|
37
|
-
preserveAspectRatio="${this.__computePAR(this.__defaultPAR, this.__preserveAspectRatio)}"
|
|
38
|
-
fill="${ifDefined(this.__fill)}"
|
|
39
|
-
stroke="${ifDefined(this.__stroke)}"
|
|
40
|
-
stroke-width="${ifDefined(this.__strokeWidth)}"
|
|
41
|
-
stroke-linecap="${ifDefined(this.__strokeLinecap)}"
|
|
42
|
-
stroke-linejoin="${ifDefined(this.__strokeLinejoin)}"
|
|
43
|
-
aria-hidden="true"
|
|
44
|
-
>
|
|
45
|
-
<g id="svg-group"></g>
|
|
46
|
-
<g id="use-group" visibility="${this.__computeVisibility(this.__useRef, this.svg)}">
|
|
47
|
-
<use href="${this.__useRef}" />
|
|
48
|
-
</g>
|
|
49
|
-
</svg>
|
|
50
|
-
|
|
51
|
-
<slot name="tooltip"></slot>
|
|
52
|
-
`;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
static get is() {
|
|
56
|
-
return 'vaadin-icon';
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
defineCustomElement(Icon);
|
|
61
|
-
|
|
62
|
-
export { Icon };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/vaadin-lit-icon.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './vaadin-icon.js';
|
package/vaadin-lit-icon.js
DELETED