rdicons 0.2.0 → 0.3.0

package/README.md

@@ -30,6 +30,8 @@ rdicons sets                       list the 19 libraries with their licenses
 | `--stroke` | the icon's own | stroke width (outline icons) |
 | `--padding` | `0` | extra space around the icon |
 | `--background` | none | solid background |
+| `--animated [mode]` | off | add the icon's animation (rd icons): `hover` (default), `parent`, `play` or `loop`. The CSS is inside the file. Other libraries have no animation and get the still icon |
+| `--speed <n>` | `1` | animation speed, `2` is twice as fast (needs `--animated`) |
 
 Icons come from https://rdicons.vimalbhatt.com (set `RDICONS_URL` to use another address). Needs Node 18+.
 

package/dist/cli.js

@@ -125,7 +125,7 @@ export function Example() {
 }
 
 // src/cli.ts
-var VERSION = "0.2.0";
+var VERSION = "0.3.0";
 var BASE = (process.env.RDICONS_URL || "https://rdicons.vimalbhatt.com").replace(/\/$/, "");
 var HELP = `rdicons ${VERSION}: add open-source icons to your project
 
@@ -143,14 +143,41 @@ Options for "add"
   --stroke <number>      stroke width for outline icons
   --padding <number>     extra space around the icon (viewBox units)
   --background <color>   solid background behind the icon
+  --animated [mode]      add the icon's animation (rd icons): hover (default), parent, play or loop
+  --speed <number>       animation speed, 2 is twice as fast (default 1; needs --animated)
 
 Examples
   npx rdicons add lucide:house
   npx rdicons add tabler:bell ph:heart --format tsx --out src/icons --color "#4f46e5"
+  npx rdicons add rd:bell --animated loop --speed 1.5 --format tsx
   npx rdicons search "arrow right" --set lucide
 
 Icons keep their original license, shown by "rdicons sets". Site: ${BASE}
 `;
+var MODES = ["hover", "parent", "play", "loop"];
+var animCache = /* @__PURE__ */ new Map();
+async function fetchAnimation(set, name) {
+  if (!animCache.has(set)) animCache.set(set, await getJson(`/api/animations?set=${encodeURIComponent(set)}`));
+  return animCache.get(set)?.[name] ?? null;
+}
+function animatedSvg(name, a, o) {
+  const css = [o.color ? `color:${o.color}` : "", o.speed !== 1 ? `--rd-speed:${+(1 / o.speed).toFixed(2)}` : ""].filter(Boolean).join(";");
+  const body = o.stroke == null ? a.b : a.b.replace(/stroke-width="[^"]*"/g, `stroke-width="${o.stroke}"`);
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${o.size}" height="${o.size}" class="rd-a-${name}" data-rd-animate="${o.mode}"${css ? ` style="${css}"` : ""}>
+<style>${a.c}</style>
+${body}
+</svg>`;
+}
+function jsxifyAnimated(jsx, ts) {
+  const cast = ts ? " as React.CSSProperties" : "";
+  return jsx.replace(/<style>([\s\S]*?)<\/style>/, (_, css) => "<style>{`" + css.replace(/[`\\]|\$\{/g, (m) => "\\" + m) + "`}</style>").replace(/ style="([^"]*)"/, (_, decl) => {
+    const props = decl.split(";").filter(Boolean).map((d) => {
+      const [k, ...v] = d.split(":");
+      return `'${k.trim()}': '${v.join(":").trim()}'`;
+    });
+    return ` style={{ ${props.join(", ")} }${cast}}`;
+  });
+}
 var CliError = class extends Error {
 };
 function fail(msg) {
@@ -174,6 +201,7 @@ function parseArgs(argv) {
     if (a.startsWith("--")) {
       const [k, inline] = a.slice(2).split("=");
       if (inline !== void 0) flags[k] = inline;
+      else if (k === "animated") flags[k] = MODES.includes(argv[i + 1]) ? argv[++i] : "true";
       else if (argv[i + 1] !== void 0 && !argv[i + 1].startsWith("--")) flags[k] = argv[++i];
       else flags[k] = "true";
     } else positional.push(a);
@@ -235,10 +263,18 @@ async function cmdAdd(positional, flags) {
   const format = flags.format ?? "svg";
   if (!["svg", "jsx", "tsx"].includes(format)) fail("--format must be svg, jsx or tsx");
   const out = resolve(flags.out ?? "icons");
+  const mode = flags.animated === void 0 ? null : flags.animated === "true" ? "hover" : flags.animated;
+  if (mode && !MODES.includes(mode)) fail(`--animated must be one of ${MODES.join(", ")} (or just --animated for hover)`);
+  const speed = flags.speed === void 0 ? 1 : Number(flags.speed);
+  if (!(speed > 0 && speed <= 10)) fail("--speed must be a number between 0 and 10, for example --speed 1.5");
+  if (flags.speed !== void 0 && !mode) fail("--speed only works together with --animated");
+  if (mode && (flags.padding !== void 0 || flags.background !== void 0)) fail("--animated cannot be combined with --padding or --background");
   await mkdir(out, { recursive: true });
   for (const ref of positional) {
     const it = await fetchIcon(ref);
-    const svg = buildSvg(
+    const anim = mode ? await fetchAnimation(it.s, it.n) : null;
+    if (mode && !anim) console.log(`  note: ${it.s}:${it.n} has no animation (only rd icons move), so the still icon is written.`);
+    const svg = anim ? animatedSvg(it.n, anim, { size: flags.size ? Number(flags.size) : 24, color: flags.color, stroke: flags.stroke ? Number(flags.stroke) : null, mode, speed }) : buildSvg(
       { body: it.b, width: it.w ?? 24, height: it.h ?? 24 },
       {
         color: flags.color,
@@ -251,7 +287,8 @@ async function cmdAdd(positional, flags) {
     );
     const comp = it.c ?? toPascalCase(it.n);
     const file = format === "svg" ? `${it.s}-${it.n}.svg` : `${comp}.${format}`;
-    const text = format === "svg" ? svg + "\n" : svgToJsx(svg, comp) + "\n";
+    const jsx = format === "svg" ? "" : svgToJsx(svg, comp);
+    const text = format === "svg" ? svg + "\n" : (anim ? jsxifyAnimated(jsx, format === "tsx") : jsx) + "\n";
     await writeFile(join(out, file), text, "utf8");
     console.log(`\u2713 ${it.s}:${it.n} -> ${join(flags.out ?? "icons", file)}`);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rdicons",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "rdicons command line: search 78,000+ open-source icons and add them to your project as SVG, JSX or TSX. Try: npx rdicons add lucide:house",
   "keywords": ["icons", "cli", "svg", "react", "tsx", "icon-generator", "lucide", "tabler", "rdicons"],
   "license": "MIT",