@axiapps/axi-design 1.12.0 → 1.14.0

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.
Files changed (105) hide show
  1. package/README.md +41 -7
  2. package/dist/axi.css +36 -1
  3. package/dist/icons/arrow-down.svg +4 -0
  4. package/dist/icons/arrow-left.svg +4 -0
  5. package/dist/icons/arrow-right.svg +4 -0
  6. package/dist/icons/arrow-up.svg +4 -0
  7. package/dist/icons/calendar.svg +6 -0
  8. package/dist/icons/check-check.svg +4 -0
  9. package/dist/icons/check.svg +3 -0
  10. package/dist/icons/chevron-down.svg +3 -0
  11. package/dist/icons/chevron-left.svg +3 -0
  12. package/dist/icons/chevron-right.svg +3 -0
  13. package/dist/icons/chevron-up.svg +3 -0
  14. package/dist/icons/circle-alert.svg +5 -0
  15. package/dist/icons/circle-check.svg +4 -0
  16. package/dist/icons/circle-x.svg +5 -0
  17. package/dist/icons/clock.svg +4 -0
  18. package/dist/icons/copy.svg +4 -0
  19. package/dist/icons/download.svg +5 -0
  20. package/dist/icons/external-link.svg +5 -0
  21. package/dist/icons/eye.svg +4 -0
  22. package/dist/icons/file-text.svg +6 -0
  23. package/dist/icons/file.svg +4 -0
  24. package/dist/icons/filter.svg +3 -0
  25. package/dist/icons/folder-open.svg +4 -0
  26. package/dist/icons/folder.svg +3 -0
  27. package/dist/icons/icons.json +671 -0
  28. package/dist/icons/info.svg +5 -0
  29. package/dist/icons/link.svg +5 -0
  30. package/dist/icons/lock.svg +4 -0
  31. package/dist/icons/menu.svg +5 -0
  32. package/dist/icons/minus.svg +3 -0
  33. package/dist/icons/pause.svg +4 -0
  34. package/dist/icons/pencil.svg +4 -0
  35. package/dist/icons/play.svg +3 -0
  36. package/dist/icons/plus.svg +4 -0
  37. package/dist/icons/refresh-cw.svg +6 -0
  38. package/dist/icons/save.svg +5 -0
  39. package/dist/icons/search.svg +4 -0
  40. package/dist/icons/settings-2.svg +6 -0
  41. package/dist/icons/skip-forward.svg +4 -0
  42. package/dist/icons/sprite.svg +203 -0
  43. package/dist/icons/square.svg +3 -0
  44. package/dist/icons/tag.svg +4 -0
  45. package/dist/icons/trash-2.svg +5 -0
  46. package/dist/icons/unlock.svg +4 -0
  47. package/dist/icons/upload.svg +5 -0
  48. package/dist/icons/user.svg +4 -0
  49. package/dist/icons/users.svg +6 -0
  50. package/dist/icons/volume-2.svg +5 -0
  51. package/dist/icons/x.svg +4 -0
  52. package/dist/themes/glass.css +19 -6
  53. package/docs/RULES.md +123 -18
  54. package/icons/LICENSE-LUCIDE +51 -0
  55. package/icons/arrow-down.svg +4 -0
  56. package/icons/arrow-left.svg +4 -0
  57. package/icons/arrow-right.svg +4 -0
  58. package/icons/arrow-up.svg +4 -0
  59. package/icons/calendar.svg +6 -0
  60. package/icons/check-check.svg +4 -0
  61. package/icons/check.svg +3 -0
  62. package/icons/chevron-down.svg +3 -0
  63. package/icons/chevron-left.svg +3 -0
  64. package/icons/chevron-right.svg +3 -0
  65. package/icons/chevron-up.svg +3 -0
  66. package/icons/circle-alert.svg +5 -0
  67. package/icons/circle-check.svg +4 -0
  68. package/icons/circle-x.svg +5 -0
  69. package/icons/clock.svg +4 -0
  70. package/icons/copy.svg +4 -0
  71. package/icons/download.svg +5 -0
  72. package/icons/external-link.svg +5 -0
  73. package/icons/eye.svg +4 -0
  74. package/icons/file-text.svg +6 -0
  75. package/icons/file.svg +4 -0
  76. package/icons/filter.svg +3 -0
  77. package/icons/folder-open.svg +4 -0
  78. package/icons/folder.svg +3 -0
  79. package/icons/info.svg +5 -0
  80. package/icons/link.svg +5 -0
  81. package/icons/lock.svg +4 -0
  82. package/icons/menu.svg +5 -0
  83. package/icons/minus.svg +3 -0
  84. package/icons/pause.svg +4 -0
  85. package/icons/pencil.svg +4 -0
  86. package/icons/play.svg +3 -0
  87. package/icons/plus.svg +4 -0
  88. package/icons/refresh-cw.svg +6 -0
  89. package/icons/save.svg +5 -0
  90. package/icons/search.svg +4 -0
  91. package/icons/settings-2.svg +6 -0
  92. package/icons/skip-forward.svg +4 -0
  93. package/icons/square.svg +3 -0
  94. package/icons/tag.svg +4 -0
  95. package/icons/trash-2.svg +5 -0
  96. package/icons/unlock.svg +4 -0
  97. package/icons/upload.svg +5 -0
  98. package/icons/user.svg +4 -0
  99. package/icons/users.svg +6 -0
  100. package/icons/volume-2.svg +5 -0
  101. package/icons/x.svg +4 -0
  102. package/package.json +5 -1
  103. package/src/base.css +7 -1
  104. package/src/primitives.css +15 -0
  105. package/src/tokens.css +14 -0
package/README.md CHANGED
@@ -53,6 +53,36 @@ site](https://darkharasho.github.io/axi-design/) for every component, with live
53
53
  accent and theme switchers in the masthead. `/gallery/` still holds the
54
54
  everything-at-once view.
55
55
 
56
+ ### An icon set of its own
57
+
58
+ Forty-seven glyphs drawn to [rule 12](docs/RULES.md) — a 24 canvas, a 3px
59
+ stroke, mitered joins, square corners, and no angle that is not 0°, 45° or 90°.
60
+ They take their ink from whatever they sit in, so a glyph inside an accent
61
+ button turns accent-ink with the label and follows every accent and theme
62
+ switch with no extra rule.
63
+
64
+ ```html
65
+ <svg class="axi-icon"><use href="node_modules/@axiapps/axi-design/dist/icons/sprite.svg#axi-search"/></svg>
66
+ ```
67
+
68
+ **One caveat, and it matters for Electron.** A `<use>` pointing into a separate
69
+ file is a cross-document reference, and those are same-origin: over `http(s)`
70
+ from your own origin it works and the glyph inherits `currentColor` (measured in
71
+ Chromium 150). Under `file://` — which is how an Electron window opened with
72
+ `loadFile()` runs — the reference resolves to nothing and the icon is silently
73
+ absent, no error, no fallback. In that case do one of two things: inline
74
+ `dist/icons/sprite.svg` into the document once (a hidden `<svg>` before
75
+ `</body>`, which is what this project's own docs site does) and reference bare
76
+ fragments like `#axi-search`, or use the standalone `dist/icons/<name>.svg`
77
+ files. Serving the renderer over `http://localhost` also works.
78
+
79
+ One sprite holds the set; `dist/icons/<name>.svg` is the same drawing on its own,
80
+ and `dist/icons/icons.json` is the catalogue — name, categories, aliases and
81
+ keywords — for an app that wants to build a picker. Size a glyph with
82
+ `--axi-icon-size`. The vocabulary derives from [Lucide](https://lucide.dev)
83
+ under the ISC licence (`icons/LICENSE-LUCIDE`); none of the path data does.
84
+ Browse the set at [`/icons/`](https://darkharasho.github.io/axi-design/icons/).
85
+
56
86
  ### A different look, without carrying one
57
87
 
58
88
  If the flat dark ground is not what your app wants, import a theme beside the
@@ -67,13 +97,16 @@ import '@axiapps/axi-design/themes/glass.css'
67
97
  <html data-axi-theme="glass">
68
98
  ```
69
99
 
70
- `glass` keeps the outline, the hard block and every ink exactly as they are,
71
- and repaints the surface layer: translucent panels over a colder ground, with
72
- popovers, drawers and modals blurring what sits behind them. Remove the
73
- attribute and you are back on the main theme with no other change — a theme
74
- restates tokens and never adds a component, so nothing in your markup knows
75
- which one is on. That is the point: the look is maintained here rather than
76
- copied into your app as a custom theme that then has to be kept in step.
100
+ `glass` repaints the material: translucent panels lit from the top-left over a
101
+ near-black page with three wide colour washes on it, hairline edges, rounded
102
+ corners and a soft drop instead of the main theme's hard offset block, with
103
+ popovers, drawers and modals blurring what sits behind them. The five saturated
104
+ inks, the measure and the type are untouched — they are the language, not the
105
+ paint. Remove the attribute and you are back on the main theme with no other
106
+ change: a theme restates tokens and never adds a component, so nothing in your
107
+ markup knows which one is on. That is the point — the look is maintained here
108
+ rather than copied into your app as a custom theme that then has to be kept in
109
+ step.
77
110
 
78
111
  The main theme is the language and a theme is a repaint of it — [the
79
112
  rules](docs/RULES.md#themes) say what a theme may and may not do.
@@ -122,6 +155,7 @@ not "what does the system look like". Everything else is
122
155
  | `--axi-tick-h` | the height of an `.axi-ticks` strip, and so of every mark in it | `15px` | `<div class="axi-ticks" style="--axi-tick-h: 22px">` |
123
156
  | `--axi-ticks-gap` | the gap between marks in `.axi-ticks` | `3px` | `<div class="axi-ticks" style="--axi-ticks-gap: 2px">` |
124
157
  | `--axi-spinner-size` | the size of an `.axi-spinner` | `20px` | `<span class="axi-spinner" style="--axi-spinner-size: 34px"></span>` |
158
+ | `--axi-icon-size` | an `.axi-icon`'s box, both dimensions | `1.25em` | `<svg class="axi-icon" style="--axi-icon-size: 2rem"><use href="#axi-search"/></svg>` |
125
159
  <!-- /axi:knobs -->
126
160
 
127
161
  `--axi-page-pad: 0` is the one to know about: it is how a measure nested
package/dist/axi.css CHANGED
@@ -16,6 +16,20 @@
16
16
  :root {
17
17
  /* --- surface & text --- */
18
18
  --axi-ground: #15181d; /* the page itself */
19
+ /* An image layer painted over the ground colour, on the page and nowhere
20
+ else. The second toll the Themes section describes, and it exists for the
21
+ same reason --axi-surface-filter does: a glass theme wants the page lit
22
+ from a few directions, and it does not get to introduce a gradient any
23
+ more than it got to introduce a blur. Declared here inert (`none`), read
24
+ unconditionally by body, and restated by the theme.
25
+
26
+ Why a second token rather than letting a theme put the gradient in
27
+ --axi-ground itself: --axi-ground is read as `background-color` by the
28
+ plot and the select, where an image value is invalid and drops out, and
29
+ as the flat fill of the masthead, the tooltip row and a dozen inset
30
+ shapes, where a page-positioned radial would render as an arbitrary
31
+ wedge of colour. The ground stays a colour. This is the page's light. */
32
+ --axi-ground-image: none;
19
33
  --axi-surface: #222731; /* a panel raised off the page */
20
34
  --axi-surface-raised: #2b313d; /* a chip or popover raised off a panel */
21
35
  --axi-ink-line: #0c0e12; /* the outline every raised element is drawn with */
@@ -143,7 +157,13 @@ html { color-scheme: dark; }
143
157
 
144
158
  body {
145
159
  margin: 0;
146
- background: var(--axi-ground);
160
+ /* Longhands rather than the shorthand: the ground is a colour and the light
161
+ over it is an image, and `background:` would make setting either one
162
+ reset the other. Fixed so a theme's light stays put as the page scrolls
163
+ instead of stretching to the document's height. */
164
+ background-color: var(--axi-ground);
165
+ background-image: var(--axi-ground-image);
166
+ background-attachment: fixed;
147
167
  color: var(--axi-text);
148
168
  font: var(--axi-t-body);
149
169
  -webkit-font-smoothing: antialiased;
@@ -648,6 +668,21 @@ a { color: inherit; }
648
668
  and a broken source is visible rather than silently blank. */
649
669
  .axi-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }
650
670
 
671
+ /* ---------- icon ---------- */
672
+
673
+ /* Rule 12's glyphs, sized and positioned - and nothing else. The drawing
674
+ brings its own stroke and its 24 canvas; the ink is inherited, because an
675
+ icon is whatever colour the thing it sits in is written in. `flex: none`
676
+ is load-bearing rather than defensive: the commonest placement in the set
677
+ is beside a label inside a button, which is a flex container, and an em
678
+ width alone gets shrunk there. */
679
+ .axi-icon {
680
+ width: var(--axi-icon-size, 1.25em);
681
+ height: var(--axi-icon-size, 1.25em);
682
+ flex: none;
683
+ vertical-align: -0.2em;
684
+ }
685
+
651
686
  /* --- forms.css --- */
652
687
  /* axi design language - forms.
653
688
  Real inputs, styled. Every control here is an actual <input> or <textarea>
package/dist/icons/arrow-down.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M12 3.5 L12 19.5"/>
3
+ <path d="M6 13.5 L12 19.5 L18 13.5"/>
4
+ </svg>
package/dist/icons/arrow-left.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M20.5 12 L4.5 12"/>
3
+ <path d="M10.5 6 L4.5 12 L10.5 18"/>
4
+ </svg>
package/dist/icons/arrow-right.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M3.5 12 L19.5 12"/>
3
+ <path d="M13.5 6 L19.5 12 L13.5 18"/>
4
+ </svg>
package/dist/icons/arrow-up.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M12 20.5 L12 4.5"/>
3
+ <path d="M6 10.5 L12 4.5 L18 10.5"/>
4
+ </svg>
package/dist/icons/calendar.svg ADDED
@@ -0,0 +1,6 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M3.5 5.5 L20.5 5.5 L20.5 20.5 L3.5 20.5 Z"/>
3
+ <path d="M3.5 10.5 L20.5 10.5"/>
4
+ <path d="M8.5 2.5 L8.5 7.5"/>
5
+ <path d="M15.5 2.5 L15.5 7.5"/>
6
+ </svg>
package/dist/icons/check-check.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M1.5 12.5 L6.5 17.5 L15.5 8.5"/>
3
+ <path d="M9.5 15.5 L11.5 17.5 L21.5 7.5"/>
4
+ </svg>
package/dist/icons/check.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M3.5 12.5 L9.5 18.5 L20.5 7.5"/>
3
+ </svg>
package/dist/icons/chevron-down.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M5.5 9 L12 15.5 L18.5 9"/>
3
+ </svg>
package/dist/icons/chevron-left.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M15 5.5 L8.5 12 L15 18.5"/>
3
+ </svg>
package/dist/icons/chevron-right.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M9 5.5 L15.5 12 L9 18.5"/>
3
+ </svg>
package/dist/icons/chevron-up.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M5.5 15 L12 8.5 L18.5 15"/>
3
+ </svg>
package/dist/icons/circle-alert.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M8.5 1.5 L15.5 1.5 L22.5 8.5 L22.5 15.5 L15.5 22.5 L8.5 22.5 L1.5 15.5 L1.5 8.5 Z"/>
3
+ <path d="M12 6.5 L12 13.5"/>
4
+ <path d="M12 16.5 L12 18"/>
5
+ </svg>
package/dist/icons/circle-check.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M8.5 1.5 L15.5 1.5 L22.5 8.5 L22.5 15.5 L15.5 22.5 L8.5 22.5 L1.5 15.5 L1.5 8.5 Z"/>
3
+ <path d="M7 12 L10.5 15.5 L17 9"/>
4
+ </svg>
package/dist/icons/circle-x.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M8.5 1.5 L15.5 1.5 L22.5 8.5 L22.5 15.5 L15.5 22.5 L8.5 22.5 L1.5 15.5 L1.5 8.5 Z"/>
3
+ <path d="M8 8 L16 16"/>
4
+ <path d="M16 8 L8 16"/>
5
+ </svg>
package/dist/icons/clock.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M3.5 3.5 L20.5 3.5 L20.5 20.5 L3.5 20.5 Z"/>
3
+ <path d="M12 7.5 L12 12 L16.5 12"/>
4
+ </svg>
package/dist/icons/copy.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M8.5 8.5 L20.5 8.5 L20.5 20.5 L8.5 20.5 Z"/>
3
+ <path d="M15.5 5.5 L15.5 3.5 L3.5 3.5 L3.5 15.5 L5.5 15.5"/>
4
+ </svg>
package/dist/icons/download.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M12 2.5 L12 14.5"/>
3
+ <path d="M6.5 9 L12 14.5 L17.5 9"/>
4
+ <path d="M3.5 18.5 L3.5 21.5 L20.5 21.5 L20.5 18.5"/>
5
+ </svg>
package/dist/icons/external-link.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M12.5 4.5 L3.5 4.5 L3.5 20.5 L19.5 20.5 L19.5 11.5"/>
3
+ <path d="M11.5 12.5 L20.5 3.5"/>
4
+ <path d="M13.5 3.5 L20.5 3.5 L20.5 10.5"/>
5
+ </svg>
package/dist/icons/eye.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M2.5 12 L8 6.5 L16 6.5 L21.5 12 L16 17.5 L8 17.5 Z"/>
3
+ <path d="M12 9 L15 12 L12 15 L9 12 Z"/>
4
+ </svg>
package/dist/icons/file-text.svg ADDED
@@ -0,0 +1,6 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M5.5 2.5 L14.5 2.5 L19.5 7.5 L19.5 21.5 L5.5 21.5 Z"/>
3
+ <path d="M14.5 2.5 L14.5 7.5 L19.5 7.5"/>
4
+ <path d="M8.5 12.5 L15.5 12.5"/>
5
+ <path d="M8.5 16.5 L15.5 16.5"/>
6
+ </svg>
package/dist/icons/file.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M5.5 2.5 L14.5 2.5 L19.5 7.5 L19.5 21.5 L5.5 21.5 Z"/>
3
+ <path d="M14.5 2.5 L14.5 7.5 L19.5 7.5"/>
4
+ </svg>
package/dist/icons/filter.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M2.5 4.5 L21.5 4.5 L13.5 12.5 L13.5 19.5 L10.5 19.5 L10.5 12.5 Z"/>
3
+ </svg>
package/dist/icons/folder-open.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M2.5 20.5 L2.5 4.5 L8.5 4.5 L11.5 7.5 L19.5 7.5 L19.5 12.5"/>
3
+ <path d="M10.5 12.5 L22.5 12.5 L14.5 20.5 L2.5 20.5 Z"/>
4
+ </svg>
package/dist/icons/folder.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
2
+ <path d="M2.5 20.5 L2.5 4.5 L8.5 4.5 L11.5 7.5 L21.5 7.5 L21.5 20.5 Z"/>
3
+ </svg>