@vaadin/icon 24.4.0-alpha9 → 24.4.0-dev.4b20a0c55
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 -1
- package/package.json +5 -5
- package/src/vaadin-icon.js +2 -0
- package/theme/lumo/vaadin-icon-styles.d.ts +0 -1
- package/theme/lumo/vaadin-icon.d.ts +0 -2
- package/theme/material/vaadin-icon-styles.d.ts +0 -1
- package/theme/material/vaadin-icon.d.ts +0 -2
- package/web-types.json +0 -194
- package/web-types.lit.json +0 -111
package/README.md
CHANGED
|
@@ -5,7 +5,6 @@ A web component for displaying SVG icons.
|
|
|
5
5
|
[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/foundation/icons)
|
|
6
6
|
|
|
7
7
|
[](https://www.npmjs.com/package/@vaadin/icon)
|
|
8
|
-
[](https://discord.gg/PHmkCKC)
|
|
9
8
|
|
|
10
9
|
```html
|
|
11
10
|
<vaadin-icon name="vaadin:user"></vaadin-icon>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/icon",
|
|
3
|
-
"version": "24.4.0-
|
|
3
|
+
"version": "24.4.0-dev.4b20a0c55",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,9 +36,9 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
38
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/component-base": "24.4.0-
|
|
40
|
-
"@vaadin/vaadin-lumo-styles": "24.4.0-
|
|
41
|
-
"@vaadin/vaadin-themable-mixin": "24.4.0-
|
|
39
|
+
"@vaadin/component-base": "24.4.0-dev.4b20a0c55",
|
|
40
|
+
"@vaadin/vaadin-lumo-styles": "24.4.0-dev.4b20a0c55",
|
|
41
|
+
"@vaadin/vaadin-themable-mixin": "24.4.0-dev.4b20a0c55",
|
|
42
42
|
"lit": "^3.0.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"web-types.json",
|
|
51
51
|
"web-types.lit.json"
|
|
52
52
|
],
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "b79c81e5f6fd24684b34ee0dc434e94d943ea13e"
|
|
54
54
|
}
|
package/src/vaadin-icon.js
CHANGED
|
@@ -96,6 +96,8 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(SlotStylesMixin(Ic
|
|
|
96
96
|
display: block;
|
|
97
97
|
width: 100%;
|
|
98
98
|
height: 100%;
|
|
99
|
+
/* prevent overflowing icon from clipping, see https://github.com/vaadin/flow-components/issues/5872 */
|
|
100
|
+
overflow: visible;
|
|
99
101
|
}
|
|
100
102
|
|
|
101
103
|
:host(:is([icon-class], [font-icon-content])) svg {
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-lumo-styles/sizing.js';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/web-types.json
DELETED
|
@@ -1,194 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
-
"name": "@vaadin/icon",
|
|
4
|
-
"version": "24.4.0-alpha9",
|
|
5
|
-
"description-markup": "markdown",
|
|
6
|
-
"contributions": {
|
|
7
|
-
"html": {
|
|
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": "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.4.0-alpha9/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
|
|
16
|
-
"value": {
|
|
17
|
-
"type": [
|
|
18
|
-
"string",
|
|
19
|
-
"null",
|
|
20
|
-
"undefined"
|
|
21
|
-
]
|
|
22
|
-
}
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
"name": "size",
|
|
26
|
-
"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.",
|
|
27
|
-
"value": {
|
|
28
|
-
"type": [
|
|
29
|
-
"number",
|
|
30
|
-
"null",
|
|
31
|
-
"undefined"
|
|
32
|
-
]
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
"name": "theme",
|
|
37
|
-
"description": "The theme variants to apply to the component.",
|
|
38
|
-
"value": {
|
|
39
|
-
"type": [
|
|
40
|
-
"string",
|
|
41
|
-
"null",
|
|
42
|
-
"undefined"
|
|
43
|
-
]
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
],
|
|
47
|
-
"js": {
|
|
48
|
-
"properties": [
|
|
49
|
-
{
|
|
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.4.0-alpha9/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
|
|
52
|
-
"value": {
|
|
53
|
-
"type": [
|
|
54
|
-
"string",
|
|
55
|
-
"null",
|
|
56
|
-
"undefined"
|
|
57
|
-
]
|
|
58
|
-
}
|
|
59
|
-
},
|
|
60
|
-
{
|
|
61
|
-
"name": "size",
|
|
62
|
-
"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.",
|
|
63
|
-
"value": {
|
|
64
|
-
"type": [
|
|
65
|
-
"number",
|
|
66
|
-
"null",
|
|
67
|
-
"undefined"
|
|
68
|
-
]
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
],
|
|
72
|
-
"events": []
|
|
73
|
-
}
|
|
74
|
-
},
|
|
75
|
-
{
|
|
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.4.0-alpha9/#/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.4.0-alpha9/#/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
|
-
"attributes": [
|
|
79
|
-
{
|
|
80
|
-
"name": "class",
|
|
81
|
-
"description": "",
|
|
82
|
-
"value": {
|
|
83
|
-
"type": [
|
|
84
|
-
""
|
|
85
|
-
]
|
|
86
|
-
}
|
|
87
|
-
},
|
|
88
|
-
{
|
|
89
|
-
"name": "theme",
|
|
90
|
-
"description": "The theme variants to apply to the component.",
|
|
91
|
-
"value": {
|
|
92
|
-
"type": [
|
|
93
|
-
"string",
|
|
94
|
-
"null",
|
|
95
|
-
"undefined"
|
|
96
|
-
]
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
],
|
|
100
|
-
"js": {
|
|
101
|
-
"properties": [
|
|
102
|
-
{
|
|
103
|
-
"name": "icon",
|
|
104
|
-
"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.4.0-alpha9/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
105
|
-
"value": {
|
|
106
|
-
"type": [
|
|
107
|
-
"string"
|
|
108
|
-
]
|
|
109
|
-
}
|
|
110
|
-
},
|
|
111
|
-
{
|
|
112
|
-
"name": "svg",
|
|
113
|
-
"description": "The SVG icon wrapped in a Lit template literal.",
|
|
114
|
-
"value": {
|
|
115
|
-
"type": [
|
|
116
|
-
"Object",
|
|
117
|
-
"null",
|
|
118
|
-
"undefined"
|
|
119
|
-
]
|
|
120
|
-
}
|
|
121
|
-
},
|
|
122
|
-
{
|
|
123
|
-
"name": "src",
|
|
124
|
-
"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",
|
|
125
|
-
"value": {
|
|
126
|
-
"type": [
|
|
127
|
-
"string"
|
|
128
|
-
]
|
|
129
|
-
}
|
|
130
|
-
},
|
|
131
|
-
{
|
|
132
|
-
"name": "symbol",
|
|
133
|
-
"description": "The symbol identifier that references an ID of an element contained in the SVG element assigned to the\n`src` property",
|
|
134
|
-
"value": {
|
|
135
|
-
"type": [
|
|
136
|
-
"string"
|
|
137
|
-
]
|
|
138
|
-
}
|
|
139
|
-
},
|
|
140
|
-
{
|
|
141
|
-
"name": "iconClass",
|
|
142
|
-
"description": "Class names defining an icon font and/or a specific glyph inside an icon font.\n\nExample: \"fa-solid fa-user\"",
|
|
143
|
-
"value": {
|
|
144
|
-
"type": [
|
|
145
|
-
"string"
|
|
146
|
-
]
|
|
147
|
-
}
|
|
148
|
-
},
|
|
149
|
-
{
|
|
150
|
-
"name": "char",
|
|
151
|
-
"description": "A hexadecimal code point that specifies a glyph from an icon font.\n\nExample: \"e001\"",
|
|
152
|
-
"value": {
|
|
153
|
-
"type": [
|
|
154
|
-
"string"
|
|
155
|
-
]
|
|
156
|
-
}
|
|
157
|
-
},
|
|
158
|
-
{
|
|
159
|
-
"name": "ligature",
|
|
160
|
-
"description": "A ligature name that specifies an icon from an icon font with support for ligatures.\n\nExample: \"home\".",
|
|
161
|
-
"value": {
|
|
162
|
-
"type": [
|
|
163
|
-
"string"
|
|
164
|
-
]
|
|
165
|
-
}
|
|
166
|
-
},
|
|
167
|
-
{
|
|
168
|
-
"name": "fontFamily",
|
|
169
|
-
"description": "The font family to use for the font icon.",
|
|
170
|
-
"value": {
|
|
171
|
-
"type": [
|
|
172
|
-
"string"
|
|
173
|
-
]
|
|
174
|
-
}
|
|
175
|
-
},
|
|
176
|
-
{
|
|
177
|
-
"name": "size",
|
|
178
|
-
"description": "The size of an icon, used to set the `viewBox` attribute.",
|
|
179
|
-
"value": {
|
|
180
|
-
"type": [
|
|
181
|
-
"number",
|
|
182
|
-
"null",
|
|
183
|
-
"undefined"
|
|
184
|
-
]
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
],
|
|
188
|
-
"events": []
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
]
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
}
|
package/web-types.lit.json
DELETED
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
-
"name": "@vaadin/icon",
|
|
4
|
-
"version": "24.4.0-alpha9",
|
|
5
|
-
"description-markup": "markdown",
|
|
6
|
-
"framework": "lit",
|
|
7
|
-
"framework-config": {
|
|
8
|
-
"enable-when": {
|
|
9
|
-
"node-packages": [
|
|
10
|
-
"lit"
|
|
11
|
-
]
|
|
12
|
-
}
|
|
13
|
-
},
|
|
14
|
-
"contributions": {
|
|
15
|
-
"html": {
|
|
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/24.4.0-alpha9/#/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
|
-
{
|
|
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.4.0-alpha9/#/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.4.0-alpha9/#/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
|
-
"extension": true,
|
|
42
|
-
"attributes": [
|
|
43
|
-
{
|
|
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.4.0-alpha9/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
46
|
-
"value": {
|
|
47
|
-
"kind": "expression"
|
|
48
|
-
}
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
"name": ".svg",
|
|
52
|
-
"description": "The SVG icon wrapped in a Lit template literal.",
|
|
53
|
-
"value": {
|
|
54
|
-
"kind": "expression"
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
"name": ".src",
|
|
59
|
-
"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",
|
|
60
|
-
"value": {
|
|
61
|
-
"kind": "expression"
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
"name": ".symbol",
|
|
66
|
-
"description": "The symbol identifier that references an ID of an element contained in the SVG element assigned to the\n`src` property",
|
|
67
|
-
"value": {
|
|
68
|
-
"kind": "expression"
|
|
69
|
-
}
|
|
70
|
-
},
|
|
71
|
-
{
|
|
72
|
-
"name": ".iconClass",
|
|
73
|
-
"description": "Class names defining an icon font and/or a specific glyph inside an icon font.\n\nExample: \"fa-solid fa-user\"",
|
|
74
|
-
"value": {
|
|
75
|
-
"kind": "expression"
|
|
76
|
-
}
|
|
77
|
-
},
|
|
78
|
-
{
|
|
79
|
-
"name": ".char",
|
|
80
|
-
"description": "A hexadecimal code point that specifies a glyph from an icon font.\n\nExample: \"e001\"",
|
|
81
|
-
"value": {
|
|
82
|
-
"kind": "expression"
|
|
83
|
-
}
|
|
84
|
-
},
|
|
85
|
-
{
|
|
86
|
-
"name": ".ligature",
|
|
87
|
-
"description": "A ligature name that specifies an icon from an icon font with support for ligatures.\n\nExample: \"home\".",
|
|
88
|
-
"value": {
|
|
89
|
-
"kind": "expression"
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
|
-
{
|
|
93
|
-
"name": ".fontFamily",
|
|
94
|
-
"description": "The font family to use for the font icon.",
|
|
95
|
-
"value": {
|
|
96
|
-
"kind": "expression"
|
|
97
|
-
}
|
|
98
|
-
},
|
|
99
|
-
{
|
|
100
|
-
"name": ".size",
|
|
101
|
-
"description": "The size of an icon, used to set the `viewBox` attribute.",
|
|
102
|
-
"value": {
|
|
103
|
-
"kind": "expression"
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
]
|
|
107
|
-
}
|
|
108
|
-
]
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
}
|