@nice2dev/icons 1.3.16 → 1.3.17

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @nice2dev/icons — Changelog
 
+## 1.3.17
+
+### Patch Changes
+
+- 59a1a84: Icons, showcase feedback round 41:
+
+  - **Removed** (breaking): NtdGym (use NtdDumbbell), NtdPizzaFood (NtdPizza), NtdDelivery (NtdTruck),
+    NtdOmniVerkBadge, NtdOmniVerkLogo, NtdOmniVerkSpinner (`<NtdOmniVerk animation="spin" />` or NiceSpinner) and
+    NtdOmniVerkWatermark (NiceLogo).
+  - **`animationSpeed`** on every icon, the style decorators and SmilAnimationWrapper — and every animation now runs
+    at half its earlier pace by default: CSS animations, `smilAnimation`, gradient animations and the icons' own
+    (NtdOmniVerk, NtdOmniVerkAnimated). `animationSpeed={2}` is the old pace; an explicit duration keeps its length.
+    createIcon's new `animated` option scales an icon's own SVG animation times.
+  - **Redrawn**: NtdNuke, NtdRunning, NtdDumbbell, NtdBeer, NtdCrown, NtdTarget, NtdMolecule, NtdPlate, NtdFood,
+    NtdCoffeeFood, NtdTruck, NtdRefresh, NtdLayers, NtdTrash, NtdCoins; NtdPlanet's ring is primary with a thin
+    accent rim.
+
 ## 1.3.16
 
 ### Patch Changes

package/README.md

@@ -524,7 +524,7 @@ Properties passed to every path renderer (pre-resolved from user props):
 
 ### Brand & Logo (14 icons)
 
-`NtdNiceToDev` · `NtdNiceMonogram` · `NtdNiceOrbit` · `NtdNiceSpark` · `NtdNiceShield` · `NtdNiceBadge` · `NtdNiceCore` · `NtdNiceCrest` · `NtdNiceHelix` · `NtdNicePortal` · `NtdNicePulseMark` · `NtdNiceFlagship` · `NtdOmniVerk` · `NtdOmniVerkLogo`
+`NtdNiceToDev` · `NtdNiceMonogram` · `NtdNiceOrbit` · `NtdNiceSpark` · `NtdNiceShield` · `NtdNiceBadge` · `NtdNiceCore` · `NtdNiceCrest` · `NtdNiceHelix` · `NtdNicePortal` · `NtdNicePulseMark` · `NtdNiceFlagship` · `NtdOmniVerk` · `NtdOmniVerkAnimated`
 
 ### Brand Studio (25 icons)
 

package/dist/cjs/animationSpeed.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const ANIMATION_SLOWDOWN = 2;
+function animationScale(speed) {
+  const s = typeof speed === "number" && speed > 0 && Number.isFinite(speed) ? speed : 1;
+  return ANIMATION_SLOWDOWN / s;
+}
+function durationScale(durationGiven, speed) {
+  return durationGiven ? animationScale(speed) / ANIMATION_SLOWDOWN : animationScale(speed);
+}
+const SMIL_ELEMENTS = /* @__PURE__ */ new Set([
+  "animate",
+  "animateTransform",
+  "animateMotion",
+  "animateColor",
+  "set"
+]);
+const TIME_PROPS = ["dur", "begin", "end"];
+const CLOCK = /^(\d*\.?\d+)(ms|s|min|h)?$/;
+function scaleTime(value, scale) {
+  if (typeof value === "number") {
+    return Number((value * scale).toFixed(4));
+  }
+  return value.split(";").map((part) => {
+    const m = CLOCK.exec(part.trim());
+    if (!m) {
+      return part;
+    }
+    return `${Number((Number(m[1]) * scale).toFixed(4))}${m[2] ?? "s"}`;
+  }).join(";");
+}
+function retimeTree(node, scale) {
+  if (scale === 1) {
+    return node;
+  }
+  const walk = (n) => {
+    if (Array.isArray(n)) {
+      return n.map(walk);
+    }
+    if (!React.isValidElement(n)) {
+      return n;
+    }
+    const props = n.props;
+    const isHost = typeof n.type === "string";
+    const isFragment = n.type === React.Fragment;
+    if (!isHost && !isFragment) {
+      return n;
+    }
+    const next = {};
+    if (isHost && SMIL_ELEMENTS.has(n.type)) {
+      for (const key of TIME_PROPS) {
+        const v = props[key];
+        if (typeof v === "string" || typeof v === "number") {
+          next[key] = scaleTime(v, scale);
+        }
+      }
+    }
+    if (props.children !== void 0) {
+      next.children = React.Children.map(props.children, walk);
+    }
+    return Object.keys(next).length > 0 ? React.cloneElement(n, next) : n;
+  };
+  return walk(node);
+}
+exports.ANIMATION_SLOWDOWN = ANIMATION_SLOWDOWN;
+exports.animationScale = animationScale;
+exports.durationScale = durationScale;
+exports.retimeTree = retimeTree;

package/dist/cjs/createIcon.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
+const animationSpeed = require("./animationSpeed.js");
 const sharpen = require("./sharpen.js");
 const smilAnimations = require("./smilAnimations.js");
 const stacking = require("./stacking.js");
@@ -26,11 +27,12 @@ function useColorScheme() {
   return React.useSyncExternalStore(subscribeColorScheme, getColorScheme, () => "light");
 }
 const BOX_CENTER = [12, 12];
-function renderGradientDef(id, preset, type, angle, animation) {
+function renderGradientDef(id, preset, type, angle, animation, timeScale = 1) {
   const stops = types.GRADIENT_PRESETS[preset];
   if (!stops) {
     return null;
   }
+  const loop = `${Number((3 * timeScale).toFixed(4))}s`;
   const stopEls = stops.map((color, i) => {
     const offset = `${Math.round(i / (stops.length - 1) * 100)}%`;
     const nextColor = stops[(i + 1) % stops.length];
@@ -40,7 +42,7 @@ function renderGradientDef(id, preset, type, angle, animation) {
         {
           attributeName: "stop-color",
           values: `${color};${nextColor};${color}`,
-          dur: "3s",
+          dur: loop,
           repeatCount: "indefinite"
         }
       ) }, i);
@@ -60,7 +62,7 @@ function renderGradientDef(id, preset, type, angle, animation) {
           type: "rotate",
           from: "0 12 12",
           to: "360 12 12",
-          dur: "3s",
+          dur: loop,
           repeatCount: "indefinite"
         },
         "spin"
@@ -74,7 +76,7 @@ function renderGradientDef(id, preset, type, angle, animation) {
         {
           attributeName: "x1",
           values: "-24;24;-24",
-          dur: "3s",
+          dur: loop,
           repeatCount: "indefinite"
         },
         "shift-x1"
@@ -84,7 +86,7 @@ function renderGradientDef(id, preset, type, angle, animation) {
         {
           attributeName: "x2",
           values: "0;48;0",
-          dur: "3s",
+          dur: loop,
           repeatCount: "indefinite"
         },
         "shift-x2"
@@ -167,7 +169,13 @@ function renderCutoutShape(shape, fill, maskId) {
   }
 }
 function createIcon(options) {
-  const { displayName, viewBox = "0 0 24 24", paths, textCenter = BOX_CENTER } = options;
+  const {
+    displayName,
+    viewBox = "0 0 24 24",
+    paths,
+    textCenter = BOX_CENTER,
+    animated = false
+  } = options;
   const solidDuotone = (props) => paths.solid({ ...props, accentColor: props.secondaryColor, accentOpacity: 1 });
   const perfect = {
     x: options.perfectStackX ?? textCenter[0],
@@ -194,8 +202,9 @@ function createIcon(options) {
       strokeLinejoin: propLinejoin,
       animation,
       animationDuration,
+      animationSpeed: animationSpeed$1,
       smilAnimation,
-      smilDuration = 1,
+      smilDuration,
       smilRepeatCount = "indefinite",
       smilEasing = "ease-in-out",
       smilDelay = 0,
@@ -271,9 +280,12 @@ function createIcon(options) {
       }
       const transformString = transforms.length > 0 ? transforms.join(" ") : void 0;
       const transitionValue = transition === true ? "transform 0.3s ease" : typeof transition === "string" ? `transform ${transition}` : void 0;
+      const timeScale = animationSpeed.animationScale(animationSpeed$1);
       const animStyle = {
         // the variable carries the duration to the parts an icon animates inside itself
         ...animationDuration ? { animationDuration, "--ntd-anim-duration": animationDuration } : {},
+        // animations.css multiplies its times by it (default 2 there, the slowdown)
+        ...animationSpeed$1 !== void 0 ? { "--ntd-anim-scale": String(timeScale) } : {},
         ...transformString ? { transform: transformString } : {},
         ...transformString ? { transformOrigin } : {},
         ...transitionValue ? { transition: transitionValue } : {},
@@ -282,7 +294,8 @@ function createIcon(options) {
       const smilAnimationElements = smilAnimation ? smilAnimations.generateSmilAnimation(
         {
           type: smilAnimation,
-          duration: smilDuration,
+          // 1 s before 1.3.17 by default; a given smilDuration keeps its length
+          duration: (smilDuration ?? 1) * animationSpeed.durationScale(smilDuration !== void 0, animationSpeed$1),
           repeatCount: smilRepeatCount,
           easing: smilEasing,
           delay: smilDelay
@@ -291,6 +304,7 @@ function createIcon(options) {
       ) : null;
       const needsSmilScaleWrapper = smilAnimation && ["heartbeat", "scale-pulse", "grow", "shrink", "rubber", "pop"].includes(smilAnimation);
       const rendered = isCutout ? renderCutoutShape(cutoutShape, gradient ? effectivePrimary : resolvedSecondary, maskId) : variant === "sharp" ? sharpen.sharpenTree(renderer(renderProps)) : variant === "rounded" ? sharpen.roundTree(renderer(renderProps)) : variant === "wireframe" ? sharpen.wireTree(renderer(renderProps), effectivePrimary) : renderer(renderProps);
+      const paced = animated ? animationSpeed.retimeTree(rendered, timeScale) : rendered;
       const stacked = stacking.renderStackChildren(children, {
         variant,
         primaryColor: effectivePrimary,
@@ -302,9 +316,9 @@ function createIcon(options) {
         textSize
       });
       const drawn = stacked ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        rendered,
+        paced,
         stacked
-      ] }) : rendered;
+      ] }) : paced;
       const iconContent = variant === "mini" ? /* @__PURE__ */ jsxRuntime.jsx(
         "g",
         {
@@ -331,20 +345,30 @@ function createIcon(options) {
           ...rest,
           children: [
             title && /* @__PURE__ */ jsxRuntime.jsx("title", { children: title }),
-            gradient && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: renderGradientDef(gradId, gradient, gradientType, gradientAngle, gradientAnimation) }),
+            gradient && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: renderGradientDef(
+              gradId,
+              gradient,
+              gradientType,
+              gradientAngle,
+              gradientAnimation,
+              timeScale
+            ) }),
             is3d && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: render3dFilterDef(filterId) }),
             isCutout && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("mask", { id: maskId, children: [
               /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "0", width: "24", height: "24", fill: "white" }),
-              /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(12,12) scale(0.8) translate(-12,-12)", children: paths.solid({
-                ...renderProps,
-                primaryColor: "black",
-                secondaryColor: "black",
-                accentColor: "white",
-                primaryOpacity: 1,
-                secondaryOpacity: 1,
-                accentOpacity: 1,
-                uid: `${uid}m`
-              }) })
+              /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(12,12) scale(0.8) translate(-12,-12)", children: (() => {
+                const mask = paths.solid({
+                  ...renderProps,
+                  primaryColor: "black",
+                  secondaryColor: "black",
+                  accentColor: "white",
+                  primaryOpacity: 1,
+                  secondaryOpacity: 1,
+                  accentOpacity: 1,
+                  uid: `${uid}m`
+                });
+                return animated ? animationSpeed.retimeTree(mask, timeScale) : mask;
+              })() })
             ] }) }),
             smilAnimation ? needsSmilScaleWrapper ? /* @__PURE__ */ jsxRuntime.jsxs(
               "g",