@vmz/ui-icons 0.2.2 → 0.2.4
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 +2 -2
- package/src/Icon.vmz +44 -44
- package/src/registry.ts +76 -70
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vmz/ui-icons",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.4",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "VMZ UI Icons — semantic icon names + glyph registry. Reuses @vmz/ui tokens; not a second Button/Tooltip shell or loose SVG dump.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"README.md"
|
|
16
16
|
],
|
|
17
17
|
"peerDependencies": {
|
|
18
|
-
"@vmz/ui": "0.2.
|
|
18
|
+
"@vmz/ui": "0.2.4"
|
|
19
19
|
},
|
|
20
20
|
"keywords": [
|
|
21
21
|
"vmz",
|
package/src/Icon.vmz
CHANGED
|
@@ -6,44 +6,44 @@
|
|
|
6
6
|
</span>
|
|
7
7
|
</template>
|
|
8
8
|
<style>
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
9
|
+
.vmz-ui-icon {
|
|
10
|
+
display: inline-flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
flex-shrink: 0;
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
color: var(--vmz-action-primary-background);
|
|
16
|
+
line-height: 1;
|
|
17
|
+
vertical-align: middle;
|
|
18
|
+
user-select: none;
|
|
19
|
+
}
|
|
20
20
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
21
|
+
.vmz-ui-icon__svg {
|
|
22
|
+
display: block;
|
|
23
|
+
width: 1em;
|
|
24
|
+
height: 1em;
|
|
25
|
+
}
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
27
|
+
.vmz-ui-icon[data-size="sm"] {
|
|
28
|
+
width: 1.5rem;
|
|
29
|
+
height: 1.5rem;
|
|
30
|
+
font-size: 0.95rem;
|
|
31
|
+
}
|
|
32
32
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
33
|
+
.vmz-ui-icon[data-size="md"] {
|
|
34
|
+
width: 2.35rem;
|
|
35
|
+
height: 2.35rem;
|
|
36
|
+
font-size: 1.15rem;
|
|
37
|
+
}
|
|
38
38
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
39
|
+
.vmz-ui-icon[data-size="lg"] {
|
|
40
|
+
width: 2.85rem;
|
|
41
|
+
height: 2.85rem;
|
|
42
|
+
font-size: 1.35rem;
|
|
43
|
+
}
|
|
44
44
|
</style>
|
|
45
45
|
<script client>
|
|
46
|
-
import { FALLBACK_PATH, resolveIconPath } from
|
|
46
|
+
import { FALLBACK_PATH, resolveIconPath } from "./registry.ts";
|
|
47
47
|
|
|
48
48
|
/**
|
|
49
49
|
* VMZ UI Icons — semantic Icon backed by the shared registry export.
|
|
@@ -51,15 +51,15 @@ import { FALLBACK_PATH, resolveIconPath } from './registry.ts';
|
|
|
51
51
|
*/
|
|
52
52
|
export default class Icon {
|
|
53
53
|
/** Semantic icon id, e.g. tool.base64 / action.search */
|
|
54
|
-
public name: string =
|
|
54
|
+
public name: string = "";
|
|
55
55
|
/** sm | md | lg */
|
|
56
|
-
public size: string =
|
|
56
|
+
public size: string = "md";
|
|
57
57
|
/** Accessible name; empty ⇒ decorative */
|
|
58
|
-
public label: string =
|
|
58
|
+
public label: string = "";
|
|
59
59
|
|
|
60
|
-
roleAttr =
|
|
61
|
-
hiddenAttr =
|
|
62
|
-
labelAttr =
|
|
60
|
+
roleAttr = "";
|
|
61
|
+
hiddenAttr = "true";
|
|
62
|
+
labelAttr = "";
|
|
63
63
|
|
|
64
64
|
onMount() {
|
|
65
65
|
this.syncA11y();
|
|
@@ -70,15 +70,15 @@ export default class Icon {
|
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
syncA11y() {
|
|
73
|
-
const labelled = String(this.label ||
|
|
73
|
+
const labelled = String(this.label || "").trim();
|
|
74
74
|
if (labelled) {
|
|
75
|
-
this.roleAttr =
|
|
76
|
-
this.hiddenAttr =
|
|
75
|
+
this.roleAttr = "img";
|
|
76
|
+
this.hiddenAttr = "";
|
|
77
77
|
this.labelAttr = labelled;
|
|
78
78
|
} else {
|
|
79
|
-
this.roleAttr =
|
|
80
|
-
this.hiddenAttr =
|
|
81
|
-
this.labelAttr =
|
|
79
|
+
this.roleAttr = "";
|
|
80
|
+
this.hiddenAttr = "true";
|
|
81
|
+
this.labelAttr = "";
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
}
|
package/src/registry.ts
CHANGED
|
@@ -1,83 +1,89 @@
|
|
|
1
1
|
/** Shared SVG path registry for `@vmz/ui-icons` and optional app-level Icon shims. */
|
|
2
2
|
export const REGISTRY = {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
3
|
+
'action.search': 'M10.5 3a7.5 7.5 0 0 1 5.9 12.1l4 4-1.4 1.4-4-4A7.5 7.5 0 1 1 10.5 3zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z',
|
|
4
|
+
'action.close': 'M6.4 7.8 7.8 6.4 12 10.6 16.2 6.4 17.6 7.8 13.4 12 17.6 16.2 16.2 17.6 12 13.4 7.8 17.6 6.4 16.2 10.6 12z',
|
|
5
|
+
'action.copy': 'M8 4h9a2 2 0 0 1 2 2v11h-2V6H8V4zm-2 4h9a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2zm0 2v10h9V10H6z',
|
|
6
|
+
'nav.home': 'M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-9.5z',
|
|
7
|
+
'nav.language':
|
|
8
|
+
'M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-1 2.1a8 8 0 0 0-3.2 6.9H5.1a8 8 0 0 1 3.3-5.8L11 4.1zm2 0 .6.1a8 8 0 0 1 3.3 5.8h-3.7A8 8 0 0 0 13 4.1zM5.1 13h3.7a8 8 0 0 0 3.2 6.9l-2.6-.2A8 8 0 0 1 5.1 13zm8.8 0h3.7a8 8 0 0 1-3.3 5.8l-.4.1a8 8 0 0 0-3.2-5.9h3.2z',
|
|
9
|
+
'status.info':
|
|
10
|
+
'M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 8.2a1 1 0 0 0-1 1V17a1 1 0 1 0 2 0v-5.8a1 1 0 0 0-1-1zm0-3.7a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z',
|
|
11
|
+
'status.warning':
|
|
12
|
+
'M12 3.2 21 19H3L12 3.2zm0 5.3a1 1 0 0 0-1 1v4.2a1 1 0 1 0 2 0V9.5a1 1 0 0 0-1-1zm0 8.1a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z',
|
|
13
|
+
'status.success': 'M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-2.5 10.3-2-2 1.4-1.4 2 2 5-5 1.4 1.4z',
|
|
14
|
+
'feature.incremental': 'M13 2 4 14h7l-1 8 10-14h-7l0-6z',
|
|
15
|
+
'feature.runtime': 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm0 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14zm-.5 3.5v4.2l3.6 2.1.9-1.5-2.8-1.6V8.5h-1.7z',
|
|
16
|
+
'feature.ssr': 'M4 6h16v4H4V6zm0 6h10v4H4v-4zm12 0h4v4h-4v-4z',
|
|
17
|
+
'feature.deploy': 'M4 5h7v7H4V5zm9 0h7v7h-7V5zM4 14h7v5H4v-5zm9 3h7v2h-7v-2z',
|
|
18
|
+
'tool.base64': 'M5 5h6v3H8v3h3v3H5V5zm8 0h6v14h-6V5zm2 2v10h2V7h-2z',
|
|
19
|
+
'tool.base36': 'M6 6h4l3 6-3 6H6l3-6-3-6zm8 0h4v12h-4V6z',
|
|
20
|
+
'tool.hex': 'M7 5h3l2 4-2 4H7l2-4-2-4zm7 0h3l2 4-2 4h-3l2-4-2-4z',
|
|
21
|
+
'tool.radix': 'M5 7h14v2H5V7zm0 4h10v2H5v-2zm0 4h14v2H5v-2z',
|
|
22
|
+
'tool.url':
|
|
23
|
+
'M10.6 8.4a3.5 3.5 0 0 1 4.9 0l1.1 1.1a3.5 3.5 0 0 1 0 4.9l-.8.8-1.4-1.4.8-.8a1.5 1.5 0 0 0 0-2.1l-1.1-1.1a1.5 1.5 0 0 0-2.1 0l-.8.8L9.8 9.2l.8-.8zm2.8 2.8 1.4 1.4-4.2 4.2a3.5 3.5 0 0 1-4.9 0l-1.1-1.1a3.5 3.5 0 0 1 0-4.9l.8-.8 1.4 1.4-.8.8a1.5 1.5 0 0 0 0 2.1l1.1 1.1a1.5 1.5 0 0 0 2.1 0l4.2-4.2z',
|
|
24
|
+
'tool.html-entities': 'M8 7 5 12l3 5h2l-2.5-5L10 7H8zm8 0h-2l2.5 5L14 17h2l3-5-3-5zM11 16h2v2h-2v-2z',
|
|
25
|
+
'tool.ascii': 'M6 16V8h3a3 3 0 0 1 0 6H8v2H6zm2-4h1a1 1 0 1 0 0-2H8v2zm5 4V8h2v8h-2zm4 0V8h2l-2 4 2 4h-2z',
|
|
26
|
+
'tool.binary-text':
|
|
27
|
+
'M5 5h4v4H5V5zm10 0h4v4h-4V5zM5 15h4v4H5v-4zm6-8h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm4-8h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2z',
|
|
28
|
+
'tool.temperature':
|
|
29
|
+
'M12 3a4 4 0 0 0-4 4v6.1a6 6 0 1 0 8 0V7a4 4 0 0 0-4-4zm0 2a2 2 0 0 1 2 2v6.3a4 4 0 1 1-4 0V7a2 2 0 0 1 2-2zm0 4.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z',
|
|
30
|
+
'tool.length': 'M4 11h16v2H4v-2zm2-4 3 3-1.4 1.4L4.6 8.4 6 7zm12 0 1.4 1.4-3 3L15 10l3-3z',
|
|
31
|
+
'tool.weight': 'M12 3a3 3 0 0 1 2.8 4H19l-2 11H7L5 7h4.2A3 3 0 0 1 12 3zm0 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2z',
|
|
32
|
+
'tool.speed': 'M13 4.1A8 8 0 1 0 12 20v-2a6 6 0 1 1 1-11.9V4.1zM12 8l4.5 2.6L12 13.2 7.5 10.6 12 8zm0 3.8 2.7 1.6L12 15 9.3 13.4 12 11.8z',
|
|
33
|
+
'tool.area': 'M5 5h14v14H5V5zm2 2v10h10V7H7z',
|
|
34
|
+
'tool.volume': 'M6 8h12v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8zm2 2v8h8v-8H8zm2-6h4v2H10V4z',
|
|
35
|
+
'tool.time-units': 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm0 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14zm-.8 3.5V12l3.2 1.9.8-1.4-2.4-1.4V8.5h-1.6z',
|
|
36
|
+
'tool.data-size': 'M5 6h14v3H5V6zm0 5h10v3H5v-3zm0 5h14v2H5v-2z',
|
|
37
|
+
'tool.color':
|
|
38
|
+
'M12 3c-3.9 0-7 2.7-7 6.2 0 2.2 1.4 3.8 3.5 3.8 1 0 1.8-.5 2.4-1.2.6.7 1.4 1.2 2.4 1.2 2.1 0 3.5-1.6 3.5-3.8C17 5.7 13.9 3 12 3zm-4.5 5.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm9 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3z',
|
|
39
|
+
'tool.rgb-hsl': 'M6 18 10 6h1l4 12h-2l-.8-2.4H8.8L8 18H6zm2.6-4.4h2.8L9.7 9.8 8.6 13.6zm7.1 4.4V6h2v12h-2z',
|
|
40
|
+
'tool.px-rem': 'M6 16V8h3l2 4-2 4H6zm8 0V8h2v8h-2zm-6-4h1.2l.8-1.6.8 1.6H11z',
|
|
41
|
+
'tool.percentage': 'M7 7h4v4H7V7zm6 6h4v4h-4v-4zM8.8 15.2 15.2 8.8l1.4 1.4-6.4 6.4-1.4-1.4z',
|
|
42
|
+
'tool.ratio': 'M5 7h14v2H5V7zm0 8h14v2H5v-2zm4-6h2v8h-2V9zm6 0h2v8h-2V9z',
|
|
43
|
+
'tool.average': 'M5 18h14v2H5v-2zm2.2-4 2.4-7 2.2 5.5L14.4 8l2.6 6H5.2z',
|
|
44
|
+
'tool.tip': 'M12 3c-3.3 0-6 2-6 4.5 0 1.4.8 2.6 2.1 3.3L7 14h10l-1.1-3.2c1.3-.7 2.1-1.9 2.1-3.3C18 5 15.3 3 12 3zm-2 15h4v2h-4v-2z',
|
|
45
|
+
'tool.discount': 'M7 7h4v4H7V7zm6 6h4v4h-4v-4zM8.8 15.2 15.2 8.8l1.4 1.4-6.4 6.4-1.4-1.4zM5 18h3v2H5v-2zm11 0h3v2h-3v-2z',
|
|
46
|
+
'tool.aspect-ratio': 'M5 7h14v10H5V7zm2 2v6h10V9H7z',
|
|
47
|
+
'tool.nearest-tenth': 'M6 7h12v2H6V7zm0 4h8v2H6v-2zm0 4h12v2H6v-2z',
|
|
48
|
+
'tool.gpa': 'M6 6h4v12H6V6zm8 0h4v12h-4V6zm-8 8h12v2H6v-2z',
|
|
49
|
+
'tool.bandwidth': 'M4 12h3l2-4 3 8 2-4h6v2h-4.5l-2 4-3-8-2 4H4v-2z',
|
|
50
|
+
'tool.percent-change': 'M6 16 12 8l3 4 5-8 2 3v5H6zm-1 2h14v2H5v-2z',
|
|
51
|
+
'tool.grade-curve': 'M5 17c2-6 4-8 7-8s5 2 7 8H5z',
|
|
52
|
+
'tool.ohm': 'M7 8h2v3h6V8h2v8h-2v-3H9v3H7V8z',
|
|
53
|
+
'action.check': 'M9.2 16.6 4.8 12.2l1.4-1.4 3 3 8-8 1.4 1.4z',
|
|
54
|
+
'action.chevron-down': 'M7.4 9.1 12 13.7l4.6-4.6 1.4 1.4L12 16.5 6 10.5z',
|
|
55
|
+
'action.chevron-right': 'M9.1 6 15.1 12l-6 6-1.4-1.4L12.3 12 7.7 7.4z',
|
|
56
|
+
'action.menu': 'M4 7h16v2H4zm0 4h16v2H4zm0 4h16v2H4z',
|
|
57
|
+
'action.plus': 'M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z',
|
|
58
|
+
'status.danger': 'M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-1 5h2v6h-2zm0 8h2v2h-2z',
|
|
52
59
|
};
|
|
53
60
|
|
|
54
|
-
export const FALLBACK_PATH =
|
|
55
|
-
'M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm1 5h-2v2h2zm0 4h-2v7h2z';
|
|
61
|
+
export const FALLBACK_PATH = 'M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm1 5h-2v2h2zm0 4h-2v7h2z';
|
|
56
62
|
|
|
57
63
|
export const LEGACY_ICON_ALIASES: Record<string, string> = {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
64
|
+
check: 'action.check',
|
|
65
|
+
close: 'action.close',
|
|
66
|
+
search: 'action.search',
|
|
67
|
+
'chevron-down': 'action.chevron-down',
|
|
68
|
+
'chevron-right': 'action.chevron-right',
|
|
69
|
+
info: 'status.info',
|
|
70
|
+
warning: 'status.warning',
|
|
71
|
+
success: 'status.success',
|
|
72
|
+
danger: 'status.danger',
|
|
73
|
+
menu: 'action.menu',
|
|
74
|
+
plus: 'action.plus',
|
|
69
75
|
};
|
|
70
76
|
|
|
71
77
|
export function resolveIconName(name: string): string {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
78
|
+
const key = String(name || '').trim();
|
|
79
|
+
if (!key) return '';
|
|
80
|
+
if (LEGACY_ICON_ALIASES[key]) return LEGACY_ICON_ALIASES[key];
|
|
81
|
+
return key;
|
|
76
82
|
}
|
|
77
83
|
|
|
78
84
|
export function resolveIconPath(name: string): string {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
85
|
+
const key = resolveIconName(name);
|
|
86
|
+
if (!key) return FALLBACK_PATH;
|
|
87
|
+
if (REGISTRY[key]) return REGISTRY[key];
|
|
88
|
+
return FALLBACK_PATH;
|
|
83
89
|
}
|