@vaadin/icon 25.1.0-beta1 → 25.1.0-beta3
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 +9 -9
- package/src/vaadin-icon-mixin.js +0 -7
- package/web-types.json +47 -19
- package/web-types.lit.json +4 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/icon",
|
|
3
|
-
"version": "25.1.0-
|
|
3
|
+
"version": "25.1.0-beta3",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,22 +35,22 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/component-base": "25.1.0-
|
|
39
|
-
"@vaadin/vaadin-themable-mixin": "25.1.0-
|
|
38
|
+
"@vaadin/component-base": "25.1.0-beta3",
|
|
39
|
+
"@vaadin/vaadin-themable-mixin": "25.1.0-beta3",
|
|
40
40
|
"lit": "^3.0.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@vaadin/aura": "25.1.0-
|
|
44
|
-
"@vaadin/chai-plugins": "25.1.0-
|
|
45
|
-
"@vaadin/test-runner-commands": "25.1.0-
|
|
43
|
+
"@vaadin/aura": "25.1.0-beta3",
|
|
44
|
+
"@vaadin/chai-plugins": "25.1.0-beta3",
|
|
45
|
+
"@vaadin/test-runner-commands": "25.1.0-beta3",
|
|
46
46
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
47
|
-
"@vaadin/vaadin-lumo-styles": "25.1.0-
|
|
48
|
-
"sinon": "^21.0.
|
|
47
|
+
"@vaadin/vaadin-lumo-styles": "25.1.0-beta3",
|
|
48
|
+
"sinon": "^21.0.2"
|
|
49
49
|
},
|
|
50
50
|
"customElements": "custom-elements.json",
|
|
51
51
|
"web-types": [
|
|
52
52
|
"web-types.json",
|
|
53
53
|
"web-types.lit.json"
|
|
54
54
|
],
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "4251850231a42298fda23b83928da588831cdb5d"
|
|
56
56
|
}
|
package/src/vaadin-icon-mixin.js
CHANGED
|
@@ -30,7 +30,6 @@ export const IconMixin = (superClass) =>
|
|
|
30
30
|
* See also [`name`](#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.
|
|
31
31
|
*
|
|
32
32
|
* @attr {string} icon
|
|
33
|
-
* @type {string}
|
|
34
33
|
*/
|
|
35
34
|
icon: {
|
|
36
35
|
type: String,
|
|
@@ -55,7 +54,6 @@ export const IconMixin = (superClass) =>
|
|
|
55
54
|
* - a string in the format `data:image/svg+xml,<svg>...</svg>`. You may need to use the `encodeURIComponent`
|
|
56
55
|
* function for the SVG content passed
|
|
57
56
|
*
|
|
58
|
-
* @type {string}
|
|
59
57
|
*/
|
|
60
58
|
src: {
|
|
61
59
|
type: String,
|
|
@@ -66,7 +64,6 @@ export const IconMixin = (superClass) =>
|
|
|
66
64
|
* The symbol identifier that references an ID of an element contained in the SVG element assigned to the
|
|
67
65
|
* `src` property
|
|
68
66
|
*
|
|
69
|
-
* @type {string}
|
|
70
67
|
*/
|
|
71
68
|
symbol: {
|
|
72
69
|
type: String,
|
|
@@ -79,7 +76,6 @@ export const IconMixin = (superClass) =>
|
|
|
79
76
|
* Example: "fa-solid fa-user"
|
|
80
77
|
*
|
|
81
78
|
* @attr {string} icon-class
|
|
82
|
-
* @type {string}
|
|
83
79
|
*/
|
|
84
80
|
iconClass: {
|
|
85
81
|
type: String,
|
|
@@ -92,7 +88,6 @@ export const IconMixin = (superClass) =>
|
|
|
92
88
|
*
|
|
93
89
|
* Example: "e001"
|
|
94
90
|
*
|
|
95
|
-
* @type {string}
|
|
96
91
|
*/
|
|
97
92
|
char: {
|
|
98
93
|
type: String,
|
|
@@ -104,7 +99,6 @@ export const IconMixin = (superClass) =>
|
|
|
104
99
|
*
|
|
105
100
|
* Example: "home".
|
|
106
101
|
*
|
|
107
|
-
* @type {string}
|
|
108
102
|
*/
|
|
109
103
|
ligature: {
|
|
110
104
|
type: String,
|
|
@@ -115,7 +109,6 @@ export const IconMixin = (superClass) =>
|
|
|
115
109
|
* The font family to use for the font icon.
|
|
116
110
|
*
|
|
117
111
|
* @attr {string} font-family
|
|
118
|
-
* @type {string}
|
|
119
112
|
*/
|
|
120
113
|
fontFamily: {
|
|
121
114
|
type: String,
|
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": "25.1.0-
|
|
4
|
+
"version": "25.1.0-beta3",
|
|
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/25.1.0-
|
|
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.1.0-beta3/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
|
|
30
30
|
"value": {
|
|
31
31
|
"type": [
|
|
32
32
|
"string"
|
|
@@ -48,14 +48,16 @@
|
|
|
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/25.1.0-
|
|
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.1.0-beta3/#/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.1.0-beta3/#/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
52
|
"attributes": [
|
|
53
53
|
{
|
|
54
54
|
"name": "char",
|
|
55
55
|
"description": "A hexadecimal code point that specifies a glyph from an icon font.\n\nExample: \"e001\"",
|
|
56
56
|
"value": {
|
|
57
57
|
"type": [
|
|
58
|
-
"string"
|
|
58
|
+
"string",
|
|
59
|
+
"null",
|
|
60
|
+
"undefined"
|
|
59
61
|
]
|
|
60
62
|
}
|
|
61
63
|
},
|
|
@@ -64,16 +66,20 @@
|
|
|
64
66
|
"description": "The font family to use for the font icon.",
|
|
65
67
|
"value": {
|
|
66
68
|
"type": [
|
|
67
|
-
"string"
|
|
69
|
+
"string",
|
|
70
|
+
"null",
|
|
71
|
+
"undefined"
|
|
68
72
|
]
|
|
69
73
|
}
|
|
70
74
|
},
|
|
71
75
|
{
|
|
72
76
|
"name": "icon",
|
|
73
|
-
"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.1.0-
|
|
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.1.0-beta3/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
74
78
|
"value": {
|
|
75
79
|
"type": [
|
|
76
|
-
"string"
|
|
80
|
+
"string",
|
|
81
|
+
"null",
|
|
82
|
+
"undefined"
|
|
77
83
|
]
|
|
78
84
|
}
|
|
79
85
|
},
|
|
@@ -82,7 +88,9 @@
|
|
|
82
88
|
"description": "Class names defining an icon font and/or a specific glyph inside an icon font.\n\nExample: \"fa-solid fa-user\"",
|
|
83
89
|
"value": {
|
|
84
90
|
"type": [
|
|
85
|
-
"string"
|
|
91
|
+
"string",
|
|
92
|
+
"null",
|
|
93
|
+
"undefined"
|
|
86
94
|
]
|
|
87
95
|
}
|
|
88
96
|
},
|
|
@@ -91,7 +99,9 @@
|
|
|
91
99
|
"description": "A ligature name that specifies an icon from an icon font with support for ligatures.\n\nExample: \"home\".",
|
|
92
100
|
"value": {
|
|
93
101
|
"type": [
|
|
94
|
-
"string"
|
|
102
|
+
"string",
|
|
103
|
+
"null",
|
|
104
|
+
"undefined"
|
|
95
105
|
]
|
|
96
106
|
}
|
|
97
107
|
},
|
|
@@ -111,7 +121,9 @@
|
|
|
111
121
|
"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",
|
|
112
122
|
"value": {
|
|
113
123
|
"type": [
|
|
114
|
-
"string"
|
|
124
|
+
"string",
|
|
125
|
+
"null",
|
|
126
|
+
"undefined"
|
|
115
127
|
]
|
|
116
128
|
}
|
|
117
129
|
},
|
|
@@ -120,7 +132,9 @@
|
|
|
120
132
|
"description": "The symbol identifier that references an ID of an element contained in the SVG element assigned to the\n`src` property",
|
|
121
133
|
"value": {
|
|
122
134
|
"type": [
|
|
123
|
-
"string"
|
|
135
|
+
"string",
|
|
136
|
+
"null",
|
|
137
|
+
"undefined"
|
|
124
138
|
]
|
|
125
139
|
}
|
|
126
140
|
},
|
|
@@ -143,7 +157,9 @@
|
|
|
143
157
|
"description": "A hexadecimal code point that specifies a glyph from an icon font.\n\nExample: \"e001\"",
|
|
144
158
|
"value": {
|
|
145
159
|
"type": [
|
|
146
|
-
"string"
|
|
160
|
+
"string",
|
|
161
|
+
"null",
|
|
162
|
+
"undefined"
|
|
147
163
|
]
|
|
148
164
|
}
|
|
149
165
|
},
|
|
@@ -152,16 +168,20 @@
|
|
|
152
168
|
"description": "The font family to use for the font icon.",
|
|
153
169
|
"value": {
|
|
154
170
|
"type": [
|
|
155
|
-
"string"
|
|
171
|
+
"string",
|
|
172
|
+
"null",
|
|
173
|
+
"undefined"
|
|
156
174
|
]
|
|
157
175
|
}
|
|
158
176
|
},
|
|
159
177
|
{
|
|
160
178
|
"name": "icon",
|
|
161
|
-
"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.1.0-
|
|
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.1.0-beta3/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
162
180
|
"value": {
|
|
163
181
|
"type": [
|
|
164
|
-
"string"
|
|
182
|
+
"string",
|
|
183
|
+
"null",
|
|
184
|
+
"undefined"
|
|
165
185
|
]
|
|
166
186
|
}
|
|
167
187
|
},
|
|
@@ -170,7 +190,9 @@
|
|
|
170
190
|
"description": "Class names defining an icon font and/or a specific glyph inside an icon font.\n\nExample: \"fa-solid fa-user\"",
|
|
171
191
|
"value": {
|
|
172
192
|
"type": [
|
|
173
|
-
"string"
|
|
193
|
+
"string",
|
|
194
|
+
"null",
|
|
195
|
+
"undefined"
|
|
174
196
|
]
|
|
175
197
|
}
|
|
176
198
|
},
|
|
@@ -179,7 +201,9 @@
|
|
|
179
201
|
"description": "A ligature name that specifies an icon from an icon font with support for ligatures.\n\nExample: \"home\".",
|
|
180
202
|
"value": {
|
|
181
203
|
"type": [
|
|
182
|
-
"string"
|
|
204
|
+
"string",
|
|
205
|
+
"null",
|
|
206
|
+
"undefined"
|
|
183
207
|
]
|
|
184
208
|
}
|
|
185
209
|
},
|
|
@@ -199,7 +223,9 @@
|
|
|
199
223
|
"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",
|
|
200
224
|
"value": {
|
|
201
225
|
"type": [
|
|
202
|
-
"string"
|
|
226
|
+
"string",
|
|
227
|
+
"null",
|
|
228
|
+
"undefined"
|
|
203
229
|
]
|
|
204
230
|
}
|
|
205
231
|
},
|
|
@@ -219,7 +245,9 @@
|
|
|
219
245
|
"description": "The symbol identifier that references an ID of an element contained in the SVG element assigned to the\n`src` property",
|
|
220
246
|
"value": {
|
|
221
247
|
"type": [
|
|
222
|
-
"string"
|
|
248
|
+
"string",
|
|
249
|
+
"null",
|
|
250
|
+
"undefined"
|
|
223
251
|
]
|
|
224
252
|
}
|
|
225
253
|
}
|
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.1.0-
|
|
4
|
+
"version": "25.1.0-beta3",
|
|
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/25.1.0-
|
|
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.1.0-beta3/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
|
|
25
25
|
"value": {
|
|
26
26
|
"kind": "expression"
|
|
27
27
|
}
|
|
@@ -37,7 +37,7 @@
|
|
|
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/25.1.0-
|
|
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.1.0-beta3/#/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.1.0-beta3/#/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
41
|
"extension": true,
|
|
42
42
|
"attributes": [
|
|
43
43
|
{
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
58
|
"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.1.0-
|
|
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.1.0-beta3/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
60
60
|
"value": {
|
|
61
61
|
"kind": "expression"
|
|
62
62
|
}
|