@rdicons/react-native 0.6.0 → 0.7.0

package/README.md

@@ -47,10 +47,32 @@ That writes one `.tsx` file per icon, with no dependency on this package. (`--fo
 
 ## Animation
 
-Animated icons are not in the React Native package yet. The rd icons animate on the web and in the Vue, Svelte and React packages.
+The rd icons can move, with React Native's own `Animated` (no extra library):
+
+```tsx
+import { Bell, Rocket } from '@rdicons/react-native/rd'
+
+<Bell animate />                    {/* plays once when it appears */}
+<Rocket animate="loop" speed={1.5} /> {/* repeats: loading states */}
+
+const ref = useRef<RdIconHandle>(null)
+<Pressable onPress={() => ref.current?.play()}><Bell ref={ref} /></Pressable>
+```
+
+The animation is the same as on the web (all 638 rd icons), and it stops when the device asks for reduced motion. Other libraries ignore `animate`. `@rdicons/react-native/rd-static` is the same library without the animation data, about 60% smaller, for apps that do not animate.
 
 ## Licenses
 
 The code of this package is MIT. The icons keep the license of their library (MIT, ISC, Apache-2.0, and CC BY 4.0 for Solar, which requires you to credit the author). The `LICENSES` folder has the full text for each library.
 
+
+## Colour effects
+
+```tsx
+<Folder duotone color="#4f46e5" />
+<Folder gradient={['#ec4899', '#4f46e5']} />
+```
+
+`duotone` fills closed shapes with a soft second tone; `gradient` makes the line run from one color to another. Details: https://rdicons.vimalbhatt.com/docs/effects
+
 Needs React 17+, React Native 0.70+ and `react-native-svg` 13+. ESM, with types. Part of [rdicons](https://rdicons.vimalbhatt.com).

package/dist/effects.js

@@ -0,0 +1,210 @@
+// ../core/src/effects.ts
+var ARGS = { m: 2, l: 2, h: 1, v: 1, c: 6, s: 4, q: 4, t: 2, a: 7, z: 0 };
+var NUM = /[-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?/g;
+function firstSubpath(d) {
+  let cur = { x: 0, y: 0 };
+  let start = null;
+  let closed = false;
+  let min = { x: Infinity, y: Infinity };
+  let max = { x: -Infinity, y: -Infinity };
+  const add = (p) => {
+    min = { x: Math.min(min.x, p.x), y: Math.min(min.y, p.y) };
+    max = { x: Math.max(max.x, p.x), y: Math.max(max.y, p.y) };
+  };
+  for (const m of d.matchAll(/([a-zA-Z])([^a-zA-Z]*)/g)) {
+    const cmd = m[1];
+    const lower = cmd.toLowerCase();
+    const rel = cmd === lower;
+    if (!(lower in ARGS)) return null;
+    if (lower === "z") {
+      if (start) {
+        closed = true;
+        cur = start;
+      }
+      break;
+    }
+    if (lower === "m" && start) break;
+    const args = m[2];
+    let pos = 0;
+    const number = () => {
+      while (pos < args.length && /[\s,]/.test(args[pos])) pos++;
+      const r = /[-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?/y;
+      r.lastIndex = pos;
+      const x = r.exec(args);
+      if (!x) return null;
+      pos = r.lastIndex;
+      return parseFloat(x[0]);
+    };
+    const flag = () => {
+      while (pos < args.length && /[\s,]/.test(args[pos])) pos++;
+      if (args[pos] !== "0" && args[pos] !== "1") return null;
+      return Number(args[pos++]);
+    };
+    let first = true;
+    for (; ; ) {
+      const ox = rel ? cur.x : 0, oy = rel ? cur.y : 0;
+      if (lower === "a") {
+        const rx = number(), ry = number(), rot = number(), f1 = flag(), f2 = flag(), x = number(), y = number();
+        if ([rx, ry, rot, f1, f2, x, y].some((v) => v == null)) break;
+        const end = { x: ox + x, y: oy + y };
+        const mid = { x: (cur.x + end.x) / 2, y: (cur.y + end.y) / 2 };
+        add({ x: mid.x - Math.abs(rx), y: mid.y - Math.abs(ry) });
+        add({ x: mid.x + Math.abs(rx), y: mid.y + Math.abs(ry) });
+        cur = end;
+        add(cur);
+      } else {
+        const a = [];
+        for (let k = 0; k < ARGS[lower]; k++) {
+          const v = number();
+          if (v == null) break;
+          a.push(v);
+        }
+        if (a.length < ARGS[lower]) break;
+        switch (lower) {
+          case "m": {
+            cur = { x: ox + a[0], y: oy + a[1] };
+            if (first) start = cur;
+            add(cur);
+            break;
+          }
+          case "l":
+          case "t": {
+            cur = { x: ox + a[0], y: oy + a[1] };
+            add(cur);
+            break;
+          }
+          case "h": {
+            cur = { x: ox + a[0], y: cur.y };
+            add(cur);
+            break;
+          }
+          case "v": {
+            cur = { x: cur.x, y: oy + a[0] };
+            add(cur);
+            break;
+          }
+          case "c": {
+            add({ x: ox + a[0], y: oy + a[1] });
+            add({ x: ox + a[2], y: oy + a[3] });
+            cur = { x: ox + a[4], y: oy + a[5] };
+            add(cur);
+            break;
+          }
+          case "s":
+          case "q": {
+            add({ x: ox + a[0], y: oy + a[1] });
+            cur = { x: ox + a[2], y: oy + a[3] };
+            add(cur);
+            break;
+          }
+        }
+      }
+      first = false;
+    }
+    if (!start && lower !== "m") return null;
+  }
+  if (!start || !isFinite(min.x)) return null;
+  add(start);
+  return { start, end: cur, closed, min, max };
+}
+var attr = (tag, name) => {
+  var _a;
+  const m = tag.match(new RegExp(`(?:^|\\s)${name}\\s*=\\s*("([^"]*)"|'([^']*)')`));
+  return m ? (_a = m[2]) != null ? _a : m[3] : null;
+};
+var num = (v) => v == null ? null : Number.isFinite(parseFloat(v)) ? parseFloat(v) : null;
+var MIN_SIDE = 5;
+function fillableShapes(body) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  if (!/stroke=/.test(body)) return [];
+  const out = [];
+  let i = -1;
+  for (const m of body.matchAll(/<(path|circle|ellipse|rect|polygon|line|polyline)\b[^>]*>/g)) {
+    i++;
+    const tag = m[0];
+    const kind = m[1];
+    const ownFill = attr(tag, "fill");
+    if (ownFill && ownFill !== "none") continue;
+    if (kind === "circle") {
+      if (((_a = num(attr(tag, "r"))) != null ? _a : 0) * 2 >= MIN_SIDE) out.push(i);
+    } else if (kind === "ellipse") {
+      if (((_b = num(attr(tag, "rx"))) != null ? _b : 0) * 2 >= MIN_SIDE && ((_c = num(attr(tag, "ry"))) != null ? _c : 0) * 2 >= MIN_SIDE) out.push(i);
+    } else if (kind === "rect") {
+      if (((_d = num(attr(tag, "width"))) != null ? _d : 0) >= MIN_SIDE && ((_e = num(attr(tag, "height"))) != null ? _e : 0) >= MIN_SIDE) out.push(i);
+    } else if (kind === "polygon") {
+      const pts = (_h = (_g = ((_f = attr(tag, "points")) != null ? _f : "").match(NUM)) == null ? void 0 : _g.map(Number)) != null ? _h : [];
+      const xs = pts.filter((_, k) => k % 2 === 0), ys = pts.filter((_, k) => k % 2 === 1);
+      if (xs.length >= 3 && Math.max(...xs) - Math.min(...xs) >= MIN_SIDE && Math.max(...ys) - Math.min(...ys) >= MIN_SIDE) out.push(i);
+    } else if (kind === "path") {
+      const sp = firstSubpath((_i = attr(tag, "d")) != null ? _i : "");
+      if (!sp) continue;
+      const w = sp.max.x - sp.min.x, h = sp.max.y - sp.min.y;
+      if (w < MIN_SIDE || h < MIN_SIDE) continue;
+      const gap = Math.hypot(sp.end.x - sp.start.x, sp.end.y - sp.start.y);
+      if (sp.closed || gap <= Math.max(2.5, 0.35 * Math.min(w, h))) out.push(i);
+    }
+  }
+  return out;
+}
+var esc = (s) => s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+var safeColor = (c) => /^[#a-zA-Z0-9(),.%\s\-/]+$/.test(c) ? c : "#000000";
+function gradientLine(w, h, angle = 45) {
+  const a = angle * Math.PI / 180;
+  const dx = Math.cos(a), dy = Math.sin(a);
+  const half = (Math.abs(w * dx) + Math.abs(h * dy)) / 2;
+  const cx = w / 2, cy = h / 2;
+  const r = (n) => Math.round(n * 100) / 100;
+  return { x1: r(cx - dx * half), y1: r(cy - dy * half), x2: r(cx + dx * half), y2: r(cy + dy * half) };
+}
+function applyEffects(body, w, h, base, o) {
+  var _a, _b, _c;
+  const id = ((_a = o.gradientId) != null ? _a : "rdg").replace(/[^a-zA-Z0-9_-]/g, "");
+  const g = o.gradient;
+  const paint = g ? `url(#${id})` : base;
+  let out = body.replace(/currentColor/g, paint);
+  if (o.duotone) {
+    const idx = new Set(fillableShapes(body));
+    if (idx.size) {
+      const fill = o.duotone.color ? safeColor(o.duotone.color) : paint;
+      const opacity = Math.min(1, Math.max(0, (_b = o.duotone.opacity) != null ? _b : 0.2));
+      let i = -1;
+      out = out.replace(/<(path|circle|ellipse|rect|polygon|line|polyline)\b([^>]*?)(\/?)>/g, (whole, tagName, rest, slash) => {
+        i++;
+        if (!idx.has(i)) return whole;
+        const cleaned = rest.replace(/\sfill="[^"]*"/, "");
+        return `<${tagName}${cleaned} fill="${esc(fill)}" fill-opacity="${opacity}"${slash}>`;
+      });
+    }
+  }
+  if (g) {
+    const l = gradientLine(w, h, (_c = g.angle) != null ? _c : 45);
+    out = `<defs><linearGradient id="${id}" gradientUnits="userSpaceOnUse" x1="${l.x1}" y1="${l.y1}" x2="${l.x2}" y2="${l.y2}"><stop offset="0" stop-color="${esc(safeColor(g.from))}"/><stop offset="1" stop-color="${esc(safeColor(g.to))}"/></linearGradient></defs>${out}`;
+  }
+  return out;
+}
+function parseEffectProps(p, gradientId) {
+  var _a, _b;
+  let duotone = null;
+  const d = p.duotone;
+  if (d === true || d === "" || d === "true") duotone = {};
+  else if (typeof d === "number") duotone = { opacity: d };
+  else if (typeof d === "string" && d) duotone = { color: d };
+  else if (d && typeof d === "object") duotone = { color: (_a = d.color) != null ? _a : null, opacity: d.opacity };
+  let gradient = null;
+  const g = p.gradient;
+  if (typeof g === "string" && g) {
+    const [from, to, angle] = g.split(",").map((x) => x.trim());
+    if (from && to) gradient = { from, to, angle: angle !== void 0 && Number.isFinite(Number(angle)) ? Number(angle) : 45 };
+  } else if (Array.isArray(g) && g.length >= 2) gradient = { from: String(g[0]), to: String(g[1]), angle: typeof g[2] === "number" ? g[2] : 45 };
+  else if (g && typeof g === "object" && "from" in g) gradient = { from: g.from, to: g.to, angle: (_b = g.angle) != null ? _b : 45 };
+  if (!duotone && !gradient) return null;
+  return { duotone, gradient, gradientId };
+}
+export {
+  applyEffects,
+  fillableShapes,
+  firstSubpath,
+  gradientLine,
+  parseEffectProps,
+  safeColor
+};

package/dist/motion.js

@@ -0,0 +1,106 @@
+/**
+ * The maths of the rd animations, with no React Native in it: easing curves, and the keyframes of one property turned into a
+ * piecewise-linear table (inputRange / outputRange) that Animated.Value.interpolate can play. The easing of each keyframe interval
+ * is baked into the table by sampling it, which is how CSS applies it too (per interval, not over the whole animation).
+ */
+
+/** cubic-bezier(x1, y1, x2, y2) as a function of time (0..1) to progress */
+export function bezier(x1, y1, x2, y2) {
+  const cx = 3 * x1, bx = 3 * (x2 - x1) - cx, ax = 1 - cx - bx
+  const cy = 3 * y1, by = 3 * (y2 - y1) - cy, ay = 1 - cy - by
+  const sx = (t) => ((ax * t + bx) * t + cx) * t
+  const sy = (t) => ((ay * t + by) * t + cy) * t
+  const dx = (t) => (3 * ax * t + 2 * bx) * t + cx
+  return (x) => {
+    if (x <= 0) return 0
+    if (x >= 1) return 1
+    let t = x
+    for (let i = 0; i < 8; i++) {
+      const e = sx(t) - x
+      if (Math.abs(e) < 1e-6) return sy(t)
+      const d = dx(t)
+      if (Math.abs(d) < 1e-6) break
+      t -= e / d
+    }
+    let lo = 0, hi = 1
+    t = x
+    while (lo < hi) {
+      const e = sx(t)
+      if (Math.abs(e - x) < 1e-6) break
+      if (x > e) lo = t
+      else hi = t
+      t = (hi + lo) / 2
+      if (hi - lo < 1e-7) break
+    }
+    return sy(t)
+  }
+}
+
+const IO = bezier(0.42, 0, 0.58, 1)
+const OUT = bezier(0, 0, 0.58, 1)
+
+/** 'io' | 'o' | 'l' | 's' | [x1, y1, x2, y2] to an easing function */
+export function easing(e) {
+  if (e === 'io') return IO
+  if (e === 'o') return OUT
+  if (e === 'l') return (u) => u
+  if (e === 's') return (u) => (u >= 1 ? 1 : 0) // steps(1, end)
+  if (Array.isArray(e)) return bezier(e[0], e[1], e[2], e[3])
+  return IO
+}
+
+const resolve = (v, vars) => (v !== null && typeof v === 'object' ? v.s * (vars.s ?? 1) : v)
+
+/**
+ * The values of one property over the animation, as { inputRange, outputRange } for Animated.Value.interpolate.
+ *   frames = [[offset, { tx, ty, r, sx, sy, o, d }], ...]   key = 'tx' | 'ty' | 'r' | 'sx' | 'sy' | 'o' | 'd'
+ *   vars   = the element's custom properties ({ s })
+ * Returns null when no keyframe sets the property.
+ */
+export function trackOf(frames, key, ease, vars = {}, samples = 12) {
+  const own = frames.filter(([, f]) => key in f)
+  if (!own.length) return null
+  const fn = easing(ease)
+  const input = []
+  const output = []
+  const push = (x, y) => {
+    if (input.length && x <= input[input.length - 1]) x = input[input.length - 1] + 1e-6 // strictly increasing, as interpolate needs
+    input.push(x)
+    output.push(y)
+  }
+  push(own[0][0], resolve(own[0][1][key], vars))
+  for (let i = 1; i < own.length; i++) {
+    const [o0, f0] = own[i - 1]
+    const [o1, f1] = own[i]
+    const v0 = resolve(f0[key], vars)
+    const v1 = resolve(f1[key], vars)
+    if (ease === 's') {
+      // steps(1, end): hold the value of this keyframe until the next one, then jump
+      push(o1 - 1e-5, v0)
+      push(o1, v1)
+      continue
+    }
+    const n = ease === 'l' || v0 === v1 ? 1 : samples
+    for (let s = 1; s <= n; s++) {
+      const u = s / n
+      push(o0 + (o1 - o0) * u, v0 + (v1 - v0) * fn(u))
+    }
+  }
+  if (input[0] > 0) { input.unshift(0); output.unshift(output[0]) }
+  if (input[input.length - 1] < 1) { input.push(1); output.push(output[output.length - 1]) }
+  return { inputRange: input, outputRange: output }
+}
+
+/** Evaluates a table at progress u (what interpolate does), for tests and for non-animated previews. */
+export function sample(track, u) {
+  const { inputRange: x, outputRange: y } = track
+  if (u <= x[0]) return y[0]
+  if (u >= x[x.length - 1]) return y[y.length - 1]
+  let i = 1
+  while (x[i] < u) i++
+  const t = (u - x[i - 1]) / (x[i] - x[i - 1])
+  return y[i - 1] + (y[i] - y[i - 1]) * t
+}
+
+/** Delay in seconds of one animation for an element: the fixed part plus the per-index part (--k), which staggers lists of strokes. */
+export const delayOf = (a, vars = {}) => (a.l ?? 0) + (a.lk ?? 0) * (vars.k ?? 0)