rdicons 0.2.0 → 0.4.0

package/README.md

@@ -18,6 +18,7 @@ npx rdicons add tabler:bell ph:heart --format tsx --out src/icons --color "#4f46
 rdicons add <set:name> [more...]   download icons into a folder
 rdicons search <query> [--set s]   find icons by name
 rdicons info <set:name>            show the code for one icon (every install option)
+rdicons migrate <path...> --to <set>   switch a project's icon imports to another library
 rdicons sets                       list the 19 libraries with their licenses
 ```
 
@@ -30,6 +31,21 @@ 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 | rd icons only: `hover` (default), `parent`, `play`, `loop` |
+| `--speed` | `1` | animation speed (with `--animated`) |
+
+## Switch icon library: `migrate`
+
+Moving a project from one icon library to another usually means editing every import by hand. `migrate` does it for you:
+
+```bash
+npx rdicons migrate src --to tabler          # preview: nothing is changed
+npx rdicons migrate src --to rd --write      # apply it (commit your work first)
+```
+
+It reads the imports of `lucide-react`, `@tabler/icons-react`, `@phosphor-icons/react`, `@heroicons/react` and `react-icons` (Feather, Lucide, Tabler, Phosphor, Remix, Bootstrap, Octicons, Radix, Heroicons 2, Material) and points them at `@rdicons/react/<library>` (or `@rdicons/vue/<library>` for Vue). Icons are matched by name and by common alternative names (`home` and `house`); the names you use in your JSX stay the same. Icons with no match stay on the old import and are listed, so the project keeps building. Tabler's `stroke` prop becomes `strokeWidth`. `--ext` chooses the file types, `node_modules` and build folders are skipped.
+| `--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

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 
 // src/cli.ts
-import { mkdir, writeFile } from "fs/promises";
-import { join, resolve } from "path";
+import { mkdir, writeFile as writeFile2 } from "fs/promises";
+import { join as join2, resolve as resolve2 } from "path";
 
 // ../core/dist/index.js
 var STROKE_WIDTH_RE = /stroke-width="[^"]*"/g;
@@ -124,8 +124,214 @@ export function Example() {
   ];
 }
 
+// src/migrate.ts
+import { readdir, readFile, stat, writeFile } from "fs/promises";
+import { join, relative, resolve } from "path";
+var kebab = (s) => s.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2").replace(/([a-zA-Z])(\d)/g, "$1-$2").toLowerCase();
+var stripSuffix = (s, suffix) => s.length > suffix.length && s.endsWith(suffix) ? s.slice(0, -suffix.length) : s;
+var stripPrefix = (s, prefix) => s.length > prefix.length && s.startsWith(prefix) ? s.slice(prefix.length) : s;
+var lucide = (framework) => ({ set: "lucide", framework, slug: (n) => kebab(stripSuffix(stripPrefix(n, "Lucide"), "Icon")) });
+var REACT_ICONS = {
+  fi: { set: "feather" },
+  lu: { set: "lucide" },
+  tb: { set: "tabler" },
+  pi: { set: "ph" },
+  ri: { set: "ri" },
+  bs: { set: "bi" },
+  go: { set: "octicon" },
+  rx: { set: "radix-icons" },
+  hi2: { set: "heroicons" },
+  md: { set: "material-symbols" }
+};
+function sourceFor(spec) {
+  if (spec === "lucide-react") return lucide("react");
+  if (spec === "lucide-vue-next") return lucide("vue");
+  if (spec === "@tabler/icons-react") return { set: "tabler", framework: "react", slug: (n) => kebab(stripPrefix(n, "Icon")), warn: 'Tabler uses the prop "stroke"; rdicons uses "strokeWidth" (fixed for you where it is a plain prop)' };
+  if (spec === "@tabler/icons-vue") return { set: "tabler", framework: "vue", slug: (n) => kebab(stripPrefix(n, "Icon")) };
+  if (spec === "@phosphor-icons/react") return { set: "ph", framework: "react", slug: (n) => kebab(stripSuffix(stripPrefix(n, "Ph"), "Icon")), warn: 'Phosphor uses the prop "weight" (regular, bold, fill...); rdicons has no such prop, so pick the style by name (house-bold) instead' };
+  const hero = spec.match(/^@heroicons\/(react|vue)\/(?:\d\d\/)?(outline|solid)$/);
+  if (hero) return { set: "heroicons", framework: hero[1], slug: (n) => kebab(stripSuffix(n, "Icon")), style: hero[2] === "solid" ? "filled" : "outline" };
+  const ri = spec.match(/^react-icons\/([a-z0-9]+)$/);
+  if (ri && REACT_ICONS[ri[1]]) {
+    const pack = ri[1];
+    const prefix = pack === "hi2" ? "Hi" : pack[0].toUpperCase() + pack.slice(1);
+    return {
+      set: REACT_ICONS[pack].set,
+      framework: "react",
+      slug: (n) => {
+        if (!n.startsWith(prefix)) return null;
+        let s = kebab(n.slice(prefix.length));
+        if (pack === "hi2") s = s.replace(/^(outline|solid|mini)-/, "");
+        if (pack === "md") s = s.replace(/-outline$/, "");
+        return s;
+      },
+      style: void 0
+    };
+  }
+  return null;
+}
+var ALIASES = [
+  ["home", "house"],
+  ["trash", "trash-2", "bin", "delete"],
+  ["settings", "cog", "gear", "setting"],
+  ["search", "magnifier", "magnifying-glass"],
+  ["mail", "envelope", "email"],
+  ["user", "person", "account"],
+  ["edit", "pencil", "pen"],
+  ["x", "close", "times", "cross"],
+  ["check", "tick"],
+  ["plus", "add"],
+  ["minus", "remove"],
+  ["bell", "notification"],
+  ["star", "favorite"],
+  ["share", "share-2"],
+  ["lock", "padlock"],
+  ["calendar", "calendar-days"],
+  ["camera", "photo-camera"],
+  ["image", "picture", "photo"],
+  ["eye", "visibility"],
+  ["link", "chain"],
+  ["folder", "directory"],
+  ["file", "document"],
+  ["message", "chat", "comment"],
+  ["phone", "telephone", "call"],
+  ["heart", "favourite"],
+  ["arrow-left", "arrow-small-left", "left-arrow"],
+  ["arrow-right", "arrow-small-right", "right-arrow"],
+  ["chevron-down", "angle-down", "caret-down"],
+  ["chevron-up", "angle-up", "caret-up"],
+  ["chevron-left", "angle-left", "caret-left"],
+  ["chevron-right", "angle-right", "caret-right"]
+];
+var STYLE_SUFFIX = /-(fill|filled|solid|line|bold|thin|light|duotone|regular|outline|sharp)$/;
+var styleOf = (slug) => /-(fill|filled|solid)$/.test(slug) ? "filled" : "outline";
+function findIcon(slug, target, forceStyle) {
+  const style = forceStyle ?? styleOf(slug);
+  const base = slug.replace(STYLE_SUFFIX, "");
+  const group = ALIASES.find((g) => g.includes(base));
+  const bases = [base, ...group ? group.filter((x) => x !== base) : []];
+  const variants = style === "filled" ? ["-fill", "-filled", "-solid", "-fill-24"] : ["", "-line", "-regular", "-outline", "-24-regular"];
+  const candidates = [slug, ...bases.flatMap((b) => variants.map((v) => b + v)), ...bases];
+  for (const c of candidates) {
+    const comp = target.get(c);
+    if (comp !== void 0) return { name: c, comp };
+  }
+  return null;
+}
+var SKIP_DIRS = /* @__PURE__ */ new Set(["node_modules", ".git", "dist", "build", ".next", ".nuxt", ".svelte-kit", "coverage", "out", ".turbo"]);
+async function* walk(path, exts) {
+  const s = await stat(path);
+  if (s.isFile()) {
+    yield path;
+    return;
+  }
+  for (const e of await readdir(path, { withFileTypes: true })) {
+    if (e.isDirectory()) {
+      if (!SKIP_DIRS.has(e.name)) yield* walk(join(path, e.name), exts);
+    } else if (exts.has(e.name.slice(e.name.lastIndexOf(".") + 1).toLowerCase())) yield join(path, e.name);
+  }
+}
+var IMPORT = /import\s+(type\s+)?\{([^}]*)\}\s*from\s*(['"])([^'"]+)\3([ \t]*;?)([ \t]*\r?\n)?/g;
+async function migrate(paths, opts, deps) {
+  const targetNames = new Map(await deps.names(opts.to));
+  const exts = new Set(opts.exts);
+  const files = [];
+  const frameworks = /* @__PURE__ */ new Set();
+  let changed = 0;
+  const seen = /* @__PURE__ */ new Set();
+  for (const p of paths) {
+    for await (const file of walk(resolve(p), exts)) {
+      if (seen.has(file)) continue;
+      seen.add(file);
+      const text = await readFile(file, "utf8");
+      if (!/import\s+(type\s+)?\{/.test(text)) continue;
+      const report = { file, migrated: [], unmatched: [], warnings: [] };
+      const jsxFixes = [];
+      const merged = /* @__PURE__ */ new Map();
+      const out = text.replace(IMPORT, (whole, typeKw, list, quote, spec, semi, nl) => {
+        const eol = nl ?? "";
+        const source = sourceFor(spec);
+        if (!source) return whole;
+        const kept = [];
+        const moved = [];
+        const hit = [];
+        for (const raw of list.split(",").map((x) => x.trim()).filter(Boolean)) {
+          const isType = /^type\s+/.test(raw);
+          const clean = raw.replace(/^type\s+/, "");
+          const [exported, local] = clean.split(/\s+as\s+/).map((x) => x.trim());
+          const slug = source.slug(exported);
+          const found = slug ? findIcon(slug, targetNames, source.style) : null;
+          if (!found || isType) {
+            kept.push(raw);
+            if (!isType) report.unmatched.push(`${exported} (${spec})`);
+            continue;
+          }
+          const localName = local ?? exported;
+          moved.push(found.comp === localName ? found.comp : `${found.comp} as ${localName}`);
+          hit.push(`${exported} -> ${found.name}`);
+          if (spec === "@tabler/icons-react") jsxFixes.push(localName);
+        }
+        if (!moved.length) return whole;
+        frameworks.add(source.framework);
+        report.migrated.push(...hit.map((h) => {
+          const [from, to] = h.split(" -> ");
+          return { from: `${source.set}:${from}`, to: `${opts.to}:${to}` };
+        }));
+        if (source.warn) report.warnings.push(source.warn);
+        const pkg = `@rdicons/${source.framework}/${opts.to}`;
+        const q = quote;
+        const key = `${typeKw ?? ""}|${pkg}`;
+        const keptLine = kept.length ? `import ${typeKw ?? ""}{ ${kept.join(", ")} } from ${q}${spec}${q}${semi}${eol || "\n"}` : "";
+        const existing = merged.get(key);
+        if (existing) {
+          existing.specs.push(...moved);
+          return keptLine;
+        }
+        merged.set(key, { specs: [...moved], line: (specs) => `import ${typeKw ?? ""}{ ${specs.join(", ")} } from ${q}${pkg}${q}${semi}${eol}` });
+        return `${keptLine}\0RD:${key}\0`;
+      }).replace(/\u0000RD:([^\u0000]*)\u0000/g, (_, key) => {
+        const m = merged.get(key);
+        return m.line([...new Set(m.specs)]);
+      });
+      if (out === text) {
+        if (report.unmatched.length) files.push(report);
+        continue;
+      }
+      let final = out;
+      for (const name of new Set(jsxFixes)) final = final.replace(new RegExp(`(<${name}\\b[^>]*?)\\sstroke=`, "g"), "$1 strokeWidth=");
+      changed++;
+      files.push(report);
+      if (opts.write) await writeFile(file, final, "utf8");
+    }
+  }
+  return {
+    files,
+    changed,
+    written: opts.write,
+    installHint: [...frameworks].map((f) => `npm install @rdicons/${f}`)
+  };
+}
+function formatReport(r, root) {
+  const lines = [];
+  let moved = 0;
+  const left = [];
+  for (const f of r.files) {
+    moved += f.migrated.length;
+    if (f.migrated.length) lines.push(`${r.written ? "\u2713" : "\xB7"} ${relative(root, f.file) || f.file}: ${f.migrated.length} icon${f.migrated.length === 1 ? "" : "s"}`);
+    for (const u of f.unmatched) left.push(`  ${relative(root, f.file) || f.file}: ${u}`);
+  }
+  lines.push("");
+  lines.push(`${moved} icon${moved === 1 ? "" : "s"} in ${r.changed} file${r.changed === 1 ? "" : "s"} ${r.written ? "rewritten" : "can be rewritten"}.`);
+  if (left.length) lines.push("", `No match in the target library (left on the old import, pick a replacement by hand):`, ...left);
+  const warnings = [...new Set(r.files.flatMap((f) => f.warnings))];
+  if (warnings.length) lines.push("", "Check:", ...warnings.map((w) => "  - " + w));
+  if (r.installHint.length && r.changed) lines.push("", `Then install the new package: ${r.installHint.join(" and ")}`);
+  if (!r.written && r.changed) lines.push("", "This was a preview. Nothing was changed: run the same command with --write to apply it (commit your work first).");
+  return lines.join("\n");
+}
+
 // src/cli.ts
-var VERSION = "0.2.0";
+var VERSION = "0.4.0";
 var BASE = (process.env.RDICONS_URL || "https://rdicons.vimalbhatt.com").replace(/\/$/, "");
 var HELP = `rdicons ${VERSION}: add open-source icons to your project
 
@@ -133,6 +339,7 @@ Usage
   rdicons add <set:name> [more...] [options]   download icons into a folder
   rdicons search <query> [--set lucide]         find icons by name
   rdicons info <set:name>                       show the code to use one icon (every install option)
+  rdicons migrate <path...> --to <library>      switch a project's icon imports to another library (preview first)
   rdicons sets                                  list the 19 icon libraries
 
 Options for "add"
@@ -143,14 +350,48 @@ 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)
+
+Options for "migrate"
+  --to <library>         the library to move to, e.g. lucide, tabler, ph, rd (see "rdicons sets")
+  --write                apply the changes (without it you only get a preview)
+  --ext js,ts,tsx,...    which files to look at (default js,jsx,ts,tsx,mjs,cjs,vue)
 
 Examples
+  npx rdicons migrate src --to tabler           preview: lucide-react imports -> @rdicons/react/tabler
+  npx rdicons migrate src --to rd --write       apply it
   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 +415,8 @@ function parseArgs(argv) {
     if (a.startsWith("--")) {
       const [k, inline] = a.slice(2).split("=");
       if (inline !== void 0) flags[k] = inline;
+      else if (k === "write") flags[k] = "true";
+      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);
@@ -234,11 +477,19 @@ async function cmdAdd(positional, flags) {
   if (!positional.length) fail("Which icon? For example: rdicons add lucide:house");
   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 out = resolve2(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,12 +502,23 @@ 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";
-    await writeFile(join(out, file), text, "utf8");
-    console.log(`\u2713 ${it.s}:${it.n} -> ${join(flags.out ?? "icons", file)}`);
+    const jsx = format === "svg" ? "" : svgToJsx(svg, comp);
+    const text = format === "svg" ? svg + "\n" : (anim ? jsxifyAnimated(jsx, format === "tsx") : jsx) + "\n";
+    await writeFile2(join2(out, file), text, "utf8");
+    console.log(`\u2713 ${it.s}:${it.n} -> ${join2(flags.out ?? "icons", file)}`);
   }
   console.log('\nTip: run "rdicons sets" to see each library license (some need attribution).');
 }
+async function cmdMigrate(positional, flags) {
+  if (!positional.length) fail("Which folder or file? For example: rdicons migrate src --to tabler");
+  const to = flags.to;
+  if (!to || to === "true") fail('Which library do you want to move to? For example: --to tabler (run "rdicons sets" for the list)');
+  const sets = await listSets();
+  if (!sets.some((s) => s.prefix === to)) fail(`Unknown library "${to}". Choose one of: ${sets.map((s) => s.prefix).join(", ")}`);
+  const exts = (flags.ext && flags.ext !== "true" ? flags.ext : "js,jsx,ts,tsx,mjs,cjs,vue").split(",").map((x) => x.trim().replace(/^\./, "").toLowerCase());
+  const result = await migrate(positional, { to, write: flags.write === "true", exts }, { names: (set) => getJson(`/api/names?set=${encodeURIComponent(set)}`) });
+  console.log(formatReport(result, process.cwd()));
+}
 async function main() {
   const [cmd, ...rest] = process.argv.slice(2);
   const { flags, positional } = parseArgs(rest);
@@ -266,6 +528,7 @@ async function main() {
   if (cmd === "search") return cmdSearch(positional, flags);
   if (cmd === "info") return cmdInfo(positional);
   if (cmd === "add") return cmdAdd(positional, flags);
+  if (cmd === "migrate") return cmdMigrate(positional, flags);
   fail(`Unknown command "${cmd}". Run rdicons --help`);
 }
 main().catch((e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rdicons",
-  "version": "0.2.0",
+  "version": "0.4.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",