@rdicons/svelte 0.5.0 → 0.7.0

package/README.md

@@ -40,4 +40,14 @@ Any other attribute (`class`, `style`, `aria-label`, events) is passed to the `<
 
 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
+
+```svelte
+<Folder duotone />
+<Bell gradient={['#ec4899', '#4f46e5']} duotone={0.3} />
+```
+
+`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
+
 Part of [rdicons](https://rdicons.vimalbhatt.com).

package/dist/Icon.svelte

@@ -1,8 +1,8 @@
 <script>
   import { render } from './runtime.js'
   // icon: an icon from "@rdicons/svelte/<library>", for example import { House } from '@rdicons/svelte/lucide'
-  let { icon, size = 24, color, strokeWidth, title, animate, speed, class: className, style, ...rest } = $props()
-  const r = $derived(render(icon, { size, color, strokeWidth, title, animate, speed, className, style }))
+  let { icon, size = 24, color, strokeWidth, title, animate, speed, duotone, gradient, class: className, style, ...rest } = $props()
+  const r = $derived(render(icon, { size, color, strokeWidth, title, animate, speed, duotone, gradient, className, style }))
 </script>
 
 <svg {...r.attrs} {...rest}>{@html r.html}</svg>

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/rd.js

@@ -359,13 +359,13 @@ export const Megaphone = { id: "rd:megaphone", width: 24, height: 24, body: "<g
 export const Meh = { id: "rd:meh", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><circle cx=\"12\" cy=\"12\" r=\"8.5\"/><path d=\"M8.5 15.5h7\"/><path d=\"M9 9.8h.01\"/><path d=\"M15 9.8h.01\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><circle cx=\"12\" cy=\"12\" r=\"8.5\"/><g><g class=\"p0\" style=\"--k:0;--s:1\"><path d=\"M8.5 15.5h7\"/></g></g><g><g class=\"p1\" style=\"--k:0;--s:1\"><path d=\"M9 9.8h.01\"/></g><g class=\"p1\" style=\"--k:1;--s:1\"><path d=\"M15 9.8h.01\"/></g></g></g>","c":".rd-a-meh{overflow:visible}.rd-a-meh *{transform-box:view-box}.rd-a-meh .p0{transform-origin:12px 15.5px}.rd-a-meh .p1{transform-box:fill-box;transform-origin:center}@media (prefers-reduced-motion:no-preference){.rd-a-meh[data-rd-animate=\"hover\"]:hover .p0,:hover>.rd-a-meh[data-rd-animate=\"parent\"] .p0,.rd-a-meh[data-rd-animate=\"play\"] .p0,.rd-a-meh[data-rd-animate=\"loop\"] .p0{animation:rd-meh-f0 calc(0.7s*var(--rd-speed,1)) cubic-bezier(.34,1.3,.5,1);animation-delay:calc((0s + var(--k)*0s)*var(--rd-speed,1))}.rd-a-meh[data-rd-animate=\"hover\"]:hover .p1,:hover>.rd-a-meh[data-rd-animate=\"parent\"] .p1,.rd-a-meh[data-rd-animate=\"play\"] .p1,.rd-a-meh[data-rd-animate=\"loop\"] .p1{animation:rd-meh-f1 calc(0.5s*var(--rd-speed,1)) ease-in-out;animation-delay:calc((0s + var(--k)*0s)*var(--rd-speed,1))}.rd-a-meh[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-meh-f0{0%,100%{scale:1 1}40%{scale:1.14 1}}@keyframes rd-meh-f1{0%,100%{scale:1 1}45%{scale:1 .1}}}"} }
 export const MemoryStick = { id: "rd:memory-stick", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><rect x=\"2.5\" y=\"7.5\" width=\"19\" height=\"9\" rx=\"2\"/><path d=\"M7 11v2M12 11v2M17 11v2\"/><path d=\"M7 16.5v2M12 16.5v2M17 16.5v2\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><rect x=\"2.5\" y=\"7.5\" width=\"19\" height=\"9\" rx=\"2\"/><g><g class=\"p0\" style=\"--k:0;--s:1\"><path d=\"M7 11v2\"/></g><g class=\"p0\" style=\"--k:1;--s:1\"><path d=\"M12 11v2\"/></g><g class=\"p0\" style=\"--k:2;--s:1\"><path d=\"M17 11v2\"/></g></g><g><g class=\"p1\" style=\"--k:0;--s:1\"><path d=\"M7 16.5v2\"/></g><g class=\"p1\" style=\"--k:1;--s:1\"><path d=\"M12 16.5v2\"/></g><g class=\"p1\" style=\"--k:2;--s:1\"><path d=\"M17 16.5v2\"/></g></g></g>","c":".rd-a-memory-stick{overflow:visible}.rd-a-memory-stick *{transform-box:view-box}@media (prefers-reduced-motion:no-preference){.rd-a-memory-stick[data-rd-animate=\"hover\"]:hover .p0,:hover>.rd-a-memory-stick[data-rd-animate=\"parent\"] .p0,.rd-a-memory-stick[data-rd-animate=\"play\"] .p0,.rd-a-memory-stick[data-rd-animate=\"loop\"] .p0{animation:rd-memory-stick-f0 calc(0.7s*var(--rd-speed,1)) ease-in-out;animation-delay:calc((0s + var(--k)*0.12s)*var(--rd-speed,1))}.rd-a-memory-stick[data-rd-animate=\"hover\"]:hover .p1,:hover>.rd-a-memory-stick[data-rd-animate=\"parent\"] .p1,.rd-a-memory-stick[data-rd-animate=\"play\"] .p1,.rd-a-memory-stick[data-rd-animate=\"loop\"] .p1{animation:rd-memory-stick-f1 calc(0.5s*var(--rd-speed,1)) ease-in-out;animation-delay:calc((0s + var(--k)*0.1s)*var(--rd-speed,1))}.rd-a-memory-stick[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-memory-stick-f0{0%,100%{opacity:1}40%{opacity:.15}}@keyframes rd-memory-stick-f1{0%,100%{translate:0 0}40%{translate:0 1.5px}}}"} }
 export const Menu = { id: "rd:menu", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M4 6.5h16M4 12h16M4 17.5h16\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><g class=\"d\" style=\"--k:0\"><path pathLength=\"1\" d=\"M4 6.5h16\"/></g><g class=\"d\" style=\"--k:1\"><path pathLength=\"1\" d=\"M4 12h16\"/></g><g class=\"d\" style=\"--k:2\"><path pathLength=\"1\" d=\"M4 17.5h16\"/></g></g>","c":".rd-a-menu{overflow:visible}.rd-a-menu *{transform-box:view-box}.rd-a-menu .d{stroke-dasharray:1 2}@media (prefers-reduced-motion:no-preference){.rd-a-menu[data-rd-animate=\"hover\"]:hover .d,:hover>.rd-a-menu[data-rd-animate=\"parent\"] .d,.rd-a-menu[data-rd-animate=\"play\"] .d,.rd-a-menu[data-rd-animate=\"loop\"] .d{animation:rd-menu-draw calc(0.75s*var(--rd-speed,1)) ease-out;animation-delay:calc(var(--k)*.1s*var(--rd-speed,1))}.rd-a-menu[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-menu-draw{0%{stroke-dashoffset:1.2}100%{stroke-dashoffset:0}}}"} }
-export const Message = { id: "rd:message", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M12 3.5A8 8 0 1 1 8 18.43L4.5 19.5l.57-4A8 8 0 0 1 12 3.5z\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><g class=\"a\"><path d=\"M12 3.5A8 8 0 1 1 8 18.43L4.5 19.5l.57-4A8 8 0 0 1 12 3.5z\"/></g></g>","c":".rd-a-message{overflow:visible}.rd-a-message *{transform-box:view-box}.rd-a-message .a{transform-origin:12px 12px}@media (prefers-reduced-motion:no-preference){.rd-a-message[data-rd-animate=\"hover\"]:hover .a,:hover>.rd-a-message[data-rd-animate=\"parent\"] .a,.rd-a-message[data-rd-animate=\"play\"] .a,.rd-a-message[data-rd-animate=\"loop\"] .a{animation:rd-message-m calc(0.7s*var(--rd-speed,1)) cubic-bezier(.34,1.3,.5,1)}.rd-a-message[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-message-m{0%,100%{scale:1}35%{scale:.88}65%{scale:1.1}}}"} }
+export const Message = { id: "rd:message", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M12 3.5A8 8 0 1 1 8 18.43L4.5 19.5l.57-4A8 8 0 0 1 12 3.5z\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><g class=\"a\"><path d=\"M12 3.5A8 8 0 1 1 8 18.43L4.5 19.5l.57-4A8 8 0 0 1 12 3.5z\"/></g></g>","c":".rd-a-message{overflow:visible}.rd-a-message *{transform-box:view-box}@media (prefers-reduced-motion:no-preference){.rd-a-message[data-rd-animate=\"hover\"]:hover .a,:hover>.rd-a-message[data-rd-animate=\"parent\"] .a,.rd-a-message[data-rd-animate=\"play\"] .a,.rd-a-message[data-rd-animate=\"loop\"] .a{animation:rd-message-m calc(0.8s*var(--rd-speed,1)) ease-in-out}.rd-a-message[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-message-m{0%,100%{translate:0 0}30%{translate:0 -3px}55%{translate:0 0}72%{translate:0 -1px}}}"} }
 export const MessageCheck = { id: "rd:message-check", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M12 3.5A8 8 0 1 1 8 18.43L4.5 19.5l.570-4A8 8 0 0 1 12 3.5z\"/><path d=\"M9 11.5l2 2 4-4\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><g class=\"base\"><path d=\"M12 3.5A8 8 0 1 1 8 18.43L4.5 19.5l.570-4A8 8 0 0 1 12 3.5z\"/></g><g class=\"badge\"><path d=\"M9 11.5l2 2 4-4\"/></g></g>","c":".rd-a-message-check{overflow:visible}.rd-a-message-check *{transform-box:view-box}.rd-a-message-check .base{transform-origin:12px 12px}.rd-a-message-check .badge{transform-box:fill-box;transform-origin:center}@media (prefers-reduced-motion:no-preference){.rd-a-message-check[data-rd-animate=\"hover\"]:hover .base,:hover>.rd-a-message-check[data-rd-animate=\"parent\"] .base,.rd-a-message-check[data-rd-animate=\"play\"] .base,.rd-a-message-check[data-rd-animate=\"loop\"] .base{animation:rd-message-check-base calc(0.7s*var(--rd-speed,1)) ease-in-out}.rd-a-message-check[data-rd-animate=\"hover\"]:hover .badge,:hover>.rd-a-message-check[data-rd-animate=\"parent\"] .badge,.rd-a-message-check[data-rd-animate=\"play\"] .badge,.rd-a-message-check[data-rd-animate=\"loop\"] .badge{animation:rd-message-check-badge calc(0.8s*var(--rd-speed,1)) cubic-bezier(.34,1.3,.5,1)}.rd-a-message-check[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-message-check-base{0%,100%{scale:1}40%{scale:.96}}@keyframes rd-message-check-badge{0%,100%{scale:1;opacity:1}22%{scale:.1;opacity:0}62%{scale:1.3;opacity:1}}}"} }
 export const MessageCircleHeart = { id: "rd:message-circle-heart", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M12 3.5A8 8 0 1 1 8 18.43L4.5 19.5l.570-4A8 8 0 0 1 12 3.5z\"/><path d=\"M12 14.5c-2-1.3-3-2.3-3-3.6a1.7 1.7 0 0 1 3-1 1.7 1.7 0 0 1 3 1c0 1.3-1 2.3-3 3.6z\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><g class=\"a\"><path d=\"M12 3.5A8 8 0 1 1 8 18.43L4.5 19.5l.570-4A8 8 0 0 1 12 3.5z\"/><path d=\"M12 14.5c-2-1.3-3-2.3-3-3.6a1.7 1.7 0 0 1 3-1 1.7 1.7 0 0 1 3 1c0 1.3-1 2.3-3 3.6z\"/></g></g>","c":".rd-a-message-circle-heart{overflow:visible}.rd-a-message-circle-heart *{transform-box:view-box}.rd-a-message-circle-heart .a{transform-origin:12px 12px}@media (prefers-reduced-motion:no-preference){.rd-a-message-circle-heart[data-rd-animate=\"hover\"]:hover .a,:hover>.rd-a-message-circle-heart[data-rd-animate=\"parent\"] .a,.rd-a-message-circle-heart[data-rd-animate=\"play\"] .a,.rd-a-message-circle-heart[data-rd-animate=\"loop\"] .a{animation:rd-message-circle-heart-m calc(0.7s*var(--rd-speed,1)) cubic-bezier(.34,1.3,.5,1)}.rd-a-message-circle-heart[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-message-circle-heart-m{0%,100%{scale:1}35%{scale:.88}65%{scale:1.1}}}"} }
 export const MessageMinus = { id: "rd:message-minus", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M12 3.5A8 8 0 1 1 8 18.43L4.5 19.5l.570-4A8 8 0 0 1 12 3.5z\"/><path d=\"M9 11.5h6\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><g class=\"base\"><path d=\"M12 3.5A8 8 0 1 1 8 18.43L4.5 19.5l.570-4A8 8 0 0 1 12 3.5z\"/></g><g class=\"badge\"><path d=\"M9 11.5h6\"/></g></g>","c":".rd-a-message-minus{overflow:visible}.rd-a-message-minus *{transform-box:view-box}.rd-a-message-minus .base{transform-origin:12px 12px}.rd-a-message-minus .badge{transform-box:fill-box;transform-origin:center}@media (prefers-reduced-motion:no-preference){.rd-a-message-minus[data-rd-animate=\"hover\"]:hover .base,:hover>.rd-a-message-minus[data-rd-animate=\"parent\"] .base,.rd-a-message-minus[data-rd-animate=\"play\"] .base,.rd-a-message-minus[data-rd-animate=\"loop\"] .base{animation:rd-message-minus-base calc(0.7s*var(--rd-speed,1)) ease-in-out}.rd-a-message-minus[data-rd-animate=\"hover\"]:hover .badge,:hover>.rd-a-message-minus[data-rd-animate=\"parent\"] .badge,.rd-a-message-minus[data-rd-animate=\"play\"] .badge,.rd-a-message-minus[data-rd-animate=\"loop\"] .badge{animation:rd-message-minus-badge calc(0.8s*var(--rd-speed,1)) cubic-bezier(.34,1.3,.5,1)}.rd-a-message-minus[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-message-minus-base{0%,100%{scale:1}40%{scale:.96}}@keyframes rd-message-minus-badge{0%,100%{scale:1;opacity:1}22%{scale:.1;opacity:0}62%{scale:1.3;opacity:1}}}"} }
 export const MessagePlus = { id: "rd:message-plus", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M12 3.5A8 8 0 1 1 8 18.43L4.5 19.5l.570-4A8 8 0 0 1 12 3.5z\"/><path d=\"M12 8.5v5M9.5 11h5\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><g class=\"base\"><path d=\"M12 3.5A8 8 0 1 1 8 18.43L4.5 19.5l.570-4A8 8 0 0 1 12 3.5z\"/></g><g class=\"badge\"><path d=\"M12 8.5v5M9.5 11h5\"/></g></g>","c":".rd-a-message-plus{overflow:visible}.rd-a-message-plus *{transform-box:view-box}.rd-a-message-plus .base{transform-origin:12px 12px}.rd-a-message-plus .badge{transform-box:fill-box;transform-origin:center}@media (prefers-reduced-motion:no-preference){.rd-a-message-plus[data-rd-animate=\"hover\"]:hover .base,:hover>.rd-a-message-plus[data-rd-animate=\"parent\"] .base,.rd-a-message-plus[data-rd-animate=\"play\"] .base,.rd-a-message-plus[data-rd-animate=\"loop\"] .base{animation:rd-message-plus-base calc(0.7s*var(--rd-speed,1)) ease-in-out}.rd-a-message-plus[data-rd-animate=\"hover\"]:hover .badge,:hover>.rd-a-message-plus[data-rd-animate=\"parent\"] .badge,.rd-a-message-plus[data-rd-animate=\"play\"] .badge,.rd-a-message-plus[data-rd-animate=\"loop\"] .badge{animation:rd-message-plus-badge calc(0.8s*var(--rd-speed,1)) cubic-bezier(.34,1.3,.5,1)}.rd-a-message-plus[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-message-plus-base{0%,100%{scale:1}40%{scale:.96}}@keyframes rd-message-plus-badge{0%,100%{scale:1;opacity:1}22%{scale:.1;opacity:0}62%{scale:1.3;opacity:1}}}"} }
 export const MessageQuestion = { id: "rd:message-question", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M12 3.5A8 8 0 1 1 8 18.43L4.5 19.5l.570-4A8 8 0 0 1 12 3.5z\"/><path d=\"M9.8 9.5a2.3 2.3 0 1 1 3.3 2.1c-.700.4-1.1.900-1.1 1.5\"/><path d=\"M12 15.2h.01\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><g class=\"base\"><path d=\"M12 3.5A8 8 0 1 1 8 18.43L4.5 19.5l.570-4A8 8 0 0 1 12 3.5z\"/></g><g class=\"badge\"><path d=\"M9.8 9.5a2.3 2.3 0 1 1 3.3 2.1c-.700.4-1.1.900-1.1 1.5\"/><path d=\"M12 15.2h.01\"/></g></g>","c":".rd-a-message-question{overflow:visible}.rd-a-message-question *{transform-box:view-box}.rd-a-message-question .base{transform-origin:12px 12px}.rd-a-message-question .badge{transform-box:fill-box;transform-origin:center}@media (prefers-reduced-motion:no-preference){.rd-a-message-question[data-rd-animate=\"hover\"]:hover .base,:hover>.rd-a-message-question[data-rd-animate=\"parent\"] .base,.rd-a-message-question[data-rd-animate=\"play\"] .base,.rd-a-message-question[data-rd-animate=\"loop\"] .base{animation:rd-message-question-base calc(0.7s*var(--rd-speed,1)) ease-in-out}.rd-a-message-question[data-rd-animate=\"hover\"]:hover .badge,:hover>.rd-a-message-question[data-rd-animate=\"parent\"] .badge,.rd-a-message-question[data-rd-animate=\"play\"] .badge,.rd-a-message-question[data-rd-animate=\"loop\"] .badge{animation:rd-message-question-badge calc(0.8s*var(--rd-speed,1)) cubic-bezier(.34,1.3,.5,1)}.rd-a-message-question[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-message-question-base{0%,100%{scale:1}40%{scale:.96}}@keyframes rd-message-question-badge{0%,100%{scale:1;opacity:1}22%{scale:.1;opacity:0}62%{scale:1.3;opacity:1}}}"} }
-export const MessageSquare = { id: "rd:message-square", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M7 4.5h10a3.5 3.5 0 0 1 3.5 3.5v5a3.5 3.5 0 0 1-3.5 3.5h-6.5L6 20.5v-4h1A3.5 3.5 0 0 1 3.5 13V8A3.5 3.5 0 0 1 7 4.5z\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><g class=\"a\"><path d=\"M7 4.5h10a3.5 3.5 0 0 1 3.5 3.5v5a3.5 3.5 0 0 1-3.5 3.5h-6.5L6 20.5v-4h1A3.5 3.5 0 0 1 3.5 13V8A3.5 3.5 0 0 1 7 4.5z\"/></g></g>","c":".rd-a-message-square{overflow:visible}.rd-a-message-square *{transform-box:view-box}.rd-a-message-square .a{transform-origin:12px 12px}@media (prefers-reduced-motion:no-preference){.rd-a-message-square[data-rd-animate=\"hover\"]:hover .a,:hover>.rd-a-message-square[data-rd-animate=\"parent\"] .a,.rd-a-message-square[data-rd-animate=\"play\"] .a,.rd-a-message-square[data-rd-animate=\"loop\"] .a{animation:rd-message-square-m calc(0.7s*var(--rd-speed,1)) cubic-bezier(.34,1.3,.5,1)}.rd-a-message-square[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-message-square-m{0%,100%{scale:1}35%{scale:.88}65%{scale:1.1}}}"} }
+export const MessageSquare = { id: "rd:message-square", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M7 4.5h10a3.5 3.5 0 0 1 3.5 3.5v5a3.5 3.5 0 0 1-3.5 3.5h-6.5L6 20.5v-4h1A3.5 3.5 0 0 1 3.5 13V8A3.5 3.5 0 0 1 7 4.5z\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><g class=\"a\"><path d=\"M7 4.5h10a3.5 3.5 0 0 1 3.5 3.5v5a3.5 3.5 0 0 1-3.5 3.5h-6.5L6 20.5v-4h1A3.5 3.5 0 0 1 3.5 13V8A3.5 3.5 0 0 1 7 4.5z\"/></g></g>","c":".rd-a-message-square{overflow:visible}.rd-a-message-square *{transform-box:view-box}@media (prefers-reduced-motion:no-preference){.rd-a-message-square[data-rd-animate=\"hover\"]:hover .a,:hover>.rd-a-message-square[data-rd-animate=\"parent\"] .a,.rd-a-message-square[data-rd-animate=\"play\"] .a,.rd-a-message-square[data-rd-animate=\"loop\"] .a{animation:rd-message-square-m calc(0.8s*var(--rd-speed,1)) ease-in-out}.rd-a-message-square[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-message-square-m{0%,100%{translate:0 0}30%{translate:0 -3px}55%{translate:0 0}72%{translate:0 -1px}}}"} }
 export const MessageSquarePlus = { id: "rd:message-square-plus", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M7 4.5h10a3.5 3.5 0 0 1 3.5 3.5v5a3.5 3.5 0 0 1-3.5 3.5h-6.5L6 20.5v-4h1A3.5 3.5 0 0 1 3.5 13V8A3.5 3.5 0 0 1 7 4.5z\"/><path d=\"M12 7.5v6M9 10.5h6\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><g class=\"base\"><path d=\"M7 4.5h10a3.5 3.5 0 0 1 3.5 3.5v5a3.5 3.5 0 0 1-3.5 3.5h-6.5L6 20.5v-4h1A3.5 3.5 0 0 1 3.5 13V8A3.5 3.5 0 0 1 7 4.5z\"/></g><g class=\"badge\"><path d=\"M12 7.5v6M9 10.5h6\"/></g></g>","c":".rd-a-message-square-plus{overflow:visible}.rd-a-message-square-plus *{transform-box:view-box}.rd-a-message-square-plus .base{transform-origin:12px 12px}.rd-a-message-square-plus .badge{transform-box:fill-box;transform-origin:center}@media (prefers-reduced-motion:no-preference){.rd-a-message-square-plus[data-rd-animate=\"hover\"]:hover .base,:hover>.rd-a-message-square-plus[data-rd-animate=\"parent\"] .base,.rd-a-message-square-plus[data-rd-animate=\"play\"] .base,.rd-a-message-square-plus[data-rd-animate=\"loop\"] .base{animation:rd-message-square-plus-base calc(0.7s*var(--rd-speed,1)) ease-in-out}.rd-a-message-square-plus[data-rd-animate=\"hover\"]:hover .badge,:hover>.rd-a-message-square-plus[data-rd-animate=\"parent\"] .badge,.rd-a-message-square-plus[data-rd-animate=\"play\"] .badge,.rd-a-message-square-plus[data-rd-animate=\"loop\"] .badge{animation:rd-message-square-plus-badge calc(0.8s*var(--rd-speed,1)) cubic-bezier(.34,1.3,.5,1)}.rd-a-message-square-plus[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-message-square-plus-base{0%,100%{scale:1}40%{scale:.96}}@keyframes rd-message-square-plus-badge{0%,100%{scale:1;opacity:1}22%{scale:.1;opacity:0}62%{scale:1.3;opacity:1}}}"} }
 export const MessageSquareText = { id: "rd:message-square-text", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M7 4.5h10a3.5 3.5 0 0 1 3.5 3.5v5a3.5 3.5 0 0 1-3.5 3.5h-6.5L6 20.5v-4h1A3.5 3.5 0 0 1 3.5 13V8A3.5 3.5 0 0 1 7 4.5z\"/><path d=\"M8 9h8M8 12h5\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><g class=\"base\"><path d=\"M7 4.5h10a3.5 3.5 0 0 1 3.5 3.5v5a3.5 3.5 0 0 1-3.5 3.5h-6.5L6 20.5v-4h1A3.5 3.5 0 0 1 3.5 13V8A3.5 3.5 0 0 1 7 4.5z\"/></g><g class=\"badge\"><path d=\"M8 9h8M8 12h5\"/></g></g>","c":".rd-a-message-square-text{overflow:visible}.rd-a-message-square-text *{transform-box:view-box}.rd-a-message-square-text .base{transform-origin:12px 12px}.rd-a-message-square-text .badge{transform-box:fill-box;transform-origin:center}@media (prefers-reduced-motion:no-preference){.rd-a-message-square-text[data-rd-animate=\"hover\"]:hover .base,:hover>.rd-a-message-square-text[data-rd-animate=\"parent\"] .base,.rd-a-message-square-text[data-rd-animate=\"play\"] .base,.rd-a-message-square-text[data-rd-animate=\"loop\"] .base{animation:rd-message-square-text-base calc(0.7s*var(--rd-speed,1)) ease-in-out}.rd-a-message-square-text[data-rd-animate=\"hover\"]:hover .badge,:hover>.rd-a-message-square-text[data-rd-animate=\"parent\"] .badge,.rd-a-message-square-text[data-rd-animate=\"play\"] .badge,.rd-a-message-square-text[data-rd-animate=\"loop\"] .badge{animation:rd-message-square-text-badge calc(0.8s*var(--rd-speed,1)) cubic-bezier(.34,1.3,.5,1)}.rd-a-message-square-text[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-message-square-text-base{0%,100%{scale:1}40%{scale:.96}}@keyframes rd-message-square-text-badge{0%,100%{scale:1;opacity:1}22%{scale:.1;opacity:0}62%{scale:1.3;opacity:1}}}"} }
 export const MessageX = { id: "rd:message-x", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M12 3.5A8 8 0 1 1 8 18.43L4.5 19.5l.570-4A8 8 0 0 1 12 3.5z\"/><path d=\"M9.5 9l5 5M14.5 9l-5 5\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><g class=\"base\"><path d=\"M12 3.5A8 8 0 1 1 8 18.43L4.5 19.5l.570-4A8 8 0 0 1 12 3.5z\"/></g><g class=\"badge\"><path d=\"M9.5 9l5 5M14.5 9l-5 5\"/></g></g>","c":".rd-a-message-x{overflow:visible}.rd-a-message-x *{transform-box:view-box}.rd-a-message-x .base{transform-origin:12px 12px}.rd-a-message-x .badge{transform-box:fill-box;transform-origin:center}@media (prefers-reduced-motion:no-preference){.rd-a-message-x[data-rd-animate=\"hover\"]:hover .base,:hover>.rd-a-message-x[data-rd-animate=\"parent\"] .base,.rd-a-message-x[data-rd-animate=\"play\"] .base,.rd-a-message-x[data-rd-animate=\"loop\"] .base{animation:rd-message-x-base calc(0.7s*var(--rd-speed,1)) ease-in-out}.rd-a-message-x[data-rd-animate=\"hover\"]:hover .badge,:hover>.rd-a-message-x[data-rd-animate=\"parent\"] .badge,.rd-a-message-x[data-rd-animate=\"play\"] .badge,.rd-a-message-x[data-rd-animate=\"loop\"] .badge{animation:rd-message-x-badge calc(0.8s*var(--rd-speed,1)) cubic-bezier(.34,1.3,.5,1)}.rd-a-message-x[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-message-x-base{0%,100%{scale:1}40%{scale:.96}}@keyframes rd-message-x-badge{0%,100%{scale:1;opacity:1}22%{scale:.1;opacity:0}62%{scale:1.3;opacity:1}}}"} }
@@ -495,7 +495,7 @@ export const ShieldAlert = { id: "rd:shield-alert", width: 24, height: 24, body:
 export const ShieldCheck = { id: "rd:shield-check", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M12 3.5l7 2.5v5.6c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z\"/><path d=\"M9 12l2.2 2.2L15.2 10\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><g class=\"base\"><path d=\"M12 3.5l7 2.5v5.6c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z\"/></g><g class=\"badge\"><path d=\"M9 12l2.2 2.2L15.2 10\"/></g></g>","c":".rd-a-shield-check{overflow:visible}.rd-a-shield-check *{transform-box:view-box}.rd-a-shield-check .base{transform-origin:12px 12px}.rd-a-shield-check .badge{transform-box:fill-box;transform-origin:center}@media (prefers-reduced-motion:no-preference){.rd-a-shield-check[data-rd-animate=\"hover\"]:hover .base,:hover>.rd-a-shield-check[data-rd-animate=\"parent\"] .base,.rd-a-shield-check[data-rd-animate=\"play\"] .base,.rd-a-shield-check[data-rd-animate=\"loop\"] .base{animation:rd-shield-check-base calc(0.7s*var(--rd-speed,1)) ease-in-out}.rd-a-shield-check[data-rd-animate=\"hover\"]:hover .badge,:hover>.rd-a-shield-check[data-rd-animate=\"parent\"] .badge,.rd-a-shield-check[data-rd-animate=\"play\"] .badge,.rd-a-shield-check[data-rd-animate=\"loop\"] .badge{animation:rd-shield-check-badge calc(0.8s*var(--rd-speed,1)) cubic-bezier(.34,1.3,.5,1)}.rd-a-shield-check[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-shield-check-base{0%,100%{scale:1}40%{scale:.96}}@keyframes rd-shield-check-badge{0%,100%{scale:1;opacity:1}22%{scale:.1;opacity:0}62%{scale:1.3;opacity:1}}}"} }
 export const ShieldOff = { id: "rd:shield-off", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M12 3.5l7 2.5v5.6c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z\"/><path d=\"M4.5 4.5l15 15\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><g class=\"base\"><path d=\"M12 3.5l7 2.5v5.6c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z\"/></g><g class=\"badge\"><path d=\"M4.5 4.5l15 15\"/></g></g>","c":".rd-a-shield-off{overflow:visible}.rd-a-shield-off *{transform-box:view-box}.rd-a-shield-off .base{transform-origin:12px 12px}.rd-a-shield-off .badge{transform-box:fill-box;transform-origin:center}@media (prefers-reduced-motion:no-preference){.rd-a-shield-off[data-rd-animate=\"hover\"]:hover .base,:hover>.rd-a-shield-off[data-rd-animate=\"parent\"] .base,.rd-a-shield-off[data-rd-animate=\"play\"] .base,.rd-a-shield-off[data-rd-animate=\"loop\"] .base{animation:rd-shield-off-base calc(0.7s*var(--rd-speed,1)) ease-in-out}.rd-a-shield-off[data-rd-animate=\"hover\"]:hover .badge,:hover>.rd-a-shield-off[data-rd-animate=\"parent\"] .badge,.rd-a-shield-off[data-rd-animate=\"play\"] .badge,.rd-a-shield-off[data-rd-animate=\"loop\"] .badge{animation:rd-shield-off-badge calc(0.8s*var(--rd-speed,1)) cubic-bezier(.34,1.3,.5,1)}.rd-a-shield-off[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-shield-off-base{0%,100%{scale:1}40%{scale:.96}}@keyframes rd-shield-off-badge{0%,100%{scale:1;opacity:1}22%{scale:.1;opacity:0}62%{scale:1.3;opacity:1}}}"} }
 export const ShieldPlus = { id: "rd:shield-plus", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M12 3.5l7 2.5v5.6c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z\"/><path d=\"M12 9v5M9.5 11.5h5\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><g class=\"base\"><path d=\"M12 3.5l7 2.5v5.6c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z\"/></g><g class=\"badge\"><path d=\"M12 9v5M9.5 11.5h5\"/></g></g>","c":".rd-a-shield-plus{overflow:visible}.rd-a-shield-plus *{transform-box:view-box}.rd-a-shield-plus .base{transform-origin:12px 12px}.rd-a-shield-plus .badge{transform-box:fill-box;transform-origin:center}@media (prefers-reduced-motion:no-preference){.rd-a-shield-plus[data-rd-animate=\"hover\"]:hover .base,:hover>.rd-a-shield-plus[data-rd-animate=\"parent\"] .base,.rd-a-shield-plus[data-rd-animate=\"play\"] .base,.rd-a-shield-plus[data-rd-animate=\"loop\"] .base{animation:rd-shield-plus-base calc(0.7s*var(--rd-speed,1)) ease-in-out}.rd-a-shield-plus[data-rd-animate=\"hover\"]:hover .badge,:hover>.rd-a-shield-plus[data-rd-animate=\"parent\"] .badge,.rd-a-shield-plus[data-rd-animate=\"play\"] .badge,.rd-a-shield-plus[data-rd-animate=\"loop\"] .badge{animation:rd-shield-plus-badge calc(0.8s*var(--rd-speed,1)) cubic-bezier(.34,1.3,.5,1)}.rd-a-shield-plus[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-shield-plus-base{0%,100%{scale:1}40%{scale:.96}}@keyframes rd-shield-plus-badge{0%,100%{scale:1;opacity:1}22%{scale:.1;opacity:0}62%{scale:1.3;opacity:1}}}"} }
-export const ShieldUser = { id: "rd:shield-user", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M12 3.5l7 2.5v5.6c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z\"/><circle cx=\"12\" cy=\"10\" r=\"2.2\"/><path d=\"M8.2 16.2c.4-1.5 1.8-2.4 3.8-2.4s3.4.9 3.8 2.4\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><g class=\"a\"><path d=\"M12 3.5l7 2.5v5.6c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z\"/><circle cx=\"12\" cy=\"10\" r=\"2.2\"/><path d=\"M8.2 16.2c.4-1.5 1.8-2.4 3.8-2.4s3.4.9 3.8 2.4\"/></g></g>","c":".rd-a-shield-user{overflow:visible}.rd-a-shield-user *{transform-box:view-box}.rd-a-shield-user .a{transform-origin:12px 12px}@media (prefers-reduced-motion:no-preference){.rd-a-shield-user[data-rd-animate=\"hover\"]:hover .a,:hover>.rd-a-shield-user[data-rd-animate=\"parent\"] .a,.rd-a-shield-user[data-rd-animate=\"play\"] .a,.rd-a-shield-user[data-rd-animate=\"loop\"] .a{animation:rd-shield-user-m calc(0.7s*var(--rd-speed,1)) cubic-bezier(.34,1.3,.5,1)}.rd-a-shield-user[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-shield-user-m{0%,100%{scale:1}35%{scale:.88}65%{scale:1.1}}}"} }
+export const ShieldUser = { id: "rd:shield-user", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M12 3.5l7 2.5v5.6c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z\"/><circle cx=\"12\" cy=\"10\" r=\"2.2\"/><path d=\"M8.2 16.2c.4-1.5 1.8-2.4 3.8-2.4s3.4.9 3.8 2.4\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><g class=\"a\"><path d=\"M12 3.5l7 2.5v5.6c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z\"/><circle cx=\"12\" cy=\"10\" r=\"2.2\"/><path d=\"M8.2 16.2c.4-1.5 1.8-2.4 3.8-2.4s3.4.9 3.8 2.4\"/></g></g>","c":".rd-a-shield-user{overflow:visible}.rd-a-shield-user *{transform-box:view-box}.rd-a-shield-user .a{transform-origin:12px 12px}@media (prefers-reduced-motion:no-preference){.rd-a-shield-user[data-rd-animate=\"hover\"]:hover .a,:hover>.rd-a-shield-user[data-rd-animate=\"parent\"] .a,.rd-a-shield-user[data-rd-animate=\"play\"] .a,.rd-a-shield-user[data-rd-animate=\"loop\"] .a{animation:rd-shield-user-m calc(0.8s*var(--rd-speed,1)) ease-in-out}.rd-a-shield-user[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-shield-user-m{0%,100%{scale:1}30%{scale:1.2}55%{scale:.95}75%{scale:1.07}}}"} }
 export const ShieldX = { id: "rd:shield-x", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M12 3.5l7 2.5v5.6c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z\"/><path d=\"M9.5 9.5l5 5M14.5 9.5l-5 5\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><g class=\"base\"><path d=\"M12 3.5l7 2.5v5.6c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z\"/></g><g class=\"badge\"><path d=\"M9.5 9.5l5 5M14.5 9.5l-5 5\"/></g></g>","c":".rd-a-shield-x{overflow:visible}.rd-a-shield-x *{transform-box:view-box}.rd-a-shield-x .base{transform-origin:12px 12px}.rd-a-shield-x .badge{transform-box:fill-box;transform-origin:center}@media (prefers-reduced-motion:no-preference){.rd-a-shield-x[data-rd-animate=\"hover\"]:hover .base,:hover>.rd-a-shield-x[data-rd-animate=\"parent\"] .base,.rd-a-shield-x[data-rd-animate=\"play\"] .base,.rd-a-shield-x[data-rd-animate=\"loop\"] .base{animation:rd-shield-x-base calc(0.7s*var(--rd-speed,1)) ease-in-out}.rd-a-shield-x[data-rd-animate=\"hover\"]:hover .badge,:hover>.rd-a-shield-x[data-rd-animate=\"parent\"] .badge,.rd-a-shield-x[data-rd-animate=\"play\"] .badge,.rd-a-shield-x[data-rd-animate=\"loop\"] .badge{animation:rd-shield-x-badge calc(0.8s*var(--rd-speed,1)) cubic-bezier(.34,1.3,.5,1)}.rd-a-shield-x[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-shield-x-base{0%,100%{scale:1}40%{scale:.96}}@keyframes rd-shield-x-badge{0%,100%{scale:1;opacity:1}22%{scale:.1;opacity:0}62%{scale:1.3;opacity:1}}}"} }
 export const Ship = { id: "rd:ship", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M3.5 15l1.5 4.5h14l1.5-4.5z\"/><path d=\"M7 15V9.5h10V15\"/><path d=\"M10.5 9.5V6.5h3v3\"/><path d=\"M12 4v2.5\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><g><g class=\"p0\" style=\"--k:0;--s:1\"><path d=\"M3.5 15l1.5 4.5h14l1.5-4.5z\"/><path d=\"M7 15V9.5h10V15\"/><path d=\"M10.5 9.5V6.5h3v3\"/><path d=\"M12 4v2.5\"/></g></g></g>","c":".rd-a-ship{overflow:visible}.rd-a-ship *{transform-box:view-box}.rd-a-ship .p0{transform-origin:12px 17px}@media (prefers-reduced-motion:no-preference){.rd-a-ship[data-rd-animate=\"hover\"]:hover .p0,:hover>.rd-a-ship[data-rd-animate=\"parent\"] .p0,.rd-a-ship[data-rd-animate=\"play\"] .p0,.rd-a-ship[data-rd-animate=\"loop\"] .p0{animation:rd-ship-f0 calc(0.9s*var(--rd-speed,1)) ease-in-out;animation-delay:calc((0s + var(--k)*0s)*var(--rd-speed,1))}.rd-a-ship[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-ship-f0{0%,100%{rotate:0deg}35%{rotate:-7deg}70%{rotate:5deg}}}"} }
 export const Shirt = { id: "rd:shirt", width: 24, height: 24, body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M8.5 4l-5.5 3 2 4 2-1V20h10v-10l2 1 2-4-5.5-3a3.5 3.5 0 0 1-7 0z\"/></g>", anim: {"b":"<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><g class=\"d\" style=\"--k:0\"><path pathLength=\"1\" d=\"M8.5 4l-5.5 3 2 4 2-1V20h10v-10l2 1 2-4-5.5-3a3.5 3.5 0 0 1-7 0z\"/></g></g>","c":".rd-a-shirt{overflow:visible}.rd-a-shirt *{transform-box:view-box}.rd-a-shirt .d{stroke-dasharray:1 2}@media (prefers-reduced-motion:no-preference){.rd-a-shirt[data-rd-animate=\"hover\"]:hover .d,:hover>.rd-a-shirt[data-rd-animate=\"parent\"] .d,.rd-a-shirt[data-rd-animate=\"play\"] .d,.rd-a-shirt[data-rd-animate=\"loop\"] .d{animation:rd-shirt-draw calc(0.75s*var(--rd-speed,1)) ease-out;animation-delay:calc(var(--k)*.1s*var(--rd-speed,1))}.rd-a-shirt[data-rd-animate=\"loop\"] *{animation-iteration-count:infinite!important}@keyframes rd-shirt-draw{0%{stroke-dashoffset:1.2}100%{stroke-dashoffset:0}}}"} }

package/dist/runtime.d.ts

@@ -18,6 +18,10 @@ export interface RdIconProps extends Omit<SVGAttributes<SVGSVGElement>, 'width'
   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`, a strength (0.05 to 0.6), another color, or `{ color, opacity }`. */
+  duotone?: boolean | number | string | { color?: string | null; opacity?: number }
+  /** The line runs from one color to another: `['#ec4899', '#4f46e5']`, `"#ec4899,#4f46e5,45"` or `{ from, to, angle }`. Replaces `color`. */
+  gradient?: string | [string, string] | [string, string, number] | { from: string; to: string; angle?: number }
   class?: string
   style?: string
 }

package/dist/runtime.js

@@ -1,3 +1,6 @@
+import { applyEffects, parseEffectProps } from './effects.js'
+
+let seq = 0
 const STROKE_WIDTH = /stroke-width="[^"]*"/g
 const escapeHtml = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
 
@@ -5,15 +8,18 @@ const escapeHtml = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;')
  * Works out the attributes and the inner markup of the <svg> of one icon. Every generated .svelte file calls this,
  * so the icons behave exactly like the React and Vue ones.
  *   meta  = { id, width, height, body, anim? }   anim = { b: animated drawing, c: css }
- *   props = { size, color, strokeWidth, title, animate, speed, className, style }
+ *   props = { size, color, strokeWidth, title, animate, speed, className, style, duotone, gradient }
  */
 export function render(meta, props) {
   const { id, width, height, body, anim } = meta
   const name = id.slice(id.indexOf(':') + 1)
-  const { size = 24, color, strokeWidth, title, animate, speed, className, style } = props
+  const { size = 24, color, strokeWidth, title, animate, speed, className, style, duotone, gradient } = props
   // Animation is opt-in. Only icons that have motion react to `animate`.
   const mode = anim && animate ? (animate === true || animate === '' || animate === 'true' ? 'hover' : animate) : null
-  const drawing = mode ? anim.b : body
+  let drawing = mode ? anim.b : body
+  // the gradient id is made and used inside this one string, so it needs no stable id
+  const fx = duotone || gradient ? parseEffectProps({ duotone, gradient }, 'rdg' + ++seq) : 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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rdicons/svelte",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "79,000+ open-source icons for Svelte 5, from 19 libraries: one Icon component plus tree-shakable icon data. Import only what you use, e.g. import { House } from '@rdicons/svelte/lucide'.",
   "keywords": ["icons", "svelte", "svelte5", "svelte-icons", "svg", "lucide", "tabler", "phosphor", "heroicons", "material-icons", "animated-icons", "rdicons"],
   "license": "MIT AND ISC AND Apache-2.0 AND CC-BY-4.0",