@axiapps/axi-design 1.13.0 → 1.15.0

package/README.md

@@ -53,6 +53,43 @@ site](https://darkharasho.github.io/axi-design/) for every component, with live
 accent and theme switchers in the masthead. `/gallery/` still holds the
 everything-at-once view.
 
+### An icon set of its own
+
+Fifty-seven glyphs drawn to [rule 12](docs/RULES.md) — a 24 canvas, a 3px
+stroke, mitered joins, square corners, and no angle that is not 0°, 45° or 90°.
+They take their ink from whatever they sit in, so a glyph inside an accent
+button turns accent-ink with the label and follows every accent and theme
+switch with no extra rule.
+
+```html
+<svg class="axi-icon"><use href="node_modules/@axiapps/axi-design/dist/icons/sprite.svg#axi-search"/></svg>
+```
+
+**One caveat, and it matters for Electron.** A `<use>` pointing into a separate
+file is a cross-document reference, and those are same-origin: over `http(s)`
+from your own origin it works and the glyph inherits `currentColor` (measured in
+Chromium 150). Under `file://` — which is how an Electron window opened with
+`loadFile()` runs — the reference resolves to nothing and the icon is silently
+absent, no error, no fallback. In that case do one of two things: inline
+`dist/icons/sprite.svg` into the document once (a hidden `<svg>` before
+`</body>`, which is what this project's own docs site does) and reference bare
+fragments like `#axi-search`, or use the standalone `dist/icons/<name>.svg`
+files. Serving the renderer over `http://localhost` also works. Note that
+alias names resolve only through the sprite — there is no
+`dist/icons/triangle-alert.svg` — so the standalone-file route wants the
+canonical name.
+
+One sprite holds the set; `dist/icons/<name>.svg` is the same drawing on its own,
+and `dist/icons/icons.json` is the catalogue — name, categories, aliases and
+keywords — for an app that wants to build a picker. A Lucide name this set
+answers to under a different one — `triangle-alert`, `alert-circle`, `loader-2` —
+resolves in the sprite too, so porting off `lucide-react` is a rename rather than
+a call-site audit. Where the set will not draw a shape at all, the
+[icons page](https://darkharasho.github.io/axi-design/icons/#substitutions) says
+what to use instead. Size a glyph with `--axi-icon-size`. The vocabulary derives from [Lucide](https://lucide.dev)
+under the ISC licence (`icons/LICENSE-LUCIDE`); none of the path data does.
+Browse the set at [`/icons/`](https://darkharasho.github.io/axi-design/icons/).
+
 ### A different look, without carrying one
 
 If the flat dark ground is not what your app wants, import a theme beside the
@@ -125,6 +162,7 @@ not "what does the system look like". Everything else is
 | `--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">` |
 | `--axi-ticks-gap` | the gap between marks in `.axi-ticks` | `3px` | `<div class="axi-ticks" style="--axi-ticks-gap: 2px">` |
 | `--axi-spinner-size` | the size of an `.axi-spinner` | `20px` | `<span class="axi-spinner" style="--axi-spinner-size: 34px"></span>` |
+| `--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>` |
 <!-- /axi:knobs -->
 
 `--axi-page-pad: 0` is the one to know about: it is how a measure nested

package/dist/axi.css

@@ -668,6 +668,21 @@ a { color: inherit; }
    and a broken source is visible rather than silently blank. */
 .axi-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }
 
+/* ---------- icon ---------- */
+
+/* Rule 12's glyphs, sized and positioned - and nothing else. The drawing
+   brings its own stroke and its 24 canvas; the ink is inherited, because an
+   icon is whatever colour the thing it sits in is written in. `flex: none`
+   is load-bearing rather than defensive: the commonest placement in the set
+   is beside a label inside a button, which is a flex container, and an em
+   width alone gets shrunk there. */
+.axi-icon {
+  width: var(--axi-icon-size, 1.25em);
+  height: var(--axi-icon-size, 1.25em);
+  flex: none;
+  vertical-align: -0.2em;
+}
+
 /* --- forms.css --- */
 /* axi design language - forms.
    Real inputs, styled. Every control here is an actual <input> or <textarea>

package/dist/icons/activity.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M2.5 12 L6 12 L9.5 15.5 L15.5 9.5 L18 12 L21.5 12"/>
+</svg>

package/dist/icons/arrow-down.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M12 3.5 L12 19.5"/>
+  <path d="M6 13.5 L12 19.5 L18 13.5"/>
+</svg>

package/dist/icons/arrow-left.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M20.5 12 L4.5 12"/>
+  <path d="M10.5 6 L4.5 12 L10.5 18"/>
+</svg>

package/dist/icons/arrow-right.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M3.5 12 L19.5 12"/>
+  <path d="M13.5 6 L19.5 12 L13.5 18"/>
+</svg>

package/dist/icons/arrow-up.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M12 20.5 L12 4.5"/>
+  <path d="M6 10.5 L12 4.5 L18 10.5"/>
+</svg>

package/dist/icons/calendar.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M3.5 5.5 L20.5 5.5 L20.5 20.5 L3.5 20.5 Z"/>
+  <path d="M3.5 10.5 L20.5 10.5"/>
+  <path d="M8.5 2.5 L8.5 7.5"/>
+  <path d="M15.5 2.5 L15.5 7.5"/>
+</svg>

package/dist/icons/check-check.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M1.5 12.5 L6.5 17.5 L15.5 8.5"/>
+  <path d="M9.5 15.5 L11.5 17.5 L21.5 7.5"/>
+</svg>

package/dist/icons/check.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M3.5 12.5 L9.5 18.5 L20.5 7.5"/>
+</svg>

package/dist/icons/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M5.5 9 L12 15.5 L18.5 9"/>
+</svg>

package/dist/icons/chevron-left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M15 5.5 L8.5 12 L15 18.5"/>
+</svg>

package/dist/icons/chevron-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M9 5.5 L15.5 12 L9 18.5"/>
+</svg>

package/dist/icons/chevron-up.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M5.5 15 L12 8.5 L18.5 15"/>
+</svg>

package/dist/icons/circle-alert.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<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"/>
+  <path d="M12 6.5 L12 13.5"/>
+  <path d="M12 16.5 L12 18"/>
+</svg>

package/dist/icons/circle-check.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<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"/>
+  <path d="M7 12 L10.5 15.5 L17 9"/>
+</svg>

package/dist/icons/circle-help.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<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"/>
+  <path d="M7 9 L8.5 7.5 L14.5 7.5 L14.5 11.5 L12 11.5 L12 14.5"/>
+  <path d="M12 17.5 L12 19"/>
+</svg>

package/dist/icons/circle-x.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<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"/>
+  <path d="M8 8 L16 16"/>
+  <path d="M16 8 L8 16"/>
+</svg>

package/dist/icons/clock.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M3.5 3.5 L20.5 3.5 L20.5 20.5 L3.5 20.5 Z"/>
+  <path d="M12 7.5 L12 12 L16.5 12"/>
+</svg>

package/dist/icons/copy.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M8.5 8.5 L20.5 8.5 L20.5 20.5 L8.5 20.5 Z"/>
+  <path d="M15.5 5.5 L15.5 3.5 L3.5 3.5 L3.5 15.5 L5.5 15.5"/>
+</svg>

package/dist/icons/crown.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M3.5 8.5 L7.5 12.5 L12 8 L16.5 12.5 L20.5 8.5 L20.5 17.5 L3.5 17.5 Z"/>
+</svg>

package/dist/icons/download.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M12 2.5 L12 14.5"/>
+  <path d="M6.5 9 L12 14.5 L17.5 9"/>
+  <path d="M3.5 18.5 L3.5 21.5 L20.5 21.5 L20.5 18.5"/>
+</svg>

package/dist/icons/external-link.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M12.5 4.5 L3.5 4.5 L3.5 20.5 L19.5 20.5 L19.5 11.5"/>
+  <path d="M11.5 12.5 L20.5 3.5"/>
+  <path d="M13.5 3.5 L20.5 3.5 L20.5 10.5"/>
+</svg>

package/dist/icons/eye.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M2.5 12 L8 6.5 L16 6.5 L21.5 12 L16 17.5 L8 17.5 Z"/>
+  <path d="M12 9 L15 12 L12 15 L9 12 Z"/>
+</svg>

package/dist/icons/file-text.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M5.5 2.5 L14.5 2.5 L19.5 7.5 L19.5 21.5 L5.5 21.5 Z"/>
+  <path d="M14.5 2.5 L14.5 7.5 L19.5 7.5"/>
+  <path d="M8.5 12.5 L15.5 12.5"/>
+  <path d="M8.5 16.5 L15.5 16.5"/>
+</svg>

package/dist/icons/file.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M5.5 2.5 L14.5 2.5 L19.5 7.5 L19.5 21.5 L5.5 21.5 Z"/>
+  <path d="M14.5 2.5 L14.5 7.5 L19.5 7.5"/>
+</svg>

package/dist/icons/filter.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M4.5 4.5 L19.5 4.5 L13.5 10.5 L13.5 19.5 L10.5 19.5 L10.5 10.5 Z"/>
+</svg>

package/dist/icons/folder-open.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M3.5 18.5 L3.5 4.5 L8.5 4.5 L11.5 7.5 L19.5 7.5 L19.5 11.5"/>
+  <path d="M11.5 11.5 L19.5 11.5 L12.5 18.5 L4.5 18.5 Z"/>
+</svg>

package/dist/icons/folder.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<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"/>
+</svg>