@thesvg/ui-react 4.2.0 → 4.3.0

package/README.md

@@ -62,14 +62,25 @@ import { BellIcon, BellGlassIcon } from "@thesvg/ui-react/bell";
 ```
 
 
-## Animated icons
+## Motion
 
-Add `animated` to pop an icon in and draw its strokes, once. It works on every look, and the stroke drawing shows on outline and glass outline.
+Add `animated` to give an icon motion. It works on every look.
 
 ```tsx
-<SunIcon animated />
+<SunIcon animated />          {/* draw */}
+<LoaderCircleIcon animated="spin" />
+<BellIcon animated="ring" />
 ```
 
+| `animated` | Motion |
+| --- | --- |
+| `true` or `"draw"` | Pops in with a spring and draws the strokes one after another, once |
+| `"pop"` | The spring only, once |
+| `"bounce"` | A short hop, once |
+| `"ring"` | A swing from the top, once. Made for a bell |
+| `"spin"` | Turns forever. Made for loaders |
+| `"pulse"` | Breathes forever. Made for a heart |
+
 `ThemeIcon` is a ready-made switcher icon: a sun for light, a moon for dark and a display for system. It plays the motion each time the theme changes.
 
 ```tsx
@@ -78,7 +89,15 @@ import { ThemeIcon } from "@thesvg/ui-react";
 <ThemeIcon theme={theme} size={20} /> {/* "light" | "dark" | "system" */}
 ```
 
-The motion is plain CSS inside the SVG, so there is no animation library to install, and it stands still for people who prefer reduced motion.
+`IconSwap` cross-fades between two icons with a small turn and scale, for a toggle like menu and close, or play and pause:
+
+```tsx
+import { IconSwap, MenuIcon, XIcon } from "@thesvg/ui-react";
+
+<IconSwap active={open} off={MenuIcon} on={XIcon} size={20} />
+```
+
+It is plain CSS inside the SVG: no animation library, and it stands still for people who prefer reduced motion. Import only the icons you use, for example `import { BellIcon } from "@thesvg/ui-react/bell"`. The motion code is one small helper (about 1.6 KB gzipped) shared by every icon, and an icon you never animate carries no motion CSS.
 
 ## Looks
 

package/dist/_anim.cjs

@@ -1,31 +1,83 @@
-// Entrance motion for UI icons, in plain CSS inside the svg, so it needs no animation library and works in React, Vue,
-// Svelte and in a standalone svg file. The icon pops in with a spring and its strokes draw themselves one after another.
+// Motion for UI icons, in plain CSS inside the svg: no animation library, and it works in React, Vue, Svelte and in a
+// standalone svg file. A preset is a name:
+//   draw    pop in with a spring and draw the strokes one after another, once (what `animated` alone means)
+//   pop     the spring only, once
+//   bounce  a short hop, once
+//   ring    a swing from the top, once (a bell)
+//   spin    turns forever (a loader)
+//   pulse   breathes forever (a heart)
 // Plain ES module with no dependencies: package-builder copies it into every package as _anim.js.
-const ANIMATED_SLUGS = ["sun", "moon", "theme-system"];
+const PRESETS = ["draw", "pop", "bounce", "ring", "spin", "pulse"];
+
+// Icons that also ship a ready-made `<look>-animated.svg`, with the preset each one uses.
+const ANIMATED = {
+  sun: "draw",
+  moon: "draw",
+  "theme-system": "draw",
+  "loader-circle": "spin",
+  "refresh-cw": "spin",
+  heart: "pulse",
+  bell: "ring",
+};
+const ANIMATED_SLUGS = Object.keys(ANIMATED);
 
 const SHAPES = /<(path|circle|rect|line|polyline|polygon|ellipse)(?=[\s/>])/g;
 
-const css = (cls) => {
-  let delays = "";
-  for (let i = 1; i <= 12; i++) delays += "." + cls + ">g[stroke]>:nth-child(" + i + "){animation-delay:" + (0.04 + i * 0.045).toFixed(3) + "s}";
-  return (
-    "." + cls + "{transform-box:view-box;transform-origin:12px 12px;animation:ua-pop .6s cubic-bezier(.34,1.56,.64,1) both}" +
-    "." + cls + ">g[stroke]>*{stroke-dasharray:1 1;stroke-dashoffset:1;animation:ua-draw .55s ease-out forwards}" +
-    delays +
-    "@keyframes ua-pop{from{transform:scale(0) rotate(-90deg);opacity:0}to{transform:none;opacity:1}}" +
-    "@keyframes ua-draw{to{stroke-dashoffset:0}}" +
-    "@media (prefers-reduced-motion:reduce){." + cls + ",." + cls + ">g[stroke]>*{animation:none!important;stroke-dasharray:none!important;stroke-dashoffset:0!important}}"
-  );
+const FRAMES = {
+  pop: "@keyframes ua-pop{from{transform:scale(0) rotate(-90deg);opacity:0}to{transform:none;opacity:1}}",
+  bounce: "@keyframes ua-bounce{0%{transform:translateY(0)}35%{transform:translateY(-3.5px)}65%{transform:translateY(.6px)}100%{transform:translateY(0)}}",
+  ring: "@keyframes ua-ring{0%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-13deg)}45%{transform:rotate(9deg)}60%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}100%{transform:rotate(0)}}",
+  spin: "@keyframes ua-spin{to{transform:rotate(360deg)}}",
+  pulse: "@keyframes ua-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}",
+  draw: "@keyframes ua-draw{to{stroke-dashoffset:0}}",
+};
+
+const MOTION = {
+  draw: "animation:ua-pop .6s cubic-bezier(.34,1.56,.64,1) both",
+  pop: "animation:ua-pop .6s cubic-bezier(.34,1.56,.64,1) both",
+  bounce: "animation:ua-bounce .7s cubic-bezier(.28,.84,.42,1) both",
+  ring: "transform-origin:12px 3px;animation:ua-ring 1s ease-in-out both",
+  spin: "animation:ua-spin .9s linear infinite",
+  pulse: "animation:ua-pulse 1.4s ease-in-out infinite",
+};
+
+const preset = (p) => (PRESETS.includes(p) ? p : "draw");
+
+const css = (cls, name) => {
+  let out = "." + cls + "{transform-box:view-box;transform-origin:12px 12px;" + MOTION[name] + "}";
+  out += "@media (prefers-reduced-motion:reduce){." + cls + "{animation:none!important}";
+  if (name === "draw") {
+    out += "." + cls + ">g[stroke]>*{animation:none!important;stroke-dasharray:none!important;stroke-dashoffset:0!important}";
+  }
+  out += "}";
+  if (name === "draw") {
+    out += "." + cls + ">g[stroke]>*{stroke-dasharray:1 1;stroke-dashoffset:1;animation:ua-draw .55s ease-out forwards}";
+    for (let i = 1; i <= 12; i++) out += "." + cls + ">g[stroke]>:nth-child(" + i + "){animation-delay:" + (0.04 + i * 0.045).toFixed(3) + "s}";
+    out += FRAMES.draw;
+  }
+  return out + FRAMES[name === "draw" ? "pop" : name];
 };
 
-const wrap = (html, cls) => "<style>" + css(cls) + '</style><g class="' + cls + '">' + html.replace(SHAPES, '<$1 pathLength="1"') + "</g>";
+const wrap = (html, cls, name) =>
+  "<style>" + css(cls, name) + '</style><g class="' + cls + '">' + (name === "draw" ? html.replace(SHAPES, '<$1 pathLength="1"') : html) + "</g>";
 
-/** Inner markup of an icon, wrapped so it animates. uid keeps two icons on one page from sharing a class. */
-const animate = (html, uid) => {
+/**
+ * Inner markup of an icon, wrapped so it moves. `kind` is a preset name, or true for draw. uid keeps two icons on a page apart.
+ * @param {string} html
+ * @param {string | number} uid
+ * @param {string | boolean} [kind]
+ * @returns {{ cls: string, html: string }}
+ */
+const animate = (html, uid, kind = "draw") => {
   const cls = "ua-" + uid;
-  return { cls, html: wrap(html, cls) };
+  return { cls, html: wrap(html, cls, preset(kind)) };
 };
 
-/** A whole standalone svg file, animated on load. */
-const animateSvg = (svg) => svg.replace(/^(<svg[^>]*>)([\s\S]*)(<\/svg>)\s*$/, (_m, open, body, close) => open + wrap(body, "ua") + close);
-module.exports = { animate, animateSvg };
+/**
+ * A whole standalone svg file, moving on load.
+ * @param {string} svg
+ * @param {string} [kind]
+ * @returns {string}
+ */
+const animateSvg = (svg, kind = "draw") => svg.replace(/^(<svg[^>]*>)([\s\S]*)(<\/svg>)\s*$/, (_m, open, body, close) => open + wrap(body, "ua", preset(kind)) + close);
+module.exports = { animate, animateSvg, ANIMATED, ANIMATED_SLUGS, PRESETS };

package/dist/_anim.d.ts

@@ -1,3 +1,5 @@
-export declare const animate: (html: string, uid: string | number) => { cls: string; html: string };
-export declare const animateSvg: (svg: string) => string;
+export declare const animate: (html: string, uid: string | number, kind?: string | boolean) => { cls: string; html: string };
+export declare const animateSvg: (svg: string, kind?: string) => string;
 export declare const ANIMATED_SLUGS: string[];
+export declare const ANIMATED: Record<string, string>;
+export declare const PRESETS: string[];

package/dist/_anim.js

@@ -1,30 +1,82 @@
-// Entrance motion for UI icons, in plain CSS inside the svg, so it needs no animation library and works in React, Vue,
-// Svelte and in a standalone svg file. The icon pops in with a spring and its strokes draw themselves one after another.
+// Motion for UI icons, in plain CSS inside the svg: no animation library, and it works in React, Vue, Svelte and in a
+// standalone svg file. A preset is a name:
+//   draw    pop in with a spring and draw the strokes one after another, once (what `animated` alone means)
+//   pop     the spring only, once
+//   bounce  a short hop, once
+//   ring    a swing from the top, once (a bell)
+//   spin    turns forever (a loader)
+//   pulse   breathes forever (a heart)
 // Plain ES module with no dependencies: package-builder copies it into every package as _anim.js.
-export const ANIMATED_SLUGS = ["sun", "moon", "theme-system"];
+export const PRESETS = ["draw", "pop", "bounce", "ring", "spin", "pulse"];
+
+// Icons that also ship a ready-made `<look>-animated.svg`, with the preset each one uses.
+export const ANIMATED = {
+  sun: "draw",
+  moon: "draw",
+  "theme-system": "draw",
+  "loader-circle": "spin",
+  "refresh-cw": "spin",
+  heart: "pulse",
+  bell: "ring",
+};
+export const ANIMATED_SLUGS = Object.keys(ANIMATED);
 
 const SHAPES = /<(path|circle|rect|line|polyline|polygon|ellipse)(?=[\s/>])/g;
 
-const css = (cls) => {
-  let delays = "";
-  for (let i = 1; i <= 12; i++) delays += "." + cls + ">g[stroke]>:nth-child(" + i + "){animation-delay:" + (0.04 + i * 0.045).toFixed(3) + "s}";
-  return (
-    "." + cls + "{transform-box:view-box;transform-origin:12px 12px;animation:ua-pop .6s cubic-bezier(.34,1.56,.64,1) both}" +
-    "." + cls + ">g[stroke]>*{stroke-dasharray:1 1;stroke-dashoffset:1;animation:ua-draw .55s ease-out forwards}" +
-    delays +
-    "@keyframes ua-pop{from{transform:scale(0) rotate(-90deg);opacity:0}to{transform:none;opacity:1}}" +
-    "@keyframes ua-draw{to{stroke-dashoffset:0}}" +
-    "@media (prefers-reduced-motion:reduce){." + cls + ",." + cls + ">g[stroke]>*{animation:none!important;stroke-dasharray:none!important;stroke-dashoffset:0!important}}"
-  );
+const FRAMES = {
+  pop: "@keyframes ua-pop{from{transform:scale(0) rotate(-90deg);opacity:0}to{transform:none;opacity:1}}",
+  bounce: "@keyframes ua-bounce{0%{transform:translateY(0)}35%{transform:translateY(-3.5px)}65%{transform:translateY(.6px)}100%{transform:translateY(0)}}",
+  ring: "@keyframes ua-ring{0%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-13deg)}45%{transform:rotate(9deg)}60%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}100%{transform:rotate(0)}}",
+  spin: "@keyframes ua-spin{to{transform:rotate(360deg)}}",
+  pulse: "@keyframes ua-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}",
+  draw: "@keyframes ua-draw{to{stroke-dashoffset:0}}",
+};
+
+const MOTION = {
+  draw: "animation:ua-pop .6s cubic-bezier(.34,1.56,.64,1) both",
+  pop: "animation:ua-pop .6s cubic-bezier(.34,1.56,.64,1) both",
+  bounce: "animation:ua-bounce .7s cubic-bezier(.28,.84,.42,1) both",
+  ring: "transform-origin:12px 3px;animation:ua-ring 1s ease-in-out both",
+  spin: "animation:ua-spin .9s linear infinite",
+  pulse: "animation:ua-pulse 1.4s ease-in-out infinite",
+};
+
+const preset = (p) => (PRESETS.includes(p) ? p : "draw");
+
+const css = (cls, name) => {
+  let out = "." + cls + "{transform-box:view-box;transform-origin:12px 12px;" + MOTION[name] + "}";
+  out += "@media (prefers-reduced-motion:reduce){." + cls + "{animation:none!important}";
+  if (name === "draw") {
+    out += "." + cls + ">g[stroke]>*{animation:none!important;stroke-dasharray:none!important;stroke-dashoffset:0!important}";
+  }
+  out += "}";
+  if (name === "draw") {
+    out += "." + cls + ">g[stroke]>*{stroke-dasharray:1 1;stroke-dashoffset:1;animation:ua-draw .55s ease-out forwards}";
+    for (let i = 1; i <= 12; i++) out += "." + cls + ">g[stroke]>:nth-child(" + i + "){animation-delay:" + (0.04 + i * 0.045).toFixed(3) + "s}";
+    out += FRAMES.draw;
+  }
+  return out + FRAMES[name === "draw" ? "pop" : name];
 };
 
-const wrap = (html, cls) => "<style>" + css(cls) + '</style><g class="' + cls + '">' + html.replace(SHAPES, '<$1 pathLength="1"') + "</g>";
+const wrap = (html, cls, name) =>
+  "<style>" + css(cls, name) + '</style><g class="' + cls + '">' + (name === "draw" ? html.replace(SHAPES, '<$1 pathLength="1"') : html) + "</g>";
 
-/** Inner markup of an icon, wrapped so it animates. uid keeps two icons on one page from sharing a class. */
-export const animate = (html, uid) => {
+/**
+ * Inner markup of an icon, wrapped so it moves. `kind` is a preset name, or true for draw. uid keeps two icons on a page apart.
+ * @param {string} html
+ * @param {string | number} uid
+ * @param {string | boolean} [kind]
+ * @returns {{ cls: string, html: string }}
+ */
+export const animate = (html, uid, kind = "draw") => {
   const cls = "ua-" + uid;
-  return { cls, html: wrap(html, cls) };
+  return { cls, html: wrap(html, cls, preset(kind)) };
 };
 
-/** A whole standalone svg file, animated on load. */
-export const animateSvg = (svg) => svg.replace(/^(<svg[^>]*>)([\s\S]*)(<\/svg>)\s*$/, (_m, open, body, close) => open + wrap(body, "ua") + close);
+/**
+ * A whole standalone svg file, moving on load.
+ * @param {string} svg
+ * @param {string} [kind]
+ * @returns {string}
+ */
+export const animateSvg = (svg, kind = "draw") => svg.replace(/^(<svg[^>]*>)([\s\S]*)(<\/svg>)\s*$/, (_m, open, body, close) => open + wrap(body, "ua", preset(kind)) + close);

package/dist/_make.cjs

@@ -11,7 +11,7 @@ const make = (html, name, ids) => {
   const scope = scoper(ids);
   const Icon = forwardRef(({ size = 24, shadow = 0, animated = false, style, ...props }, ref) => {
     const uid = useId().replace(/[^a-zA-Z0-9]/g, "");
-    return createElement("svg", { ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: size, height: size, overflow: "visible", style: liftOf(shadow, size) ? { ...style, filter: liftOf(shadow, size) } : style, "aria-hidden": props["aria-label"] ? undefined : true, ...props, dangerouslySetInnerHTML: { __html: scope(animated ? animate(html, uid).html : html, uid) } });
+    return createElement("svg", { ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: size, height: size, overflow: "visible", style: liftOf(shadow, size) ? { ...style, filter: liftOf(shadow, size) } : style, "aria-hidden": props["aria-label"] ? undefined : true, ...props, dangerouslySetInnerHTML: { __html: scope(animated ? animate(html, uid, animated).html : html, uid) } });
   });
   Icon.displayName = name;
   return Icon;

package/dist/_make.d.ts

@@ -1,4 +1,4 @@
 import type { ForwardRefExoticComponent, RefAttributes, SVGProps } from "react";
-export interface UiIconProps extends Omit<SVGProps<SVGSVGElement>, "ref"> { size?: number | string; /** Lift shadow under the icon: true, or an opacity from 0 to 1. Works on every look. */ shadow?: boolean | number; /** Pop in and draw the strokes, once. */ animated?: boolean }
+export interface UiIconProps extends Omit<SVGProps<SVGSVGElement>, "ref"> { size?: number | string; /** Lift shadow under the icon: true, or an opacity from 0 to 1. Works on every look. */ shadow?: boolean | number; /** Motion: true or "draw" pops in and draws the strokes once. Also pop, bounce, ring (once) and spin, pulse (forever). */ animated?: boolean | "draw" | "pop" | "bounce" | "ring" | "spin" | "pulse" }
 export type UiIcon = ForwardRefExoticComponent<UiIconProps & RefAttributes<SVGSVGElement>>;
 export declare const make: (html: string, name: string, ids: string[]) => UiIcon;

package/dist/_make.js

@@ -11,7 +11,7 @@ export const make = (html, name, ids) => {
   const scope = scoper(ids);
   const Icon = forwardRef(({ size = 24, shadow = 0, animated = false, style, ...props }, ref) => {
     const uid = useId().replace(/[^a-zA-Z0-9]/g, "");
-    return createElement("svg", { ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: size, height: size, overflow: "visible", style: liftOf(shadow, size) ? { ...style, filter: liftOf(shadow, size) } : style, "aria-hidden": props["aria-label"] ? undefined : true, ...props, dangerouslySetInnerHTML: { __html: scope(animated ? animate(html, uid).html : html, uid) } });
+    return createElement("svg", { ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: size, height: size, overflow: "visible", style: liftOf(shadow, size) ? { ...style, filter: liftOf(shadow, size) } : style, "aria-hidden": props["aria-label"] ? undefined : true, ...props, dangerouslySetInnerHTML: { __html: scope(animated ? animate(html, uid, animated).html : html, uid) } });
   });
   Icon.displayName = name;
   return Icon;

package/dist/icon-swap.cjs

@@ -0,0 +1,8 @@
+"use strict";
+const { createElement } = require("react");
+const CSS = ".ui-swap{position:relative;display:inline-block}.ui-swap>svg{position:absolute;inset:0;transition:opacity .22s ease,transform .4s cubic-bezier(.34,1.56,.64,1)}.ui-swap>svg[data-on=false]{opacity:0;transform:rotate(90deg) scale(.3)}.ui-swap>svg[data-on=true]{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.ui-swap>svg{transition:none}}";
+exports.IconSwap = ({ active = false, on: On, off: Off, size = 24, className, ...props }) =>
+  createElement("span", { className: "ui-swap" + (className ? " " + className : ""), style: { width: size, height: size } },
+    createElement("style", null, CSS),
+    createElement(Off, { ...props, size, "data-on": String(!active) }),
+    createElement(On, { ...props, size, "data-on": String(active) }));

package/dist/icon-swap.d.ts

@@ -0,0 +1,9 @@
+import type { ReactElement } from "react";
+import type { UiIcon, UiIconProps } from "./_make.js";
+export interface IconSwapProps extends UiIconProps {
+  /** false shows the `off` icon, true shows the `on` icon. The change cross-fades with a small turn and scale. */
+  active?: boolean;
+  on: UiIcon;
+  off: UiIcon;
+}
+export declare const IconSwap: (props: IconSwapProps) => ReactElement;

package/dist/icon-swap.js

@@ -0,0 +1,7 @@
+import { createElement } from "react";
+const CSS = ".ui-swap{position:relative;display:inline-block}.ui-swap>svg{position:absolute;inset:0;transition:opacity .22s ease,transform .4s cubic-bezier(.34,1.56,.64,1)}.ui-swap>svg[data-on=false]{opacity:0;transform:rotate(90deg) scale(.3)}.ui-swap>svg[data-on=true]{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.ui-swap>svg{transition:none}}";
+export const IconSwap = ({ active = false, on: On, off: Off, size = 24, className, ...props }) =>
+  createElement("span", { className: "ui-swap" + (className ? " " + className : ""), style: { width: size, height: size } },
+    createElement("style", null, CSS),
+    createElement(Off, { ...props, size, "data-on": String(!active) }),
+    createElement(On, { ...props, size, "data-on": String(active) }));

package/dist/index.cjs

@@ -373,3 +373,4 @@ Object.assign(exports, require("./wrench.cjs"));
 Object.assign(exports, require("./x.cjs"));
 Object.assign(exports, require("./zap.cjs"));
 Object.assign(exports, require("./theme-icon.cjs"));
+Object.assign(exports, require("./icon-swap.cjs"));

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export type { UiIcon, UiIconProps } from "./_make.js";
 export type { ThemeIconProps } from "./theme-icon.js";
+export type { IconSwapProps } from "./icon-swap.js";
 export { ActivityIcon, ActivityGlassIcon, ActivityDuotoneIcon, ActivityOffsetIcon, ActivityFillIcon, ActivityGlassOutlineIcon, ActivityDepthIcon } from "./activity.js";
 export { AgentErrorIcon, AgentErrorGlassIcon, AgentErrorDuotoneIcon, AgentErrorOffsetIcon, AgentErrorFillIcon, AgentErrorGlassOutlineIcon, AgentErrorDepthIcon } from "./agent-error.js";
 export { AgentPauseIcon, AgentPauseGlassIcon, AgentPauseDuotoneIcon, AgentPauseOffsetIcon, AgentPauseFillIcon, AgentPauseGlassOutlineIcon, AgentPauseDepthIcon } from "./agent-pause.js";
@@ -374,3 +375,4 @@ export { WrenchIcon, WrenchGlassIcon, WrenchDuotoneIcon, WrenchOffsetIcon, Wrenc
 export { XIcon, XGlassIcon, XDuotoneIcon, XOffsetIcon, XFillIcon, XGlassOutlineIcon, XDepthIcon } from "./x.js";
 export { ZapIcon, ZapGlassIcon, ZapDuotoneIcon, ZapOffsetIcon, ZapFillIcon, ZapGlassOutlineIcon, ZapDepthIcon } from "./zap.js";
 export { ThemeIcon } from "./theme-icon.js";
+export { IconSwap } from "./icon-swap.js";

package/dist/index.js

@@ -372,3 +372,4 @@ export { WrenchIcon, WrenchGlassIcon, WrenchDuotoneIcon, WrenchOffsetIcon, Wrenc
 export { XIcon, XGlassIcon, XDuotoneIcon, XOffsetIcon, XFillIcon, XGlassOutlineIcon, XDepthIcon } from "./x.js";
 export { ZapIcon, ZapGlassIcon, ZapDuotoneIcon, ZapOffsetIcon, ZapFillIcon, ZapGlassOutlineIcon, ZapDepthIcon } from "./zap.js";
 export { ThemeIcon } from "./theme-icon.js";
+export { IconSwap } from "./icon-swap.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thesvg/ui-react",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "Typed React components for the UI icons from thesvg.org, one file per icon and one export per look",
   "type": "module",
   "sideEffects": false,