@vaadin/icon 25.2.0-alpha1 → 25.2.0-alpha11
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/package.json +8 -8
- package/src/vaadin-icon-font-size-mixin.js +0 -2
- package/src/vaadin-icon-mixin.d.ts +1 -1
- package/src/vaadin-icon-mixin.js +0 -8
- package/src/vaadin-icon.js +0 -3
- package/src/vaadin-iconset-mixin.d.ts +1 -1
- package/src/vaadin-iconset-mixin.js +1 -4
- package/src/vaadin-iconset.js +0 -1
- package/web-types.json +61 -95
- package/web-types.lit.json +24 -24
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/icon",
|
|
3
|
-
"version": "25.2.0-
|
|
3
|
+
"version": "25.2.0-alpha11",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,16 +35,16 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/component-base": "25.2.0-
|
|
39
|
-
"@vaadin/vaadin-themable-mixin": "25.2.0-
|
|
38
|
+
"@vaadin/component-base": "25.2.0-alpha11",
|
|
39
|
+
"@vaadin/vaadin-themable-mixin": "25.2.0-alpha11",
|
|
40
40
|
"lit": "^3.0.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@vaadin/aura": "25.2.0-
|
|
44
|
-
"@vaadin/chai-plugins": "25.2.0-
|
|
45
|
-
"@vaadin/test-runner-commands": "25.2.0-
|
|
43
|
+
"@vaadin/aura": "25.2.0-alpha11",
|
|
44
|
+
"@vaadin/chai-plugins": "25.2.0-alpha11",
|
|
45
|
+
"@vaadin/test-runner-commands": "25.2.0-alpha11",
|
|
46
46
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
47
|
-
"@vaadin/vaadin-lumo-styles": "25.2.0-
|
|
47
|
+
"@vaadin/vaadin-lumo-styles": "25.2.0-alpha11",
|
|
48
48
|
"sinon": "^21.0.2"
|
|
49
49
|
},
|
|
50
50
|
"customElements": "custom-elements.json",
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"web-types.json",
|
|
53
53
|
"web-types.lit.json"
|
|
54
54
|
],
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "fdc37e932709f95491a027aeb2090911cb7528c6"
|
|
56
56
|
}
|
|
@@ -15,8 +15,6 @@ const usesFontIconSizingFallback = needsFontIconSizingFallback();
|
|
|
15
15
|
* recent versions, but there's an regression in Safari 26, which caused the same issue to happen when the icon is
|
|
16
16
|
* attached to an element with shadow root.
|
|
17
17
|
* The mixin does nothing if the browser supports CSS Container Query units for pseudo elements.
|
|
18
|
-
*
|
|
19
|
-
* @polymerMixin
|
|
20
18
|
*/
|
|
21
19
|
export const IconFontSizeMixin = (superclass) =>
|
|
22
20
|
!usesFontIconSizingFallback
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c)
|
|
3
|
+
* Copyright (c) 2021 - 2026 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import type { Constructor } from '@open-wc/dedupe-mixin';
|
package/src/vaadin-icon-mixin.js
CHANGED
|
@@ -11,10 +11,6 @@ const srcCache = new Map();
|
|
|
11
11
|
|
|
12
12
|
const Iconset = customElements.get('vaadin-iconset');
|
|
13
13
|
|
|
14
|
-
/**
|
|
15
|
-
* @polymerMixin
|
|
16
|
-
* @mixes IconFontSizeMixin
|
|
17
|
-
*/
|
|
18
14
|
export const IconMixin = (superClass) =>
|
|
19
15
|
class extends IconFontSizeMixin(superClass) {
|
|
20
16
|
static get properties() {
|
|
@@ -53,7 +49,6 @@ export const IconMixin = (superClass) =>
|
|
|
53
49
|
* inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.
|
|
54
50
|
* - a string in the format `data:image/svg+xml,<svg>...</svg>`. You may need to use the `encodeURIComponent`
|
|
55
51
|
* function for the SVG content passed
|
|
56
|
-
*
|
|
57
52
|
*/
|
|
58
53
|
src: {
|
|
59
54
|
type: String,
|
|
@@ -63,7 +58,6 @@ export const IconMixin = (superClass) =>
|
|
|
63
58
|
/**
|
|
64
59
|
* The symbol identifier that references an ID of an element contained in the SVG element assigned to the
|
|
65
60
|
* `src` property
|
|
66
|
-
*
|
|
67
61
|
*/
|
|
68
62
|
symbol: {
|
|
69
63
|
type: String,
|
|
@@ -87,7 +81,6 @@ export const IconMixin = (superClass) =>
|
|
|
87
81
|
* A hexadecimal code point that specifies a glyph from an icon font.
|
|
88
82
|
*
|
|
89
83
|
* Example: "e001"
|
|
90
|
-
*
|
|
91
84
|
*/
|
|
92
85
|
char: {
|
|
93
86
|
type: String,
|
|
@@ -98,7 +91,6 @@ export const IconMixin = (superClass) =>
|
|
|
98
91
|
* A ligature name that specifies an icon from an icon font with support for ligatures.
|
|
99
92
|
*
|
|
100
93
|
* Example: "home".
|
|
101
|
-
*
|
|
102
94
|
*/
|
|
103
95
|
ligature: {
|
|
104
96
|
type: String,
|
package/src/vaadin-icon.js
CHANGED
|
@@ -74,9 +74,6 @@ import { ensureSvgLiteral } from './vaadin-icon-svg.js';
|
|
|
74
74
|
*
|
|
75
75
|
* @customElement vaadin-icon
|
|
76
76
|
* @extends HTMLElement
|
|
77
|
-
* @mixes IconMixin
|
|
78
|
-
* @mixes ThemableMixin
|
|
79
|
-
* @mixes ElementMixin
|
|
80
77
|
*/
|
|
81
78
|
class Icon extends IconMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
|
82
79
|
static get is() {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c)
|
|
3
|
+
* Copyright (c) 2021 - 2026 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
@@ -31,9 +31,6 @@ function initIconsMap(iconset, name) {
|
|
|
31
31
|
}, {});
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
/**
|
|
35
|
-
* @polymerMixin
|
|
36
|
-
*/
|
|
37
34
|
export const IconsetMixin = (superClass) =>
|
|
38
35
|
class extends superClass {
|
|
39
36
|
static get observedAttributes() {
|
|
@@ -135,7 +132,7 @@ export const IconsetMixin = (superClass) =>
|
|
|
135
132
|
get size() {
|
|
136
133
|
// Use default property value as a fallback here instead of the constructor
|
|
137
134
|
// to not override an instance property in the lazy upgrade scenario below.
|
|
138
|
-
return this.__size
|
|
135
|
+
return this.__size ?? 24;
|
|
139
136
|
}
|
|
140
137
|
|
|
141
138
|
/**
|
package/src/vaadin-iconset.js
CHANGED
package/web-types.json
CHANGED
|
@@ -1,63 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/icon",
|
|
4
|
-
"version": "25.2.0-
|
|
4
|
+
"version": "25.2.0-alpha11",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
|
-
{
|
|
10
|
-
"name": "vaadin-iconset",
|
|
11
|
-
"description": "`<vaadin-iconset>` is a Web Component for creating SVG icon collections.",
|
|
12
|
-
"attributes": [
|
|
13
|
-
{
|
|
14
|
-
"name": "theme",
|
|
15
|
-
"description": "The theme variants to apply to the component.",
|
|
16
|
-
"value": {
|
|
17
|
-
"type": [
|
|
18
|
-
"string",
|
|
19
|
-
"null",
|
|
20
|
-
"undefined"
|
|
21
|
-
]
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
],
|
|
25
|
-
"js": {
|
|
26
|
-
"properties": [
|
|
27
|
-
{
|
|
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/25.2.0-alpha1/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
|
|
30
|
-
"value": {
|
|
31
|
-
"type": [
|
|
32
|
-
"string"
|
|
33
|
-
]
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
"name": "size",
|
|
38
|
-
"description": "The size of an individual icon. Note that icons must be square.\n\nWhen using `vaadin-icon`, the size of the iconset will take precedence\nover the size defined by the user to ensure correct appearance.",
|
|
39
|
-
"value": {
|
|
40
|
-
"type": [
|
|
41
|
-
"number"
|
|
42
|
-
]
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
],
|
|
46
|
-
"events": []
|
|
47
|
-
}
|
|
48
|
-
},
|
|
49
9
|
{
|
|
50
10
|
"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/25.2.0-
|
|
11
|
+
"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.2.0-alpha11/#/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.2.0-alpha11/#/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```\n\n### Styling\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property | Description\n-----------------------------|-------------\n`--vaadin-icon-size` | Size (width and height) of the icon\n`--vaadin-icon-stroke-width` | Stroke width of the SVG icon\n`--vaadin-icon-visual-size` | Visual size of the icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`has-tooltip` | Set when the icon has a slotted tooltip\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
52
12
|
"attributes": [
|
|
53
13
|
{
|
|
54
14
|
"name": "char",
|
|
55
15
|
"description": "A hexadecimal code point that specifies a glyph from an icon font.\n\nExample: \"e001\"",
|
|
56
16
|
"value": {
|
|
57
17
|
"type": [
|
|
58
|
-
"string"
|
|
59
|
-
"null",
|
|
60
|
-
"undefined"
|
|
18
|
+
"string"
|
|
61
19
|
]
|
|
62
20
|
}
|
|
63
21
|
},
|
|
@@ -66,20 +24,16 @@
|
|
|
66
24
|
"description": "The font family to use for the font icon.",
|
|
67
25
|
"value": {
|
|
68
26
|
"type": [
|
|
69
|
-
"string"
|
|
70
|
-
"null",
|
|
71
|
-
"undefined"
|
|
27
|
+
"string"
|
|
72
28
|
]
|
|
73
29
|
}
|
|
74
30
|
},
|
|
75
31
|
{
|
|
76
32
|
"name": "icon",
|
|
77
|
-
"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.2.0-
|
|
33
|
+
"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.2.0-alpha11/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
78
34
|
"value": {
|
|
79
35
|
"type": [
|
|
80
|
-
"string"
|
|
81
|
-
"null",
|
|
82
|
-
"undefined"
|
|
36
|
+
"string"
|
|
83
37
|
]
|
|
84
38
|
}
|
|
85
39
|
},
|
|
@@ -88,9 +42,7 @@
|
|
|
88
42
|
"description": "Class names defining an icon font and/or a specific glyph inside an icon font.\n\nExample: \"fa-solid fa-user\"",
|
|
89
43
|
"value": {
|
|
90
44
|
"type": [
|
|
91
|
-
"string"
|
|
92
|
-
"null",
|
|
93
|
-
"undefined"
|
|
45
|
+
"string"
|
|
94
46
|
]
|
|
95
47
|
}
|
|
96
48
|
},
|
|
@@ -99,9 +51,7 @@
|
|
|
99
51
|
"description": "A ligature name that specifies an icon from an icon font with support for ligatures.\n\nExample: \"home\".",
|
|
100
52
|
"value": {
|
|
101
53
|
"type": [
|
|
102
|
-
"string"
|
|
103
|
-
"null",
|
|
104
|
-
"undefined"
|
|
54
|
+
"string"
|
|
105
55
|
]
|
|
106
56
|
}
|
|
107
57
|
},
|
|
@@ -110,9 +60,7 @@
|
|
|
110
60
|
"description": "The size of an icon, used to set the `viewBox` attribute.",
|
|
111
61
|
"value": {
|
|
112
62
|
"type": [
|
|
113
|
-
"number"
|
|
114
|
-
"null",
|
|
115
|
-
"undefined"
|
|
63
|
+
"number"
|
|
116
64
|
]
|
|
117
65
|
}
|
|
118
66
|
},
|
|
@@ -121,9 +69,7 @@
|
|
|
121
69
|
"description": "The SVG source to be loaded as the icon. It can be:\n- an URL to a file containing the icon\n- an URL in the format `/path/to/file.svg#objectID`, where the `objectID` refers to an ID attribute contained\n inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.\n- a string in the format `data:image/svg+xml,<svg>...</svg>`. You may need to use the `encodeURIComponent`\n function for the SVG content passed",
|
|
122
70
|
"value": {
|
|
123
71
|
"type": [
|
|
124
|
-
"string"
|
|
125
|
-
"null",
|
|
126
|
-
"undefined"
|
|
72
|
+
"string"
|
|
127
73
|
]
|
|
128
74
|
}
|
|
129
75
|
},
|
|
@@ -132,9 +78,7 @@
|
|
|
132
78
|
"description": "The symbol identifier that references an ID of an element contained in the SVG element assigned to the\n`src` property",
|
|
133
79
|
"value": {
|
|
134
80
|
"type": [
|
|
135
|
-
"string"
|
|
136
|
-
"null",
|
|
137
|
-
"undefined"
|
|
81
|
+
"string"
|
|
138
82
|
]
|
|
139
83
|
}
|
|
140
84
|
},
|
|
@@ -157,9 +101,7 @@
|
|
|
157
101
|
"description": "A hexadecimal code point that specifies a glyph from an icon font.\n\nExample: \"e001\"",
|
|
158
102
|
"value": {
|
|
159
103
|
"type": [
|
|
160
|
-
"string"
|
|
161
|
-
"null",
|
|
162
|
-
"undefined"
|
|
104
|
+
"string"
|
|
163
105
|
]
|
|
164
106
|
}
|
|
165
107
|
},
|
|
@@ -168,20 +110,16 @@
|
|
|
168
110
|
"description": "The font family to use for the font icon.",
|
|
169
111
|
"value": {
|
|
170
112
|
"type": [
|
|
171
|
-
"string"
|
|
172
|
-
"null",
|
|
173
|
-
"undefined"
|
|
113
|
+
"string"
|
|
174
114
|
]
|
|
175
115
|
}
|
|
176
116
|
},
|
|
177
117
|
{
|
|
178
118
|
"name": "icon",
|
|
179
|
-
"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.2.0-
|
|
119
|
+
"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.2.0-alpha11/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
180
120
|
"value": {
|
|
181
121
|
"type": [
|
|
182
|
-
"string"
|
|
183
|
-
"null",
|
|
184
|
-
"undefined"
|
|
122
|
+
"string"
|
|
185
123
|
]
|
|
186
124
|
}
|
|
187
125
|
},
|
|
@@ -190,9 +128,7 @@
|
|
|
190
128
|
"description": "Class names defining an icon font and/or a specific glyph inside an icon font.\n\nExample: \"fa-solid fa-user\"",
|
|
191
129
|
"value": {
|
|
192
130
|
"type": [
|
|
193
|
-
"string"
|
|
194
|
-
"null",
|
|
195
|
-
"undefined"
|
|
131
|
+
"string"
|
|
196
132
|
]
|
|
197
133
|
}
|
|
198
134
|
},
|
|
@@ -201,9 +137,7 @@
|
|
|
201
137
|
"description": "A ligature name that specifies an icon from an icon font with support for ligatures.\n\nExample: \"home\".",
|
|
202
138
|
"value": {
|
|
203
139
|
"type": [
|
|
204
|
-
"string"
|
|
205
|
-
"null",
|
|
206
|
-
"undefined"
|
|
140
|
+
"string"
|
|
207
141
|
]
|
|
208
142
|
}
|
|
209
143
|
},
|
|
@@ -212,9 +146,7 @@
|
|
|
212
146
|
"description": "The size of an icon, used to set the `viewBox` attribute.",
|
|
213
147
|
"value": {
|
|
214
148
|
"type": [
|
|
215
|
-
"number"
|
|
216
|
-
"null",
|
|
217
|
-
"undefined"
|
|
149
|
+
"number"
|
|
218
150
|
]
|
|
219
151
|
}
|
|
220
152
|
},
|
|
@@ -223,9 +155,7 @@
|
|
|
223
155
|
"description": "The SVG source to be loaded as the icon. It can be:\n- an URL to a file containing the icon\n- an URL in the format `/path/to/file.svg#objectID`, where the `objectID` refers to an ID attribute contained\n inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.\n- a string in the format `data:image/svg+xml,<svg>...</svg>`. You may need to use the `encodeURIComponent`\n function for the SVG content passed",
|
|
224
156
|
"value": {
|
|
225
157
|
"type": [
|
|
226
|
-
"string"
|
|
227
|
-
"null",
|
|
228
|
-
"undefined"
|
|
158
|
+
"string"
|
|
229
159
|
]
|
|
230
160
|
}
|
|
231
161
|
},
|
|
@@ -234,9 +164,7 @@
|
|
|
234
164
|
"description": "The SVG icon wrapped in a Lit template literal.",
|
|
235
165
|
"value": {
|
|
236
166
|
"type": [
|
|
237
|
-
"
|
|
238
|
-
"null",
|
|
239
|
-
"undefined"
|
|
167
|
+
"object"
|
|
240
168
|
]
|
|
241
169
|
}
|
|
242
170
|
},
|
|
@@ -245,9 +173,47 @@
|
|
|
245
173
|
"description": "The symbol identifier that references an ID of an element contained in the SVG element assigned to the\n`src` property",
|
|
246
174
|
"value": {
|
|
247
175
|
"type": [
|
|
248
|
-
"string"
|
|
249
|
-
|
|
250
|
-
|
|
176
|
+
"string"
|
|
177
|
+
]
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
],
|
|
181
|
+
"events": []
|
|
182
|
+
}
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
"name": "vaadin-iconset",
|
|
186
|
+
"description": "`<vaadin-iconset>` is a Web Component for creating SVG icon collections.",
|
|
187
|
+
"attributes": [
|
|
188
|
+
{
|
|
189
|
+
"name": "theme",
|
|
190
|
+
"description": "The theme variants to apply to the component.",
|
|
191
|
+
"value": {
|
|
192
|
+
"type": [
|
|
193
|
+
"string",
|
|
194
|
+
"null",
|
|
195
|
+
"undefined"
|
|
196
|
+
]
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
],
|
|
200
|
+
"js": {
|
|
201
|
+
"properties": [
|
|
202
|
+
{
|
|
203
|
+
"name": "name",
|
|
204
|
+
"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.2.0-alpha11/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
|
|
205
|
+
"value": {
|
|
206
|
+
"type": [
|
|
207
|
+
"string"
|
|
208
|
+
]
|
|
209
|
+
}
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
"name": "size",
|
|
213
|
+
"description": "The size of an individual icon. Note that icons must be square.\n\nWhen using `vaadin-icon`, the size of the iconset will take precedence\nover the size defined by the user to ensure correct appearance.",
|
|
214
|
+
"value": {
|
|
215
|
+
"type": [
|
|
216
|
+
"number"
|
|
251
217
|
]
|
|
252
218
|
}
|
|
253
219
|
}
|
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": "25.2.0-
|
|
4
|
+
"version": "25.2.0-alpha11",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -14,30 +14,9 @@
|
|
|
14
14
|
"contributions": {
|
|
15
15
|
"html": {
|
|
16
16
|
"elements": [
|
|
17
|
-
{
|
|
18
|
-
"name": "vaadin-iconset",
|
|
19
|
-
"description": "`<vaadin-iconset>` is a Web Component for creating SVG icon collections.",
|
|
20
|
-
"extension": true,
|
|
21
|
-
"attributes": [
|
|
22
|
-
{
|
|
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/25.2.0-alpha1/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
|
|
25
|
-
"value": {
|
|
26
|
-
"kind": "expression"
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
"name": ".size",
|
|
31
|
-
"description": "The size of an individual icon. Note that icons must be square.\n\nWhen using `vaadin-icon`, the size of the iconset will take precedence\nover the size defined by the user to ensure correct appearance.",
|
|
32
|
-
"value": {
|
|
33
|
-
"kind": "expression"
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
]
|
|
37
|
-
},
|
|
38
17
|
{
|
|
39
18
|
"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/25.2.0-
|
|
19
|
+
"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.2.0-alpha11/#/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.2.0-alpha11/#/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```\n\n### Styling\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property | Description\n-----------------------------|-------------\n`--vaadin-icon-size` | Size (width and height) of the icon\n`--vaadin-icon-stroke-width` | Stroke width of the SVG icon\n`--vaadin-icon-visual-size` | Visual size of the icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`has-tooltip` | Set when the icon has a slotted tooltip\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
41
20
|
"extension": true,
|
|
42
21
|
"attributes": [
|
|
43
22
|
{
|
|
@@ -56,7 +35,7 @@
|
|
|
56
35
|
},
|
|
57
36
|
{
|
|
58
37
|
"name": ".icon",
|
|
59
|
-
"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.2.0-
|
|
38
|
+
"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.2.0-alpha11/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
60
39
|
"value": {
|
|
61
40
|
"kind": "expression"
|
|
62
41
|
}
|
|
@@ -104,6 +83,27 @@
|
|
|
104
83
|
}
|
|
105
84
|
}
|
|
106
85
|
]
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"name": "vaadin-iconset",
|
|
89
|
+
"description": "`<vaadin-iconset>` is a Web Component for creating SVG icon collections.",
|
|
90
|
+
"extension": true,
|
|
91
|
+
"attributes": [
|
|
92
|
+
{
|
|
93
|
+
"name": ".name",
|
|
94
|
+
"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.2.0-alpha11/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
|
|
95
|
+
"value": {
|
|
96
|
+
"kind": "expression"
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"name": ".size",
|
|
101
|
+
"description": "The size of an individual icon. Note that icons must be square.\n\nWhen using `vaadin-icon`, the size of the iconset will take precedence\nover the size defined by the user to ensure correct appearance.",
|
|
102
|
+
"value": {
|
|
103
|
+
"kind": "expression"
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
]
|
|
107
107
|
}
|
|
108
108
|
]
|
|
109
109
|
}
|