@lovince/icons 1.0.0

package/dist/paths.d.ts

@@ -0,0 +1,70 @@
+/**
+ * One family, one grid.
+ *
+ * 24x24 canvas · 2px centred stroke · round caps and joins · geometry kept
+ * simple enough to stay legible at 16px. Every glyph is drawn on the same
+ * optical weight so they sit together without one shouting.
+ *
+ * Paths only — no `<svg>` wrapper, no colour, no size. The renderer supplies
+ * those, which is what lets one definition serve every size and weight.
+ */
+export declare const paths: {
+    readonly arrowRight: readonly ["M4 12h15", "m13 6 6 6-6 6"];
+    readonly arrowLeft: readonly ["M20 12H5", "m11 6-6 6 6 6"];
+    readonly arrowUp: readonly ["M12 20V5", "m6 11 6-6 6 6"];
+    readonly arrowDown: readonly ["M12 4v15", "m6 13 6 6 6-6"];
+    readonly chevronRight: readonly ["m9 6 6 6-6 6"];
+    readonly chevronLeft: readonly ["m15 6-6 6 6 6"];
+    readonly chevronUp: readonly ["m6 15 6-6 6 6"];
+    readonly chevronDown: readonly ["m6 9 6 6 6-6"];
+    readonly close: readonly ["m6 6 12 12", "m18 6-12 12"];
+    readonly menu: readonly ["M4 7h16", "M4 12h16", "M4 17h16"];
+    readonly external: readonly ["M14 4h6v6", "M20 4 11 13", "M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"];
+    readonly start: readonly ["M9.5 7.5v9l7-4.5z", "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z"];
+    readonly skip: readonly ["m6 6 7 6-7 6", "M18 5v14"];
+    readonly complete: readonly ["m5 12.5 4.5 4.5L19 7.5"];
+    readonly target: readonly ["M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z", "M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z", "M12 11.25a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"];
+    readonly spark: readonly ["M12 3.5 13.9 9l5.6 1.9-5.6 1.9L12 18.5l-1.9-5.7L4.5 10.9 10.1 9Z", "M18.5 4v3", "M20 5.5h-3"];
+    readonly pause: readonly ["M9.5 5v14", "M14.5 5v14"];
+    readonly restart: readonly ["M20 12a8 8 0 1 1-2.6-5.9", "M20 4v5h-5"];
+    readonly success: readonly ["M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z", "m8.25 12.25 2.5 2.5 5-5.5"];
+    readonly warning: readonly ["M10.6 4.3 2.9 17.5A1.6 1.6 0 0 0 4.3 20h15.4a1.6 1.6 0 0 0 1.4-2.5L13.4 4.3a1.6 1.6 0 0 0-2.8 0Z", "M12 9.5v4", "M12 16.75h.01"];
+    readonly info: readonly ["M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z", "M12 11v5", "M12 8h.01"];
+    readonly error: readonly ["M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z", "m9 9 6 6", "m15 9-6 6"];
+    readonly welcome: readonly ["M4 11.5 12 4l8 7.5", "M6.5 10.2V19a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-8.8", "M9.5 20v-4.5a2.5 2.5 0 0 1 5 0V20"];
+    readonly discover: readonly ["M11 4.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z", "m20 20-4.4-4.4", "M11 8.5v5", "M8.5 11h5"];
+    readonly click: readonly ["M9 4.5v3", "M4.5 9h3", "M6.2 6.2 8 8", "m11 11 8.5 3.2-3.6 1.4-1.4 3.6z"];
+    readonly swipe: readonly ["M7 12h10", "m10 9-3 3 3 3", "m14 9 3 3-3 3", "M12 4v2", "M12 18v2"];
+    readonly drag: readonly ["M9 6.5h.01", "M15 6.5h.01", "M9 12h.01", "M15 12h.01", "M9 17.5h.01", "M15 17.5h.01"];
+    readonly scroll: readonly ["M12 5.5a3.5 3.5 0 0 0-3.5 3.5v6a3.5 3.5 0 0 0 7 0V9A3.5 3.5 0 0 0 12 5.5Z", "M12 9v2.5"];
+    readonly tip: readonly ["M9 18h6", "M10 21h4", "M12 3a6 6 0 0 0-3.5 10.9c.6.4 1 1 1 1.6v.5h5v-.5c0-.6.4-1.2 1-1.6A6 6 0 0 0 12 3Z"];
+    readonly help: readonly ["M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z", "M9.6 9.5a2.5 2.5 0 1 1 3.3 2.4c-.6.2-.9.8-.9 1.4v.4", "M12 16.5h.01"];
+    readonly shortcut: readonly ["M6 8.5a2.5 2.5 0 1 1 2.5 2.5H6z", "M8.5 13H6v2.5A2.5 2.5 0 1 0 8.5 13Z", "M15.5 11H18V8.5A2.5 2.5 0 1 0 15.5 11Z", "M15.5 13a2.5 2.5 0 1 0 2.5 2.5V13z"];
+    readonly newFeature: readonly ["M12 3.5 13.6 9l5.4 1.8-5.4 1.8L12 18l-1.6-5.4L5 10.8 10.4 9Z", "M18.5 15v3.5", "M20.25 16.75h-3.5"];
+    readonly home: readonly ["M3 10.4 12 3l9 7.4", "M5.5 9.2V20a1 1 0 0 0 1 1H10v-6h4v6h3.5a1 1 0 0 0 1-1V9.2"];
+    readonly search: readonly ["M11 4.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z", "m20 20-4.4-4.4"];
+    readonly install: readonly ["M12 3v11", "m7.5 10 4.5 4 4.5-4", "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"];
+    readonly book: readonly ["M4 4.5h5a3 3 0 0 1 3 3V20a2.5 2.5 0 0 0-2.5-2.5H4Z", "M20 4.5h-5a3 3 0 0 0-3 3V20a2.5 2.5 0 0 1 2.5-2.5H20Z"];
+    readonly code: readonly ["m8.5 7-5 5 5 5", "m15.5 7 5 5-5 5", "m13.5 4-3 16"];
+    readonly palette: readonly ["M12 3a9 9 0 0 0 0 18 2 2 0 0 0 1.6-3.2 2 2 0 0 1 1.6-3.2H18a3 3 0 0 0 3-3 9 9 0 0 0-9-8.6Z", "M7.5 12.5h.01", "M9.5 8h.01", "M14 7h.01", "M17 10h.01"];
+    readonly shield: readonly ["M12 3l7.5 3v6c0 4.4-3 8.1-7.5 9.4C7.5 20.1 4.5 16.4 4.5 12V6Z", "m9 12 2.2 2.2L15.5 10"];
+    readonly accessibility: readonly ["M12 3.2a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8Z", "M4.5 8.4 12 9.8l7.5-1.4", "M12 9.8v4.4", "m9 20.4 3-6.2 3 6.2"];
+    readonly sun: readonly ["M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z", "M12 2.5v2", "M12 19.5v2", "M4.6 4.6 6 6", "M18 18l1.4 1.4", "M2.5 12h2", "M19.5 12h2", "M4.6 19.4 6 18", "M18 6l1.4-1.4"];
+    readonly moon: readonly ["M20 14.2A8.2 8.2 0 0 1 9.8 4 8.4 8.4 0 1 0 20 14.2Z"];
+    readonly monitor: readonly ["M4 5h16a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z", "M9 20h6", "M12 16v4"];
+    readonly plus: readonly ["M12 5v14", "M5 12h14"];
+    readonly minus: readonly ["M5 12h14"];
+    readonly copy: readonly ["M9 9h9a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1Z", "M5 15H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v1"];
+    readonly settings: readonly ["M12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Z", "M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1v.3a2 2 0 1 1-4 0v-.2a1.6 1.6 0 0 0-2.8-1.1l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.6 1.6 0 0 0 3.5 15H3a2 2 0 1 1 0-4h.2a1.6 1.6 0 0 0 1.1-2.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.6 1.6 0 0 0 10 4.5V4a2 2 0 1 1 4 0v.2a1.6 1.6 0 0 0 2.8 1.1l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0 1.1 2.8h.3a2 2 0 1 1 0 4h-.2a1.6 1.6 0 0 0-1.4.9Z"];
+};
+export type IconName = keyof typeof paths;
+export declare const iconNames: IconName[];
+/** Grouped for documentation and pickers; every name appears exactly once. */
+export declare const iconGroups: {
+    readonly navigation: readonly ["arrowRight", "arrowLeft", "arrowUp", "arrowDown", "chevronRight", "chevronLeft", "chevronUp", "chevronDown", "close", "menu", "external"];
+    readonly journey: readonly ["start", "skip", "complete", "target", "spark", "pause", "restart"];
+    readonly status: readonly ["success", "warning", "info", "error"];
+    readonly onboarding: readonly ["welcome", "discover", "click", "swipe", "drag", "scroll", "tip", "help", "shortcut", "newFeature"];
+    readonly interface: readonly ["home", "search", "install", "book", "code", "palette", "shield", "accessibility", "sun", "moon", "monitor", "plus", "minus", "copy", "settings"];
+};
+export declare const isIconName: (value: unknown) => value is IconName;

package/dist/paths.js

@@ -0,0 +1,215 @@
+//#region src/paths.ts
+var e = {
+	arrowRight: ["M4 12h15", "m13 6 6 6-6 6"],
+	arrowLeft: ["M20 12H5", "m11 6-6 6 6 6"],
+	arrowUp: ["M12 20V5", "m6 11 6-6 6 6"],
+	arrowDown: ["M12 4v15", "m6 13 6 6 6-6"],
+	chevronRight: ["m9 6 6 6-6 6"],
+	chevronLeft: ["m15 6-6 6 6 6"],
+	chevronUp: ["m6 15 6-6 6 6"],
+	chevronDown: ["m6 9 6 6 6-6"],
+	close: ["m6 6 12 12", "m18 6-12 12"],
+	menu: [
+		"M4 7h16",
+		"M4 12h16",
+		"M4 17h16"
+	],
+	external: [
+		"M14 4h6v6",
+		"M20 4 11 13",
+		"M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"
+	],
+	start: ["M9.5 7.5v9l7-4.5z", "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z"],
+	skip: ["m6 6 7 6-7 6", "M18 5v14"],
+	complete: ["m5 12.5 4.5 4.5L19 7.5"],
+	target: [
+		"M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
+		"M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z",
+		"M12 11.25a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"
+	],
+	spark: [
+		"M12 3.5 13.9 9l5.6 1.9-5.6 1.9L12 18.5l-1.9-5.7L4.5 10.9 10.1 9Z",
+		"M18.5 4v3",
+		"M20 5.5h-3"
+	],
+	pause: ["M9.5 5v14", "M14.5 5v14"],
+	restart: ["M20 12a8 8 0 1 1-2.6-5.9", "M20 4v5h-5"],
+	success: ["M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z", "m8.25 12.25 2.5 2.5 5-5.5"],
+	warning: [
+		"M10.6 4.3 2.9 17.5A1.6 1.6 0 0 0 4.3 20h15.4a1.6 1.6 0 0 0 1.4-2.5L13.4 4.3a1.6 1.6 0 0 0-2.8 0Z",
+		"M12 9.5v4",
+		"M12 16.75h.01"
+	],
+	info: [
+		"M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
+		"M12 11v5",
+		"M12 8h.01"
+	],
+	error: [
+		"M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
+		"m9 9 6 6",
+		"m15 9-6 6"
+	],
+	welcome: [
+		"M4 11.5 12 4l8 7.5",
+		"M6.5 10.2V19a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-8.8",
+		"M9.5 20v-4.5a2.5 2.5 0 0 1 5 0V20"
+	],
+	discover: [
+		"M11 4.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z",
+		"m20 20-4.4-4.4",
+		"M11 8.5v5",
+		"M8.5 11h5"
+	],
+	click: [
+		"M9 4.5v3",
+		"M4.5 9h3",
+		"M6.2 6.2 8 8",
+		"m11 11 8.5 3.2-3.6 1.4-1.4 3.6z"
+	],
+	swipe: [
+		"M7 12h10",
+		"m10 9-3 3 3 3",
+		"m14 9 3 3-3 3",
+		"M12 4v2",
+		"M12 18v2"
+	],
+	drag: [
+		"M9 6.5h.01",
+		"M15 6.5h.01",
+		"M9 12h.01",
+		"M15 12h.01",
+		"M9 17.5h.01",
+		"M15 17.5h.01"
+	],
+	scroll: ["M12 5.5a3.5 3.5 0 0 0-3.5 3.5v6a3.5 3.5 0 0 0 7 0V9A3.5 3.5 0 0 0 12 5.5Z", "M12 9v2.5"],
+	tip: [
+		"M9 18h6",
+		"M10 21h4",
+		"M12 3a6 6 0 0 0-3.5 10.9c.6.4 1 1 1 1.6v.5h5v-.5c0-.6.4-1.2 1-1.6A6 6 0 0 0 12 3Z"
+	],
+	help: [
+		"M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
+		"M9.6 9.5a2.5 2.5 0 1 1 3.3 2.4c-.6.2-.9.8-.9 1.4v.4",
+		"M12 16.5h.01"
+	],
+	shortcut: [
+		"M6 8.5a2.5 2.5 0 1 1 2.5 2.5H6z",
+		"M8.5 13H6v2.5A2.5 2.5 0 1 0 8.5 13Z",
+		"M15.5 11H18V8.5A2.5 2.5 0 1 0 15.5 11Z",
+		"M15.5 13a2.5 2.5 0 1 0 2.5 2.5V13z"
+	],
+	newFeature: [
+		"M12 3.5 13.6 9l5.4 1.8-5.4 1.8L12 18l-1.6-5.4L5 10.8 10.4 9Z",
+		"M18.5 15v3.5",
+		"M20.25 16.75h-3.5"
+	],
+	home: ["M3 10.4 12 3l9 7.4", "M5.5 9.2V20a1 1 0 0 0 1 1H10v-6h4v6h3.5a1 1 0 0 0 1-1V9.2"],
+	search: ["M11 4.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z", "m20 20-4.4-4.4"],
+	install: [
+		"M12 3v11",
+		"m7.5 10 4.5 4 4.5-4",
+		"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"
+	],
+	book: ["M4 4.5h5a3 3 0 0 1 3 3V20a2.5 2.5 0 0 0-2.5-2.5H4Z", "M20 4.5h-5a3 3 0 0 0-3 3V20a2.5 2.5 0 0 1 2.5-2.5H20Z"],
+	code: [
+		"m8.5 7-5 5 5 5",
+		"m15.5 7 5 5-5 5",
+		"m13.5 4-3 16"
+	],
+	palette: [
+		"M12 3a9 9 0 0 0 0 18 2 2 0 0 0 1.6-3.2 2 2 0 0 1 1.6-3.2H18a3 3 0 0 0 3-3 9 9 0 0 0-9-8.6Z",
+		"M7.5 12.5h.01",
+		"M9.5 8h.01",
+		"M14 7h.01",
+		"M17 10h.01"
+	],
+	shield: ["M12 3l7.5 3v6c0 4.4-3 8.1-7.5 9.4C7.5 20.1 4.5 16.4 4.5 12V6Z", "m9 12 2.2 2.2L15.5 10"],
+	accessibility: [
+		"M12 3.2a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8Z",
+		"M4.5 8.4 12 9.8l7.5-1.4",
+		"M12 9.8v4.4",
+		"m9 20.4 3-6.2 3 6.2"
+	],
+	sun: [
+		"M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z",
+		"M12 2.5v2",
+		"M12 19.5v2",
+		"M4.6 4.6 6 6",
+		"M18 18l1.4 1.4",
+		"M2.5 12h2",
+		"M19.5 12h2",
+		"M4.6 19.4 6 18",
+		"M18 6l1.4-1.4"
+	],
+	moon: ["M20 14.2A8.2 8.2 0 0 1 9.8 4 8.4 8.4 0 1 0 20 14.2Z"],
+	monitor: [
+		"M4 5h16a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z",
+		"M9 20h6",
+		"M12 16v4"
+	],
+	plus: ["M12 5v14", "M5 12h14"],
+	minus: ["M5 12h14"],
+	copy: ["M9 9h9a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1Z", "M5 15H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v1"],
+	settings: ["M12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Z", "M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1v.3a2 2 0 1 1-4 0v-.2a1.6 1.6 0 0 0-2.8-1.1l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.6 1.6 0 0 0 3.5 15H3a2 2 0 1 1 0-4h.2a1.6 1.6 0 0 0 1.1-2.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.6 1.6 0 0 0 10 4.5V4a2 2 0 1 1 4 0v.2a1.6 1.6 0 0 0 2.8 1.1l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0 1.1 2.8h.3a2 2 0 1 1 0 4h-.2a1.6 1.6 0 0 0-1.4.9Z"]
+}, t = Object.keys(e), n = {
+	navigation: [
+		"arrowRight",
+		"arrowLeft",
+		"arrowUp",
+		"arrowDown",
+		"chevronRight",
+		"chevronLeft",
+		"chevronUp",
+		"chevronDown",
+		"close",
+		"menu",
+		"external"
+	],
+	journey: [
+		"start",
+		"skip",
+		"complete",
+		"target",
+		"spark",
+		"pause",
+		"restart"
+	],
+	status: [
+		"success",
+		"warning",
+		"info",
+		"error"
+	],
+	onboarding: [
+		"welcome",
+		"discover",
+		"click",
+		"swipe",
+		"drag",
+		"scroll",
+		"tip",
+		"help",
+		"shortcut",
+		"newFeature"
+	],
+	interface: [
+		"home",
+		"search",
+		"install",
+		"book",
+		"code",
+		"palette",
+		"shield",
+		"accessibility",
+		"sun",
+		"moon",
+		"monitor",
+		"plus",
+		"minus",
+		"copy",
+		"settings"
+	]
+}, r = (t) => typeof t == "string" && Object.prototype.hasOwnProperty.call(e, t);
+//#endregion
+export { n as iconGroups, t as iconNames, r as isIconName, e as paths };

package/dist/render.d.ts

@@ -0,0 +1,25 @@
+import { IconName } from './paths';
+import { IconFlip } from './core/props';
+export interface RenderOptions {
+    readonly size?: number | string;
+    readonly strokeWidth?: number | string;
+    readonly absoluteStrokeWidth?: boolean;
+    readonly fill?: number | boolean;
+    readonly rotate?: number | string;
+    readonly flip?: IconFlip;
+    /** Accessible name. Omit for decorative icons beside visible text. */
+    readonly label?: string;
+    readonly class?: string;
+}
+/**
+ * SVG markup as a string. No framework, no DOM — usable in a React component,
+ * a Svelte `{@html}` block, an email template, or a server response.
+ */
+export declare const renderIcon: (name: IconName, options?: RenderOptions) => string;
+/**
+ * A live `SVGElement`. Use this where you need a node rather than a string —
+ * vanilla JS, a directive, or an imperative widget.
+ */
+export declare const createIcon: (name: IconName, options?: RenderOptions) => SVGSVGElement | null;
+/** A data URI, for `background-image` or an `<img src>`. */
+export declare const iconDataUri: (name: IconName, options?: RenderOptions) => string;

package/dist/style.css

@@ -0,0 +1,226 @@
+/* Motion for the animated icons.
+   Only needed if you use them — the static `LvIcon` and `<lv-icon>` need no CSS.
+
+   Every transition is reversible and driven by one property, so the icon reads
+   as a single object changing state rather than two icons swapping. */
+
+.lv-icon {
+  display: inline-block;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+
+/* ── Menu ⇄ Close ─────────────────────────────────────────────────────────
+   The outer bars travel to the centre, then rotate onto the diagonal. Moving
+   first and rotating second is what makes it read as folding rather than
+   spinning. The middle bar collapses along its own length instead of fading,
+   so nothing dissolves. */
+
+.lv-icon--menu .lv-icon__bar {
+  transition:
+    transform var(--lv-duration, 0.36s) var(--lv-ease, cubic-bezier(0.65, 0, 0.35, 1)),
+    opacity calc(var(--lv-duration, 0.36s) * 0.5) linear;
+  transform-origin: 12px 12px;
+}
+
+.lv-icon--menu.is-open .lv-icon__bar--top {
+  transform: translateY(5px) rotate(45deg);
+}
+
+.lv-icon--menu.is-open .lv-icon__bar--bottom {
+  transform: translateY(-5px) rotate(-45deg);
+}
+
+.lv-icon--menu.is-open .lv-icon__bar--mid {
+  transform: scaleX(0);
+  opacity: 0;
+}
+
+/* ── Plus ⇄ Close ─────────────────────────────────────────────────────────
+   A plus already is a cross; only the angle differs. One rotation, no swap. */
+
+.lv-icon--plus .lv-icon__cross {
+  transform-origin: 12px 12px;
+  transition: transform var(--lv-duration, 0.36s) var(--lv-ease, cubic-bezier(0.65, 0, 0.35, 1));
+}
+
+.lv-icon--plus.is-open .lv-icon__cross {
+  transform: rotate(45deg);
+}
+
+/* ── Checkmark ────────────────────────────────────────────────────────────
+   Drawn on with stroke-dashoffset rather than faded in: the direction of the
+   stroke is what makes it read as confirmation. The ring draws first so the
+   tick lands inside something. */
+
+.lv-icon--check .lv-icon__tick {
+  stroke-dasharray: 22;
+  stroke-dashoffset: 22;
+  transition: stroke-dashoffset var(--lv-duration, 0.28s) var(--lv-ease, cubic-bezier(0.33, 1, 0.68, 1));
+}
+
+.lv-icon--check.is-checked .lv-icon__tick {
+  stroke-dashoffset: 0;
+}
+
+.lv-icon--check .lv-icon__ring {
+  stroke-dasharray: 57;
+  stroke-dashoffset: 57;
+  transition: stroke-dashoffset calc(var(--lv-duration, 0.28s) * 1.4)
+    var(--lv-ease, cubic-bezier(0.33, 1, 0.68, 1));
+}
+
+.lv-icon--check.is-checked .lv-icon__ring {
+  stroke-dashoffset: 0;
+}
+
+/* ── Loading ──────────────────────────────────────────────────────────────
+   One continuous rotation. No pulsing or easing — a spinner that accelerates
+   reads as stuttering rather than working. */
+
+.lv-icon--loading .lv-icon__arc {
+  transform-origin: 12px 12px;
+  animation: lv-icon-spin var(--lv-duration, 0.9s) linear infinite;
+}
+
+@keyframes lv-icon-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ── Arrow ────────────────────────────────────────────────────────────────
+   Nudges on the *parent's* hover and focus, so the whole control responds as
+   one object rather than the icon reacting on its own. The shaft stretches
+   while the head travels, which is the difference between an arrow moving and
+   an arrow sliding off its own line. */
+
+.lv-icon--arrow .lv-icon__arrow-inner {
+  transform: rotate(var(--lv-rotate, 0deg));
+  transform-origin: 12px 12px;
+}
+
+.lv-icon--arrow .lv-icon__shaft,
+.lv-icon--arrow .lv-icon__head {
+  transition: transform var(--lv-duration, 0.18s) var(--lv-ease, cubic-bezier(0.33, 1, 0.68, 1));
+}
+
+:where(a, button, .lv-hover):hover .lv-icon--arrow .lv-icon__head,
+:where(a, button, .lv-hover):focus-visible .lv-icon--arrow .lv-icon__head {
+  transform: translateX(var(--lv-travel, 3px));
+}
+
+:where(a, button, .lv-hover):hover .lv-icon--arrow .lv-icon__shaft,
+:where(a, button, .lv-hover):focus-visible .lv-icon--arrow .lv-icon__shaft {
+  transform: scaleX(1.14);
+  transform-origin: 4px 12px;
+}
+
+/* ── Reduced motion ───────────────────────────────────────────────────────
+   Every icon still reaches its final state; it just gets there instantly. The
+   spinner stops rather than jumping, since a frozen frame reads as loading
+   while a jumping one reads as broken. */
+
+@media (prefers-reduced-motion: reduce) {
+  .lv-icon *,
+  .lv-icon {
+    transition-duration: 0.01ms !important;
+  }
+
+  .lv-icon--loading .lv-icon__arc {
+    animation: none;
+  }
+}
+
+/* ── Icon button ──────────────────────────────────────────────────────────
+   Visual size and interactive size are separate: the icon can be 18px while
+   the target stays at least 44px. Conflating them is the most common
+   icon-button mistake, and it is invisible until someone tries to tap it. */
+
+.lv-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--lv-target, 44px);
+  min-height: var(--lv-target, 44px);
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: 999px;
+  cursor: pointer;
+  transition:
+    background 0.18s cubic-bezier(0.33, 1, 0.68, 1),
+    transform 0.12s cubic-bezier(0.33, 1, 0.68, 1);
+}
+
+.lv-icon-button:hover {
+  background: color-mix(in srgb, currentColor 10%, transparent);
+}
+
+.lv-icon-button:active {
+  transform: scale(0.94);
+}
+
+.lv-icon-button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.lv-icon-button.is-disabled,
+.lv-icon-button:disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+
+.lv-icon-button:disabled:hover {
+  background: transparent;
+}
+
+/* ── Journey step ─────────────────────────────────────────────────────────
+   ○ → ◉ → ✓ as one shape. The ring is present in every state, so the step
+   advances rather than being replaced. Never colour alone. */
+
+.lv-icon--step .lv-icon__ring,
+.lv-icon--step .lv-icon__dot,
+.lv-icon--step .lv-icon__tick,
+.lv-icon--step .lv-icon__dash {
+  transition:
+    transform var(--lv-duration, 0.28s) var(--lv-ease, cubic-bezier(0.33, 1, 0.68, 1)),
+    opacity var(--lv-duration, 0.28s) var(--lv-ease, cubic-bezier(0.33, 1, 0.68, 1)),
+    stroke-dashoffset var(--lv-duration, 0.28s) var(--lv-ease, cubic-bezier(0.33, 1, 0.68, 1));
+  transform-origin: 12px 12px;
+}
+
+.lv-icon--step .lv-icon__dot {
+  transform: scale(0);
+  opacity: 0;
+}
+
+.lv-icon--step .lv-icon__tick {
+  stroke-dasharray: 16;
+  stroke-dashoffset: 16;
+}
+
+.lv-icon--step .lv-icon__dash {
+  transform: scaleX(0);
+  opacity: 0;
+}
+
+.lv-icon--step.is-current .lv-icon__dot {
+  transform: scale(1);
+  opacity: 1;
+}
+
+.lv-icon--step.is-complete .lv-icon__tick {
+  stroke-dashoffset: 0;
+}
+
+.lv-icon--step.is-skipped .lv-icon__ring {
+  opacity: 0.5;
+}
+
+.lv-icon--step.is-skipped .lv-icon__dash {
+  transform: scaleX(1);
+  opacity: 1;
+}

package/dist/vue.d.ts

@@ -0,0 +1,12 @@
+/** Vue 3 components. Import from `@lovince/icons/vue`. */
+export { default as LvIcon } from './LvIcon.vue';
+export { default as LvIconButton } from './LvIconButton.vue';
+export { default as LvJourneyStep } from './LvJourneyStep.vue';
+export { default as LvMenuToClose } from './animated/LvMenuToClose.vue';
+export { default as LvPlusToClose } from './animated/LvPlusToClose.vue';
+export { default as LvCheckmark } from './animated/LvCheckmark.vue';
+export { default as LvLoading } from './animated/LvLoading.vue';
+export { default as LvArrowMotion } from './animated/LvArrowMotion.vue';
+export type { IconName } from './paths';
+export type { IconContext, IconState, IconVariant } from './core/variants';
+export type { IconFlip } from './core/props';