@vaadin/icon 24.2.0-alpha1 → 24.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 +6 -6
- package/src/vaadin-icon.d.ts +19 -1
- package/src/vaadin-icon.js +97 -2
- package/web-types.json +44 -12
- package/web-types.lit.json +18 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/icon",
|
|
3
|
-
"version": "24.2.0-
|
|
3
|
+
"version": "24.2.0-alpha11",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,19 +35,19 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@polymer/polymer": "^3.0.0",
|
|
38
|
-
"@vaadin/component-base": "24.2.0-
|
|
39
|
-
"@vaadin/vaadin-lumo-styles": "24.2.0-
|
|
40
|
-
"@vaadin/vaadin-themable-mixin": "24.2.0-
|
|
38
|
+
"@vaadin/component-base": "24.2.0-alpha11",
|
|
39
|
+
"@vaadin/vaadin-lumo-styles": "24.2.0-alpha11",
|
|
40
|
+
"@vaadin/vaadin-themable-mixin": "24.2.0-alpha11",
|
|
41
41
|
"lit": "^2.0.0"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"@esm-bundle/chai": "^4.3.4",
|
|
45
|
-
"@vaadin/testing-helpers": "^0.
|
|
45
|
+
"@vaadin/testing-helpers": "^0.5.0",
|
|
46
46
|
"sinon": "^13.0.2"
|
|
47
47
|
},
|
|
48
48
|
"web-types": [
|
|
49
49
|
"web-types.json",
|
|
50
50
|
"web-types.lit.json"
|
|
51
51
|
],
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "a958207d5f6a09ca0e2dcf9f62194b3f92c8766a"
|
|
53
53
|
}
|
package/src/vaadin-icon.d.ts
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
7
7
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
8
|
+
import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
|
|
8
9
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
9
10
|
import type { IconSvgLiteral } from './vaadin-icon-svg.js';
|
|
10
11
|
|
|
@@ -47,7 +48,7 @@ import type { IconSvgLiteral } from './vaadin-icon-svg.js';
|
|
|
47
48
|
* }
|
|
48
49
|
* ```
|
|
49
50
|
*/
|
|
50
|
-
declare class Icon extends ThemableMixin(ElementMixin(ControllerMixin(HTMLElement))) {
|
|
51
|
+
declare class Icon extends ThemableMixin(ElementMixin(ControllerMixin(SlotStylesMixin(HTMLElement)))) {
|
|
51
52
|
/**
|
|
52
53
|
* The name of the icon to use. The name should be of the form:
|
|
53
54
|
* `iconset_name:icon_name`. When using `vaadin-icons` it is possible
|
|
@@ -57,6 +58,8 @@ declare class Icon extends ThemableMixin(ElementMixin(ControllerMixin(HTMLElemen
|
|
|
57
58
|
* values provided by the corresponding `vaadin-iconset` element.
|
|
58
59
|
*
|
|
59
60
|
* See also [`name`](#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.
|
|
61
|
+
*
|
|
62
|
+
* @attr {string} icon
|
|
60
63
|
*/
|
|
61
64
|
icon: string | null;
|
|
62
65
|
|
|
@@ -65,6 +68,21 @@ declare class Icon extends ThemableMixin(ElementMixin(ControllerMixin(HTMLElemen
|
|
|
65
68
|
*/
|
|
66
69
|
svg: IconSvgLiteral | null;
|
|
67
70
|
|
|
71
|
+
/**
|
|
72
|
+
* Class names defining an icon font and/or a specific glyph inside an icon font.
|
|
73
|
+
*
|
|
74
|
+
* @attr {string} font
|
|
75
|
+
*/
|
|
76
|
+
font: string | null;
|
|
77
|
+
|
|
78
|
+
/**
|
|
79
|
+
* The specific glyph from a font to use as an icon.
|
|
80
|
+
* Can be a code point or a ligature name.
|
|
81
|
+
*
|
|
82
|
+
* @attr {string} char
|
|
83
|
+
*/
|
|
84
|
+
char: string | null;
|
|
85
|
+
|
|
68
86
|
/**
|
|
69
87
|
* The size of an icon, used to set the `viewBox` attribute.
|
|
70
88
|
*/
|
package/src/vaadin-icon.js
CHANGED
|
@@ -4,13 +4,22 @@
|
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
7
|
+
import { isSafari } from '@vaadin/component-base/src/browser-utils.js';
|
|
7
8
|
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
8
9
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
10
|
+
import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
|
|
11
|
+
import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
|
|
9
12
|
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
10
13
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
11
14
|
import { ensureSvgLiteral, renderSvg } from './vaadin-icon-svg.js';
|
|
12
15
|
import { Iconset } from './vaadin-iconset.js';
|
|
13
16
|
|
|
17
|
+
const supportsCSSContainerQueries = CSS.supports('container-type: inline-size');
|
|
18
|
+
const needsFontIconSizingFallback = !supportsCSSContainerQueries || isSafari;
|
|
19
|
+
// ResizeObserver-based fallback for browsers without CSS Container Queries support (Safari 15)
|
|
20
|
+
// or buggy Container Queries support for pseudo elements (Safari 16)
|
|
21
|
+
const ConditionalResizeMixin = (superClass) => (needsFontIconSizingFallback ? ResizeMixin(superClass) : superClass);
|
|
22
|
+
|
|
14
23
|
/**
|
|
15
24
|
* `<vaadin-icon>` is a Web Component for displaying SVG icons.
|
|
16
25
|
*
|
|
@@ -54,8 +63,11 @@ import { Iconset } from './vaadin-iconset.js';
|
|
|
54
63
|
* @mixes ControllerMixin
|
|
55
64
|
* @mixes ThemableMixin
|
|
56
65
|
* @mixes ElementMixin
|
|
66
|
+
* @mixes SlotStylesMixin
|
|
57
67
|
*/
|
|
58
|
-
class Icon extends ThemableMixin(
|
|
68
|
+
class Icon extends ThemableMixin(
|
|
69
|
+
ElementMixin(ControllerMixin(SlotStylesMixin(ConditionalResizeMixin(PolymerElement)))),
|
|
70
|
+
) {
|
|
59
71
|
static get template() {
|
|
60
72
|
return html`
|
|
61
73
|
<style>
|
|
@@ -68,6 +80,13 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
|
|
|
68
80
|
width: 24px;
|
|
69
81
|
height: 24px;
|
|
70
82
|
fill: currentColor;
|
|
83
|
+
container-type: size;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
:host::after,
|
|
87
|
+
:host::before {
|
|
88
|
+
line-height: 1;
|
|
89
|
+
font-size: var(--_vaadin-font-icon-size, 100cqh);
|
|
71
90
|
}
|
|
72
91
|
|
|
73
92
|
:host([hidden]) {
|
|
@@ -79,6 +98,14 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
|
|
|
79
98
|
width: 100%;
|
|
80
99
|
height: 100%;
|
|
81
100
|
}
|
|
101
|
+
|
|
102
|
+
:host(:is([font], [char])) svg {
|
|
103
|
+
display: none;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
:host([char])::before {
|
|
107
|
+
content: attr(char);
|
|
108
|
+
}
|
|
82
109
|
</style>
|
|
83
110
|
<svg
|
|
84
111
|
version="1.1"
|
|
@@ -108,9 +135,13 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
|
|
|
108
135
|
* values provided by the corresponding `vaadin-iconset` element.
|
|
109
136
|
*
|
|
110
137
|
* See also [`name`](#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.
|
|
138
|
+
*
|
|
139
|
+
* @attr {string} icon
|
|
140
|
+
* @type {string}
|
|
111
141
|
*/
|
|
112
142
|
icon: {
|
|
113
143
|
type: String,
|
|
144
|
+
reflectToAttribute: true,
|
|
114
145
|
observer: '__iconChanged',
|
|
115
146
|
},
|
|
116
147
|
|
|
@@ -121,6 +152,29 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
|
|
|
121
152
|
type: Object,
|
|
122
153
|
},
|
|
123
154
|
|
|
155
|
+
/**
|
|
156
|
+
* Class names defining an icon font and/or a specific glyph inside an icon font.
|
|
157
|
+
*
|
|
158
|
+
* @attr {string} font
|
|
159
|
+
* @type {string}
|
|
160
|
+
*/
|
|
161
|
+
font: {
|
|
162
|
+
type: String,
|
|
163
|
+
reflectToAttribute: true,
|
|
164
|
+
},
|
|
165
|
+
|
|
166
|
+
/**
|
|
167
|
+
* The specific glyph from a font to use as an icon.
|
|
168
|
+
* Can be a code point or a ligature name.
|
|
169
|
+
*
|
|
170
|
+
* @attr {string} char
|
|
171
|
+
* @type {string}
|
|
172
|
+
*/
|
|
173
|
+
char: {
|
|
174
|
+
type: String,
|
|
175
|
+
reflectToAttribute: true,
|
|
176
|
+
},
|
|
177
|
+
|
|
124
178
|
/**
|
|
125
179
|
* The size of an icon, used to set the `viewBox` attribute.
|
|
126
180
|
*/
|
|
@@ -147,7 +201,20 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
|
|
|
147
201
|
}
|
|
148
202
|
|
|
149
203
|
static get observers() {
|
|
150
|
-
return ['__svgChanged(svg, __svgElement)'];
|
|
204
|
+
return ['__svgChanged(svg, __svgElement)', '__fontChanged(font, char)'];
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
/** @protected */
|
|
208
|
+
get slotStyles() {
|
|
209
|
+
const tag = this.localName;
|
|
210
|
+
return [
|
|
211
|
+
`
|
|
212
|
+
${tag}[font] {
|
|
213
|
+
display: inline-flex;
|
|
214
|
+
vertical-align: middle;
|
|
215
|
+
}
|
|
216
|
+
`,
|
|
217
|
+
];
|
|
151
218
|
}
|
|
152
219
|
|
|
153
220
|
/** @protected */
|
|
@@ -157,6 +224,11 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
|
|
|
157
224
|
|
|
158
225
|
this._tooltipController = new TooltipController(this);
|
|
159
226
|
this.addController(this._tooltipController);
|
|
227
|
+
|
|
228
|
+
if (needsFontIconSizingFallback) {
|
|
229
|
+
// Call once initially to avoid a fouc
|
|
230
|
+
this._onResize();
|
|
231
|
+
}
|
|
160
232
|
}
|
|
161
233
|
|
|
162
234
|
/** @protected */
|
|
@@ -219,6 +291,29 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
|
|
|
219
291
|
__computeViewBox(size, viewBox) {
|
|
220
292
|
return viewBox || `0 0 ${size} ${size}`;
|
|
221
293
|
}
|
|
294
|
+
|
|
295
|
+
/** @private */
|
|
296
|
+
__fontChanged(font, char) {
|
|
297
|
+
this.classList.remove(...(this.__addedFontClasses || []));
|
|
298
|
+
if (font) {
|
|
299
|
+
this.__addedFontClasses = font.split(' ');
|
|
300
|
+
this.classList.add(...this.__addedFontClasses);
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
// The "icon" attribute needs to be set on the host also when using font icons
|
|
304
|
+
// to avoid issues such as https://github.com/vaadin/web-components/issues/6301
|
|
305
|
+
if ((font || char) && !this.icon) {
|
|
306
|
+
this.icon = '';
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
/**
|
|
311
|
+
* @protected
|
|
312
|
+
* @override
|
|
313
|
+
*/
|
|
314
|
+
_onResize() {
|
|
315
|
+
this.style.setProperty('--_vaadin-font-icon-size', `${this.offsetHeight}px`);
|
|
316
|
+
}
|
|
222
317
|
}
|
|
223
318
|
|
|
224
319
|
customElements.define(Icon.is, 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": "24.2.0-
|
|
4
|
+
"version": "24.2.0-alpha11",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "name",
|
|
15
|
-
"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.2.0-
|
|
15
|
+
"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.2.0-alpha11/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
18
|
"string",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"properties": [
|
|
49
49
|
{
|
|
50
50
|
"name": "name",
|
|
51
|
-
"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.2.0-
|
|
51
|
+
"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.2.0-alpha11/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
|
|
52
52
|
"value": {
|
|
53
53
|
"type": [
|
|
54
54
|
"string",
|
|
@@ -74,16 +74,32 @@
|
|
|
74
74
|
},
|
|
75
75
|
{
|
|
76
76
|
"name": "vaadin-icon",
|
|
77
|
-
"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/24.2.0-
|
|
77
|
+
"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/24.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/24.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```",
|
|
78
78
|
"attributes": [
|
|
79
79
|
{
|
|
80
80
|
"name": "icon",
|
|
81
|
-
"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/24.2.0-
|
|
81
|
+
"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/24.2.0-alpha11/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
82
82
|
"value": {
|
|
83
83
|
"type": [
|
|
84
|
-
"string"
|
|
85
|
-
|
|
86
|
-
|
|
84
|
+
"string"
|
|
85
|
+
]
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"name": "font",
|
|
90
|
+
"description": "Class names defining an icon font and/or a specific glyph inside an icon font.",
|
|
91
|
+
"value": {
|
|
92
|
+
"type": [
|
|
93
|
+
"string"
|
|
94
|
+
]
|
|
95
|
+
}
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"name": "char",
|
|
99
|
+
"description": "The specific glyph from a font to use as an icon.\nCan be a code point or a ligature name.",
|
|
100
|
+
"value": {
|
|
101
|
+
"type": [
|
|
102
|
+
"string"
|
|
87
103
|
]
|
|
88
104
|
}
|
|
89
105
|
},
|
|
@@ -114,12 +130,10 @@
|
|
|
114
130
|
"properties": [
|
|
115
131
|
{
|
|
116
132
|
"name": "icon",
|
|
117
|
-
"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/24.2.0-
|
|
133
|
+
"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/24.2.0-alpha11/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
118
134
|
"value": {
|
|
119
135
|
"type": [
|
|
120
|
-
"string"
|
|
121
|
-
"null",
|
|
122
|
-
"undefined"
|
|
136
|
+
"string"
|
|
123
137
|
]
|
|
124
138
|
}
|
|
125
139
|
},
|
|
@@ -134,6 +148,24 @@
|
|
|
134
148
|
]
|
|
135
149
|
}
|
|
136
150
|
},
|
|
151
|
+
{
|
|
152
|
+
"name": "font",
|
|
153
|
+
"description": "Class names defining an icon font and/or a specific glyph inside an icon font.",
|
|
154
|
+
"value": {
|
|
155
|
+
"type": [
|
|
156
|
+
"string"
|
|
157
|
+
]
|
|
158
|
+
}
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
"name": "char",
|
|
162
|
+
"description": "The specific glyph from a font to use as an icon.\nCan be a code point or a ligature name.",
|
|
163
|
+
"value": {
|
|
164
|
+
"type": [
|
|
165
|
+
"string"
|
|
166
|
+
]
|
|
167
|
+
}
|
|
168
|
+
},
|
|
137
169
|
{
|
|
138
170
|
"name": "size",
|
|
139
171
|
"description": "The size of an icon, used to set the `viewBox` attribute.",
|
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": "24.2.0-
|
|
4
|
+
"version": "24.2.0-alpha11",
|
|
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.2.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/24.2.0-alpha11/#/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/24.2.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/24.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/24.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```",
|
|
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/24.2.0-
|
|
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/24.2.0-alpha11/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
46
46
|
"value": {
|
|
47
47
|
"kind": "expression"
|
|
48
48
|
}
|
|
@@ -54,6 +54,20 @@
|
|
|
54
54
|
"kind": "expression"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
|
+
{
|
|
58
|
+
"name": ".font",
|
|
59
|
+
"description": "Class names defining an icon font and/or a specific glyph inside an icon font.",
|
|
60
|
+
"value": {
|
|
61
|
+
"kind": "expression"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": ".char",
|
|
66
|
+
"description": "The specific glyph from a font to use as an icon.\nCan be a code point or a ligature name.",
|
|
67
|
+
"value": {
|
|
68
|
+
"kind": "expression"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
57
71
|
{
|
|
58
72
|
"name": ".size",
|
|
59
73
|
"description": "The size of an icon, used to set the `viewBox` attribute.",
|