@jannchie/icons 0.3.0 → 0.5.0

package/dist/src/letters.js

@@ -43,13 +43,13 @@ var GLYPHS = {
 	"-": "M.5 3H3"
 };
 var LABEL_GLYPHS = {
-	A: "M0 7V1L1 0H2.5L3.5 1V7M0 4H3.5",
+	A: "M0 7V1L1 0H2.5L3.5 1V7M0 3.5H3.5",
 	B: "M0 0H2.5L3.5 1V2.5L2.5 3.5L3.5 4.5V6L2.5 7H0ZM0 3.5H2.5",
 	C: "M3.5 0H1L0 1V6L1 7H3.5",
 	D: "M0 0H2L3.5 1.5V5.5L2 7H0Z",
 	E: "M3.5 0H0V7H3.5M0 3.5H2.75",
 	F: "M3.5 0H0V7M0 3.5H2.75",
-	G: "M3.5 0H1L0 1V6L1 7H3.5V4H2",
+	G: "M3.5 0H1L0 1V6L1 7H3.5V3.5H2",
 	H: "M0 0V7M3.5 0V7M0 3.5H3.5",
 	I: "M0 0H3.5M1.75 0V7M0 7H3.5",
 	J: "M3.5 0V6L2.5 7H1L0 6",
@@ -58,9 +58,9 @@ var LABEL_GLYPHS = {
 	M: "M0 7V0L1.75 2.5L3.5 0V7",
 	N: "M0 7V0L3.5 7V0",
 	O: "M1 0H2.5L3.5 1V6L2.5 7H1L0 6V1Z",
-	P: "M0 7V0H2.5L3.5 1V3L2.5 4H0",
+	P: "M0 7V0H2.5L3.5 1V2.5L2.5 3.5H0",
 	Q: "M1 0H2.5L3.5 1V6L2.5 7H1L0 6V1ZM2.25 5.25L3.5 7",
-	R: "M0 7V0H2.5L3.5 1V3L2.5 4H0M2 4L3.5 7",
+	R: "M0 7V0H2.5L3.5 1V2.5L2.5 3.5H0M2.5 3.5L3.5 4.5V7",
 	S: "M3.5 0H1L0 1V2.5L1 3.5H2.5L3.5 4.5V6L2.5 7H0",
 	T: "M0 0H3.5M1.75 0V7",
 	U: "M0 0V6L1 7H2.5L3.5 6V0",
@@ -70,8 +70,8 @@ var LABEL_GLYPHS = {
 	Y: "M0 0L1.75 3.5L3.5 0M1.75 3.5V7",
 	Z: "M0 0H3.5L0 7H3.5",
 	0: "M1 0H2.5L3.5 1V6L2.5 7H1L0 6V1Z",
-	1: "M.5 1L1.75 0V7M.5 7H3",
-	2: "M0 1L1 0H2.5L3.5 1V3L0 7H3.5",
+	1: "M1 1L2.25 0V7",
+	2: "M0 1L1 0H2.5L3.5 1V2.5L2.5 3.5H1L0 4.5V7H3.5",
 	3: "M0 0H2.5L3.5 1V2.5L2.5 3.5H1M2.5 3.5L3.5 4.5V6L2.5 7H0",
 	4: "M2.5 7V0L0 4.5H3.5",
 	5: "M3.5 0H0V3.5H2.5L3.5 4.5V6L2.5 7H0",
@@ -137,8 +137,6 @@ function snap(paths) {
 	});
 	return Array.isArray(paths) ? res : res[0];
 }
-var crispGlyph = (...args) => snap(glyph(...args));
-var glyph = (c, x, y, scale = 1, sy = scale) => place(GLYPHS[c], x, y, scale, sy);
 var NARROW = {
 	"1": {
 		advance: 2,
@@ -149,17 +147,38 @@ var NARROW = {
 		shift: .5
 	}
 };
-var advance = (c) => NARROW[c]?.advance ?? W;
-var shift = (c) => NARROW[c]?.shift ?? 0;
-var textWidth = (str, sx = 1, gap = 1.5) => [...str].reduce((w, c, i) => w + advance(c) * sx + (i ? gap : 0), 0);
-function lineAt(str, [x, y], sx = 1, gap = 1.5, sy = sx) {
+var ROUND = {
+	glyphs: GLYPHS,
+	sy: 1,
+	narrow: NARROW
+};
+var LABEL = {
+	glyphs: LABEL_GLYPHS,
+	sy: 6 / 7,
+	narrow: {
+		"1": {
+			advance: 2,
+			shift: .75
+		},
+		"-": NARROW["-"]
+	}
+};
+function glyph(c, x, y, scale = 1, sy = scale, font = ROUND) {
+	const d = font.glyphs[c];
+	return d ? place(d, x, y, scale, sy * font.sy) : place(GLYPHS[c], x, y, scale, sy);
+}
+var crispGlyph = (...args) => snap(glyph(...args));
+var advance = (c, font = ROUND) => font.narrow[c]?.advance ?? W;
+var shift = (c, font = ROUND) => font.narrow[c]?.shift ?? 0;
+var textWidth = (str, sx = 1, gap = 1.5, font = ROUND) => [...str].reduce((w, c, i) => w + advance(c, font) * sx + (i ? gap : 0), 0);
+function lineAt(str, [x, y], sx = 1, gap = 1.5, sy = sx, font = ROUND) {
 	return [...str].flatMap((c) => {
-		const d = c === " " ? [] : [glyph(c, x - (NARROW[c]?.shift ?? 0) * sx, y, sx, sy)];
-		x += advance(c) * sx + gap;
+		const d = c === " " ? [] : [glyph(c, x - shift(c, font) * sx, y, sx, sy, font)];
+		x += advance(c, font) * sx + gap;
 		return d;
 	});
 }
-var line = (str, [cx, cy], sx = 1, gap = 1.5, sy = sx) => lineAt(str, [cx - textWidth(str, sx, gap) / 2, cy - 3 * sy], sx, gap, sy);
+var line = (str, [cx, cy], sx = 1, gap = 1.5, sy = sx, font = ROUND) => lineAt(str, [cx - textWidth(str, sx, gap, font) / 2, cy - 3 * sy], sx, gap, sy, font);
 var GAP = 2.5;
 function label(text, { left, right, top }) {
 	const chars = [...text.toUpperCase()];
@@ -176,4 +195,4 @@ function label(text, { left, right, top }) {
 	})));
 }
 //#endregion
-export { advance, crispGlyph, glyph, label, line, lineAt, shift, snap, textWidth };
+export { LABEL, ROUND, advance, crispGlyph, glyph, label, line, lineAt, shift, snap, textWidth };

package/dist/src/license.js

@@ -1,5 +1,5 @@
 import { circle, rounded } from "./geometry.js";
-import { line, textWidth } from "./letters.js";
+import { LABEL, line, snap, textWidth } from "./letters.js";
 //#region src/license.js
 var SEAL = [
 	17,
@@ -23,11 +23,11 @@ var paper = (radius) => rounded([
 ], Math.min(radius, 2));
 var GAP = 2;
 function license(text, radius) {
-	const sx = Math.min(.8, (13 - GAP * (text.length - 1)) / textWidth(text));
+	const sx = Math.min(.8, (13 - GAP * (text.length - 1)) / textWidth(text, 1, 1.5, LABEL));
 	return [
 		paper(radius),
 		...seal(),
-		...line(text, [12, 8], sx, GAP, 5 / 6).map((d) => ({
+		...snap(line(text, [12, 8], sx, GAP, 5 / 6, LABEL)).map((d) => ({
 			d,
 			thin: true
 		}))

package/dist/src/list.js

@@ -15,11 +15,16 @@ var badgeRows = [
 	14.5
 ];
 var from = 3.5;
-var center = [17.5, 17.5];
+var BADGE_SCALE = 1.4;
 function listBadge(outline, k, stroke) {
-	const shape = place(outline, center, k);
+	const size = k * BADGE_SCALE;
+	const extent = (outline.circle ?? Math.max(outline.box[2], outline.box[3])) * size;
+	const c = Math.min(16.5, Math.floor((21 - extent) * 2) / 2);
+	const center = [c, c];
+	const shape = place(outline, center, size);
 	return {
 		center,
+		size,
 		lines: badgeRows.map((y) => {
 			const b = blocked(shape, "x", y, stroke);
 			return `M${from} ${y}H${b && b[0] < end ? Math.max(b[0], from) : end}`;

package/dist/src/loading.js

@@ -161,13 +161,13 @@ var LOADING = {
 	},
 	spinner: {
 		duration: 900,
-		frames: 24,
+		frames: 72,
 		t0: 0,
 		draw: ({ t }) => [arc(9, 360 * t - 90, 360 * t + 180)]
 	},
 	ring: {
 		duration: 1600,
-		frames: 32,
+		frames: 96,
 		t0: .5,
 		draw: ({ t }) => {
 			const sweep = 30 + 220 * swell(t);
@@ -177,7 +177,7 @@ var LOADING = {
 	},
 	arcs: {
 		duration: 1500,
-		frames: 30,
+		frames: 90,
 		t0: 0,
 		draw: ({ t }) => [arc(9, 360 * t - 90, 360 * t + 30), arc(5, -360 * t + 90, -360 * t + 210)]
 	},

package/dist/src/pin.js

@@ -0,0 +1,35 @@
+import { place } from "./clearance.js";
+import { circle } from "./geometry.js";
+import { badge } from "./folder.js";
+import { cornerScale, outlines } from "./symbols.js";
+//#region src/pin.js
+var plain = () => ["M10.5 21.5C10.5 21.5 4 15.5 4 9.5A6.5 6.5 0 0 1 17 9.5C17 15.5 10.5 21.5 10.5 21.5Z", circle(10.5, 9.5, 2.25)];
+function withBadge(name, draw, tone, radius) {
+	const k = cornerScale[name];
+	const shape = place(outlines[name], badge, k);
+	const [x0, y0, x1, y1] = shape.circle ? [
+		shape.c[0] - shape.circle,
+		shape.c[1] - shape.circle,
+		shape.c[0] + shape.circle,
+		shape.c[1] + shape.circle
+	] : shape.box;
+	const hole = {
+		d: `M${x0} ${y0}H${x1}V${y1}H${x0}Z`,
+		cut: true,
+		hidden: true,
+		occlude: true
+	};
+	return [
+		...plain(),
+		hole,
+		...tone(draw(badge, k, radius)).map((p) => typeof p === "string" ? {
+			d: p,
+			cut: true
+		} : {
+			...p,
+			cut: true
+		})
+	];
+}
+//#endregion
+export { plain, withBadge };

package/dist/src/quality.js

@@ -1,5 +1,5 @@
 import { rounded } from "./geometry.js";
-import { line } from "./letters.js";
+import { LABEL, line, snap } from "./letters.js";
 //#region src/quality.js
 var H = 1.2;
 var widthOf = (n) => n > 2 ? .85 : 1.2;
@@ -48,9 +48,9 @@ function quality(text, radius) {
 		[21.5, 5.5],
 		[21.5, 18.5],
 		[2.5, 18.5]
-	], Math.min(radius, 2.5)), ...line(text, [12, 12], widthOf(text.length), GAP, H).map((d) => ({
+	], Math.min(radius, 2.5)), ...snap(line(text, [12, 12], widthOf(text.length), GAP, H, LABEL)).map((d) => ({
 		d,
-		detail: true
+		thin: true
 	}))];
 }
 //#endregion

package/dist/src/rate.js

@@ -1,5 +1,5 @@
 import { dot } from "./scene.js";
-import { advance, glyph, shift, snap } from "./letters.js";
+import { LABEL, advance, glyph, shift, snap } from "./letters.js";
 //#region src/rate.js
 var H = 7;
 var TOP = 12 - H / 2;
@@ -31,8 +31,8 @@ function rate(text) {
 			out.push(dot(x + POINT / 2, 15.25));
 			x += POINT;
 		} else {
-			out.push(glyph(c, x - shift(c) * sx, TOP, sx, sy));
-			x += advance(c) * sx;
+			out.push(glyph(c, x - shift(c, LABEL) * sx, TOP, sx, sy, LABEL));
+			x += advance(c, LABEL) * sx;
 		}
 		x += gapAfter(i);
 	});

package/dist/src/rating.js

@@ -1,5 +1,5 @@
 import { circle, rounded } from "./geometry.js";
-import { line, textWidth } from "./letters.js";
+import { LABEL, line, snap, textWidth } from "./letters.js";
 import { tagShape } from "./marks.js";
 //#region src/rating.js
 var sq = (x0, y0, x1, y1) => [
@@ -21,9 +21,9 @@ var FRAMES = {
 	tall: {
 		shape: (r) => rounded(sq(3.5, 2.5, 20.5, 21.5), Math.min(r, 2.5)),
 		box: [
-			7,
+			6.5,
 			5,
-			17,
+			17.5,
 			19
 		]
 	},
@@ -265,26 +265,29 @@ var SYSTEMS = {
 	}
 };
 var GAP = 2;
+var ROW_GAP = 3;
 var PLUS = 3;
 var PLUS_GAP = 2;
 var MAX_SY = 1.2;
 var ASPECT = .95;
 function layout(rows, [x0, y0, x1, y1]) {
 	const extra = (r) => r.plus ? 5 : 0;
-	const sy = Math.min(MAX_SY, (y1 - y0 - GAP * (rows.length - 1)) / (6 * rows.length));
-	const sx = Math.min(sy * ASPECT, ...rows.map((r) => (x1 - x0 - extra(r) - GAP * (r.chars.length - 1)) / textWidth(r.chars, 1, 0)));
+	const sy = Math.min(MAX_SY, (y1 - y0 - ROW_GAP * (rows.length - 1)) / (6 * rows.length));
+	const sx = Math.min(sy * ASPECT, ...rows.map((r) => (x1 - x0 - extra(r) - GAP * (r.chars.length - 1)) / textWidth(r.chars, 1, 0, LABEL)));
 	const h = 6 * sy;
-	const top = (y0 + y1) / 2 - (h * rows.length + GAP * (rows.length - 1)) / 2;
+	const top = (y0 + y1) / 2 - (h * rows.length + ROW_GAP * (rows.length - 1)) / 2;
 	return rows.flatMap((r, i) => {
-		const width = textWidth(r.chars, sx, GAP);
+		const width = textWidth(r.chars, sx, GAP, LABEL);
 		const left = (x0 + x1) / 2 - (width + extra(r)) / 2;
-		const y = top + i * (h + GAP);
-		const out = line(r.chars, [left + width / 2, y + h / 2], sx, GAP, sy);
+		const y = top + i * (h + ROW_GAP);
+		const out = line(r.chars, [left + width / 2, y + h / 2], sx, GAP, sy, LABEL);
+		const row = snap(out);
 		if (r.plus) {
-			const [px, py] = [left + width + PLUS_GAP + PLUS / 2, y + PLUS / 2];
-			out.push(`M${px - PLUS / 2} ${py}H${px + PLUS / 2}M${px} ${py - PLUS / 2}V${py + PLUS / 2}`);
+			const half = (v) => Math.round(v - .5) + .5;
+			const [px, py] = [half(left + width + PLUS_GAP + PLUS / 2), half(y + PLUS / 2)];
+			row.push(`M${px - PLUS / 2} ${py}H${px + PLUS / 2}M${px} ${py - PLUS / 2}V${py + PLUS / 2}`);
 		}
-		return out;
+		return row;
 	});
 }
 function rating(system, text, radius) {

package/dist/src/resin.js

@@ -1,5 +1,5 @@
 import { crisp, rounded } from "./geometry.js";
-import { line } from "./letters.js";
+import { LABEL, line, snap } from "./letters.js";
 //#region src/resin.js
 var V = [
 	[12, 3],
@@ -44,9 +44,9 @@ var RESIN = Object.fromEntries([
 		0,
 		1,
 		2
-	].flatMap((k) => arrow(k, radius)), ...line(n, [12, 14]).map((d) => ({
+	].flatMap((k) => arrow(k, radius)), ...snap(line(n, [12, 14], 1, 1.5, 1, LABEL)).map((d) => ({
 		d,
-		detail: true
+		thin: true
 	}))]
 }]));
 //#endregion

package/dist/src/scene.js

@@ -17,5 +17,9 @@ var opening = (cx, w, h) => [
 	[cx + w / 2, 20 - h],
 	[cx + w / 2, GROUND]
 ];
+var softEar = (a, t, b, k = 1.3) => {
+	const c = (p) => [p[0] + (t[0] - p[0]) * k, p[1] + (t[1] - p[1]) * k].map((v) => +v.toFixed(3)).join(" ");
+	return `C${c(a)} ${c(b)} ${b.map((v) => +v.toFixed(3)).join(" ")}`;
+};
 //#endregion
-export { GROUND, dot, eye, groundLine, opening };
+export { GROUND, dot, eye, groundLine, opening, softEar };

package/dist/src/sensor.js

@@ -1,4 +1,4 @@
-import { line, textWidth } from "./letters.js";
+import { LABEL, line, snap, textWidth } from "./letters.js";
 //#region src/sensor.js
 var L = 2.5;
 var [X0, Y0, X1, Y1] = [
@@ -13,11 +13,12 @@ var cropMarks = () => [
 	`M${X1} ${Y1 - L}V${Y1}H${X1 - L}`,
 	`M${X0 + L} ${Y1}H${X0}V${Y1 - L}`
 ];
-var SPAN = 16;
-var GAP = 1.75;
+var SPAN = 14;
+var GAP = 2;
+var SY = 5 / 6;
 var label = (text) => {
-	const sx = Math.min(1, (SPAN - GAP * (text.length - 1)) / textWidth(text, 1, 0));
-	return line(text, [12, 12], sx, GAP, 1).map((d) => ({
+	const sx = Math.min(1, (SPAN - GAP * (text.length - 1)) / textWidth(text, 1, 0, LABEL));
+	return snap(line(text, [12, 12], sx, GAP, SY, LABEL)).map((d) => ({
 		d,
 		thin: true
 	}));
@@ -41,7 +42,7 @@ var SENSORS = {
 	},
 	"one-inch": {
 		zh: "1 英寸",
-		paths: () => [...line("1", [10.5, 12], 1, GAP, 1), "M14 9V11M16 9V11"].map((d) => ({
+		paths: () => snap([...line("1", [10.5, 12], 1, GAP, SY, LABEL), "M13.5 9.5V11.5M15.5 9.5V11.5"]).map((d) => ({
 			d,
 			thin: true
 		}))

package/dist/src/symbols.js

@@ -31,7 +31,7 @@ var cornerScale = Object.fromEntries(Object.entries({
 	gauge: 1,
 	lock: 1,
 	code: 1,
-	search: 1,
+	search: .85,
 	heart: 1,
 	question: 1,
 	exclaim: 1,
@@ -91,10 +91,10 @@ var outlines = {
 	ring: { circle: 3 },
 	star: { circle: 3.45 },
 	cloud: { box: [
-		-3.65,
-		-2.65,
+		-3.66,
+		-1.66,
 		3.6,
-		2.65
+		2.67
 	] },
 	shield: { box: [
 		-3.01,
@@ -334,19 +334,24 @@ var drawStar = ([x, y], k = 1, radius = 0) => {
 };
 var cloudCircles = [
 	[
-		-1.95,
-		.95,
-		1.7
+		-2.68,
+		1.67,
+		.98
 	],
 	[
-		.1,
-		-.25,
-		2.4
+		-1.11,
+		.29,
+		1.57
 	],
 	[
-		2,
 		1.05,
-		1.6
+		.1,
+		1.76
+	],
+	[
+		2.42,
+		1.49,
+		1.18
 	]
 ];
 var cloudFillet = .5;
@@ -366,23 +371,31 @@ function arcTo([cx, cy, r], from, to) {
 	return `A${r} ${r} 0 ${((Math.atan2(to[1] - cy, to[0] - cx) - a0) % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI) > Math.PI ? 1 : 0} 1 ${to[0]} ${to[1]}`;
 }
 function cloudTop([x, y], k) {
-	const [left, mid, right] = cloudCircles.map(([cx, cy, r]) => [
+	const cs = cloudCircles.map(([cx, cy, r]) => [
 		x + cx * k,
 		y + cy * k,
 		r * k
 	]);
 	const f = cloudFillet * k;
-	const p1 = upperIntersection(left, mid);
-	const p2 = upperIntersection(mid, right);
-	const l1 = pointOn(left, angleOn(left, p1) - f / left[2]);
-	const m1 = pointOn(mid, angleOn(mid, p1) + f / mid[2]);
-	const m2 = pointOn(mid, angleOn(mid, p2) - f / mid[2]);
-	const r1 = pointOn(right, angleOn(right, p2) + f / right[2]);
-	const start = [left[0], left[1] + left[2]];
-	const end = [right[0], right[1] + right[2]];
 	const pt = (p) => `${p[0]} ${p[1]}`;
+	const start = [cs[0][0], cs[0][1] + cs[0][2]];
+	const end = [cs.at(-1)[0], cs.at(-1)[1] + cs.at(-1)[2]];
+	let arcs = "";
+	let from = start;
+	cs.forEach((c, i) => {
+		const next = cs[i + 1];
+		if (!next) {
+			arcs += arcTo(c, from, end);
+			return;
+		}
+		const p = upperIntersection(c, next);
+		const out = pointOn(c, angleOn(c, p) - f / c[2]);
+		const into = pointOn(next, angleOn(next, p) + f / next[2]);
+		arcs += `${arcTo(c, from, out)}Q${pt(p)} ${pt(into)}`;
+		from = into;
+	});
 	return {
-		arcs: `${arcTo(left, start, l1)}Q${pt(p1)} ${pt(m1)}${arcTo(mid, m1, m2)}Q${pt(p2)} ${pt(r1)}${arcTo(right, r1, end)}`,
+		arcs,
 		start,
 		end
 	};

package/dist/src/unit.js

@@ -1,6 +1,6 @@
 import { dot } from "./scene.js";
 import { circle, crisp, rounded } from "./geometry.js";
-import { line, snap } from "./letters.js";
+import { LABEL, line, snap } from "./letters.js";
 //#region src/unit.js
 var [X0, Y0, X1, Y1] = [
 	3.5,
@@ -17,7 +17,7 @@ var cross = [`M${X0} ${Y0}L${X1} ${Y1}`, `M${X1} ${Y0}L${X0} ${Y1}`];
 var track = `M9.5 9.5H15.5A3 3 0 0 1 15.5 15.5H9.5A3 3 0 0 1 9.5 9.5Z`;
 var wings = `M9.5 ${Y1}A1.5 1.5 0 0 1 ${CX} ${Y1}A1.5 1.5 0 0 1 15.5 ${Y1}`;
 var slash = `M${X0} ${Y1}L${X1} ${Y0}`;
-var text = (str) => [snap(line(str, [CX, CY], 1, 2, 1))].flat().map((d) => ({
+var text = (str) => [snap(line(str, [CX, CY], 1, 2, 1, LABEL))].flat().map((d) => ({
 	d,
 	thin: true
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jannchie/icons",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Line icons on a 24-unit grid, redrawn for every corner radius and stroke weight, with pixel hinting and duo-tone colors",
   "license": "MIT",
   "author": "Jianqi Pan",