@cantileva/icons 0.1.0 → 0.1.1

package/README.md

@@ -53,6 +53,15 @@ fetch, key never ships to the browser).
 
 This is the same shape as `prisma generate`: a local codegen step, scoped to you.
 
+## Uninstall
+
+```bash
+npm uninstall @cantileva/icons
+```
+
+That's all — the synced components live inside the package, so removing it leaves
+nothing behind in your project.
+
 ## Notes
 
 - **No key yet?** Install still succeeds; the sync just skips. Set the key and run

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cantileva/icons",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Your Cantileva icon library, as React components.",
   "type": "module",
   "bin": {

package/sync.js

@@ -26,15 +26,21 @@ const animName = (slug) => pascal(slug) + "Animated";
 const viewBoxOf = (svg) => (svg.match(/viewBox="([^"]+)"/) || [, "0 0 1024 1024"])[1];
 const innerOf = (svg) => svg.replace(/^[\s\S]*?<svg[^>]*>/, "").replace(/<\/svg>\s*$/, "").trim();
 const fillHost = (svg) => svg.replace(/\swidth="[^"]*"/, ' width="100%"').replace(/\sheight="[^"]*"/, ' height="100%"');
+// Shrink path markup: drop whitespace between tags and round coordinates to 1
+// decimal (sub-pixel on a 1024 grid, visually identical) — typically 10-20% off.
+const minify = (s) => s
+  .replace(/>\s+</g, "><")
+  .replace(/\s{2,}/g, " ")
+  .replace(/-?\d+\.\d+/g, (m) => String(Math.round(parseFloat(m) * 10) / 10));
 
 const iconModule = (svg) => `import { createElement as h } from "react";
-const __html = ${JSON.stringify(innerOf(svg))};
+const __html = ${JSON.stringify(minify(innerOf(svg)))};
 export default function Icon(props) {
   return h("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: ${JSON.stringify(viewBoxOf(svg))}, width: "1em", height: "1em", fill: "currentColor", dangerouslySetInnerHTML: { __html } }, props));
 }
 `;
 const animModule = (frames, fps) => `import { createElement as h, useState, useEffect } from "react";
-const FRAMES = ${JSON.stringify(frames.map(fillHost))};
+const FRAMES = ${JSON.stringify(frames.map((f) => minify(fillHost(f))))};
 export default function Animated({ fps = ${fps}, ...props }) {
   const [i, setI] = useState(0);
   useEffect(() => {