@rdicons/react-ri 0.6.0 → 0.7.0

package/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rdicons/react-ri",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Remix Icon: 3,229 icons as React components. Just this library, tree-shakable. Part of rdicons.",
   "keywords": [
     "icons",
@@ -37,6 +37,7 @@
     "index.d.ts",
     "runtime.js",
     "runtime.d.ts",
+    "effects.js",
     "LICENSES",
     "README.md",
     "LICENSE"

package/runtime.d.ts

@@ -18,6 +18,14 @@ export interface RdIconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'chil
   animate?: boolean | 'hover' | 'parent' | 'play' | 'loop'
   /** Animation speed: 2 is twice as fast, 0.5 twice as slow. Default 1 */
   speed?: number
+  /**
+   * Fills the closed shapes of an outline icon with a soft second tone.
+   * `true`: the icon's own color at 20%. A number (0.05 to 0.6): the strength. A string: another color for the fill. An object: `{ color, opacity }`.
+   * Icons without a closed shape (arrows, plus) look the same.
+   */
+  duotone?: boolean | number | string | { color?: string | null; opacity?: number }
+  /** The line runs from one color to another: `['#ec4899', '#4f46e5']`, with an angle as a third item (45 by default), or `{ from, to, angle }`. Replaces `color`. */
+  gradient?: [string, string] | [string, string, number] | { from: string; to: string; angle?: number }
 }
 
 export type RdIcon = ForwardRefExoticComponent<RdIconProps & RefAttributes<SVGSVGElement>>

package/runtime.js

@@ -1,6 +1,12 @@
-import { createElement, forwardRef } from 'react'
+import * as React from 'react'
+import { applyEffects, parseEffectProps } from './effects.js'
+
+const { createElement, forwardRef } = React
 
 const STROKE_WIDTH = /stroke-width="[^"]*"/g
+let legacyIds = 0
+// useId needs React 18; on React 17 a counter kept in a ref gives every icon its own gradient id
+const useUid = React.useId || function useLegacyUid() { const ref = React.useRef(null); if (ref.current === null) ref.current = ':l' + ++legacyIds; return ref.current }
 const escapeHtml = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
 
 /**
@@ -9,10 +15,14 @@ const escapeHtml = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;')
  */
 export function createIcon(id, body, width = 24, height = 24, anim) {
   const name = id.slice(id.indexOf(':') + 1)
-  const Icon = forwardRef(function RdIcon({ size = 24, color, strokeWidth, title, style, animate, speed, className, ...rest }, ref) {
+  const Icon = forwardRef(function RdIcon({ size = 24, color, strokeWidth, title, style, animate, speed, duotone, gradient, className, ...rest }, ref) {
+    const uid = useUid()
     // Animation is opt-in. Only icons that have motion (anim = { b: animated drawing, c: css }) react to `animate`; the rest ignore it.
     const mode = anim && animate ? (animate === true ? 'hover' : animate) : null
-    const drawing = mode ? anim.b : body
+    let drawing = mode ? anim.b : body
+    // colour effects: a soft second tone in closed shapes, and/or a gradient along the line
+    const fx = duotone || gradient ? parseEffectProps({ duotone, gradient }, 'rdg' + uid) : null
+    if (fx) drawing = applyEffects(drawing, width, height, 'currentColor', fx)
     const html = strokeWidth == null ? drawing : drawing.replace(STROKE_WIDTH, 'stroke-width="' + strokeWidth + '"')
     // Fit the longest side into the `size` box, like the rdicons website does.
     const n = typeof size === 'number' ? size : Number.parseFloat(size)