@bwp-web/components 1.1.0 → 1.1.2

package/README.md

@@ -10,7 +10,7 @@ npm install @bwp-web/components
 
 ### Peer Dependencies
 
-- `@bwp-web/styles` >= 1.0.3
+- `@bwp-web/styles` >= 1.0.4
 - `@bwp-web/assets` >= 1.0.2
 - `@mui/material` >= 7.0.0
 - `react` >= 18.0.0
@@ -266,16 +266,17 @@ import BrokenImageIcon from '@mui/icons-material/BrokenImage';
 
 #### DynamicSvgIcon Props
 
-| Prop                | Type                                       | Default      | Description                                       |
-| ------------------- | ------------------------------------------ | ------------ | ------------------------------------------------- |
-| `url`               | `string`                                   | —            | URL of the SVG to fetch                           |
-| `fallback`          | `React.ReactNode`                          | **required** | Element shown when loading fails                  |
-| `width`             | `number`                                   | `24`         | Width in pixels for icon, skeleton, and fallback  |
-| `height`            | `number`                                   | `24`         | Height in pixels for icon, skeleton, and fallback |
-| `skeletonVariant`   | `'circular' \| 'rectangular' \| 'rounded'` | `'circular'` | Skeleton shape during loading                     |
-| `skeletonAnimation` | `'pulse' \| 'wave' \| false`               | `'pulse'`    | Skeleton animation type                           |
-| `onLoad`            | `() => void`                               | —            | Called when the SVG loads successfully            |
-| `onError`           | `(error: string) => void`                  | —            | Called when loading fails                         |
+| Prop                | Type                                       | Default      | Description                                                    |
+| ------------------- | ------------------------------------------ | ------------ | -------------------------------------------------------------- |
+| `url`               | `string`                                   | —            | URL of the SVG to fetch                                        |
+| `fallback`          | `React.ReactNode`                          | **required** | Element shown when loading fails                               |
+| `width`             | `number`                                   | `24`         | Width in pixels for icon, skeleton, and fallback               |
+| `height`            | `number`                                   | `24`         | Height in pixels for icon, skeleton, and fallback              |
+| `replaceColors`     | `boolean`                                  | `false`      | Replace all fill/stroke colors with `currentColor` for theming |
+| `skeletonVariant`   | `'circular' \| 'rectangular' \| 'rounded'` | `'circular'` | Skeleton shape during loading                                  |
+| `skeletonAnimation` | `'pulse' \| 'wave' \| false`               | `'pulse'`    | Skeleton animation type                                        |
+| `onLoad`            | `() => void`                               | —            | Called when the SVG loads successfully                         |
+| `onError`           | `(error: string) => void`                  | —            | Called when loading fails                                      |
 
 ### BiampTable
 

package/dist/DynamicSvgIcon/DynamicSvgIcon.d.ts

@@ -2,6 +2,14 @@ import type { SvgIconProps } from '@mui/material';
 /** Clear the internal SVG fetch cache. Useful for testing or forcing a refetch. */
 export declare function clearDynamicSvgIconCache(): void;
 export interface UseDynamicSvgIconOptions {
+    /**
+     * When `true`, all `fill` and `stroke` attribute values (except `"none"` and
+     * `"currentColor"`) are replaced with `"currentColor"`.  This makes the SVG
+     * fully themeable via the CSS `color` property or MUI's `sx={{ color }}`.
+     *
+     * @default false
+     */
+    replaceColors?: boolean;
     /** Called when the SVG loads successfully */
     onLoad?: () => void;
     /** Called when loading fails */
@@ -19,7 +27,8 @@ export interface UseDynamicSvgIconResult {
 }
 /**
  * Hook that fetches an SVG from a URL and returns the parsed content.
- * The SVG is rendered as-is — colors and viewBox are preserved from the source.
+ * The SVG is rendered as-is by default. Pass `replaceColors: true` to replace
+ * all fill/stroke colors with `currentColor` for full theming support.
  * Results are cached in-memory so subsequent renders with the same URL are instant.
  *
  * @param url - URL of the SVG to fetch (supports any URL that `fetch` can handle, including data URLs)
@@ -44,6 +53,14 @@ export interface DynamicSvgIconProps extends Omit<SvgIconProps, 'children' | 'on
     width?: number;
     /** Height in pixels — applied to icon, skeleton, and fallback (default: 24) */
     height?: number;
+    /**
+     * Replace all fill/stroke colors (except `"none"` and `"currentColor"`) with
+     * `"currentColor"`, making the icon fully themeable via CSS `color`.
+     * Set to `false` to preserve the SVG's original colors.
+     *
+     * @default false
+     */
+    replaceColors?: boolean;
     /** Skeleton shape shown during loading (default: 'circular') */
     skeletonVariant?: 'circular' | 'rectangular' | 'rounded';
     /** Skeleton animation type (default: 'pulse') */
@@ -60,7 +77,8 @@ export interface DynamicSvgIconProps extends Omit<SvgIconProps, 'children' | 'on
  *
  * The SVG is rendered as-is — fill, stroke, and viewBox are preserved from the
  * source. Paths without an explicit fill will inherit `currentColor` from MUI
- * SvgIcon's CSS, so they respond to the parent's text color.
+ * SvgIcon's CSS. Set `replaceColors` to force **all** fills and strokes to
+ * `"currentColor"`, making the icon fully themeable via CSS `color`.
  *
  * Fetched SVGs are cached in-memory; the same URL will only be fetched once
  * per page session. Use {@link clearDynamicSvgIconCache} to force a refetch.
@@ -76,5 +94,5 @@ export interface DynamicSvgIconProps extends Omit<SvgIconProps, 'children' | 'on
  * />
  * ```
  */
-export declare function DynamicSvgIcon({ url, fallback, width, height, skeletonVariant, skeletonAnimation, onLoad, onError, sx, ...svgIconProps }: DynamicSvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function DynamicSvgIcon({ url, fallback, width, height, replaceColors, skeletonVariant, skeletonAnimation, onLoad, onError, sx, ...svgIconProps }: DynamicSvgIconProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DynamicSvgIcon.d.ts.map

package/dist/DynamicSvgIcon/DynamicSvgIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicSvgIcon.d.ts","sourceRoot":"","sources":["../../src/DynamicSvgIcon/DynamicSvgIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAUlD,mFAAmF;AACnF,wBAAgB,wBAAwB,SAEvC;AAED,MAAM,WAAW,wBAAwB;IACvC,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gCAAgC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,MAAM,WAAW,uBAAuB;IACtC,iDAAiD;IACjD,OAAO,EAAE,OAAO,CAAC;IACjB,uDAAuD;IACvD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,kDAAkD;IAClD,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,gDAAgD;IAChD,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,MAAM,EACX,OAAO,GAAE,wBAA6B,GACrC,uBAAuB,CAwFzB;AAID,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,YAAY,EACZ,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CACvD;IACC,6BAA6B;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,gDAAgD;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gEAAgE;IAChE,eAAe,CAAC,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,CAAC;IACzD,iDAAiD;IACjD,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;IAC7C,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gCAAgC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,QAAQ,EACR,KAAoB,EACpB,MAAqB,EACrB,eAA4B,EAC5B,iBAA2B,EAC3B,MAAM,EACN,OAAO,EACP,EAAE,EACF,GAAG,YAAY,EAChB,EAAE,mBAAmB,2CAqDrB"}
+{"version":3,"file":"DynamicSvgIcon.d.ts","sourceRoot":"","sources":["../../src/DynamicSvgIcon/DynamicSvgIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAUlD,mFAAmF;AACnF,wBAAgB,wBAAwB,SAEvC;AAYD,MAAM,WAAW,wBAAwB;IACvC;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gCAAgC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,MAAM,WAAW,uBAAuB;IACtC,iDAAiD;IACjD,OAAO,EAAE,OAAO,CAAC;IACjB,uDAAuD;IACvD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,kDAAkD;IAClD,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,gDAAgD;IAChD,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,MAAM,EACX,OAAO,GAAE,wBAA6B,GACrC,uBAAuB,CA0FzB;AAID,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,YAAY,EACZ,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CACvD;IACC,6BAA6B;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,gDAAgD;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gEAAgE;IAChE,eAAe,CAAC,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,CAAC;IACzD,iDAAiD;IACjD,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;IAC7C,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gCAAgC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,QAAQ,EACR,KAAoB,EACpB,MAAqB,EACrB,aAAa,EACb,eAA4B,EAC5B,iBAA2B,EAC3B,MAAM,EACN,OAAO,EACP,EAAE,EACF,GAAG,YAAY,EAChB,EAAE,mBAAmB,2CAsDrB"}

package/dist/index.cjs

@@ -2771,11 +2771,15 @@ var svgCache = /* @__PURE__ */ new Map();
 function clearDynamicSvgIconCache() {
   svgCache.clear();
 }
+function applyCurrentColor(svg) {
+  return svg.replace(/fill="(?!none|currentColor)[^"]*"/g, 'fill="currentColor"').replace(/stroke="(?!none|currentColor)[^"]*"/g, 'stroke="currentColor"');
+}
 function useDynamicSvgIcon(url, options = {}) {
-  const { onLoad, onError } = options;
+  const { replaceColors = false, onLoad, onError } = options;
+  const transform = replaceColors ? applyCurrentColor : (s) => s;
   const [svgContent, setSvgContent] = (0, import_react12.useState)(() => {
     const cached = svgCache.get(url);
-    return cached ? cached.innerContent : null;
+    return cached ? transform(cached.innerContent) : null;
   });
   const [svgViewBox, setSvgViewBox] = (0, import_react12.useState)(() => {
     const cached = svgCache.get(url);
@@ -2794,7 +2798,7 @@ function useDynamicSvgIcon(url, options = {}) {
     let cancelled = false;
     const cached = svgCache.get(url);
     if (cached) {
-      setSvgContent(cached.innerContent);
+      setSvgContent(transform(cached.innerContent));
       setSvgViewBox(cached.viewBox);
       setLoading(false);
       setError(null);
@@ -2824,7 +2828,7 @@ function useDynamicSvgIcon(url, options = {}) {
         const innerContent = svgMatch ? svgMatch[1] : text;
         svgCache.set(url, { innerContent, viewBox });
         if (!cancelled) {
-          setSvgContent(innerContent);
+          setSvgContent(transform(innerContent));
           setSvgViewBox(viewBox);
           setLoading(false);
           onLoad?.();
@@ -2850,6 +2854,7 @@ function DynamicSvgIcon({
   fallback,
   width = DEFAULT_SIZE2,
   height = DEFAULT_SIZE2,
+  replaceColors,
   skeletonVariant = "circular",
   skeletonAnimation = "pulse",
   onLoad,
@@ -2858,6 +2863,7 @@ function DynamicSvgIcon({
   ...svgIconProps
 }) {
   const { loading, error, svgContent, svgViewBox } = useDynamicSvgIcon(url, {
+    replaceColors,
     onLoad,
     onError
   });