@juspay/svelte-ui-components 2.120.2 → 2.120.3

package/dist/CommandMenu/CommandMenu.svelte

@@ -263,7 +263,7 @@
                   </span>
                 {:else if typeof item.icon === 'string' && item.icon.length > 0}
                   <div class="command-menu-item-icon-img-wrapper">
-                    <Img src={item.icon} alt="" />
+                    <Img inlineSvg src={item.icon} alt="" />
                   </div>
                 {/if}
                 <span class="command-menu-item-label">{item.label}</span>

package/dist/FileDropzoneTrigger/FileDropzoneTrigger.svelte

@@ -17,7 +17,7 @@
 {#if compact}
   <div class="file-dropzone-trigger-compact {classes ?? ''}">
     <div class="file-dropzone-trigger-icon-sm" aria-hidden="true">
-      <Img src={icon} alt="" fallback="" classes="file-dropzone-trigger-icon-sm-img" />
+      <Img inlineSvg src={icon} alt="" fallback="" classes="file-dropzone-trigger-icon-sm-img" />
     </div>
     <span class="file-dropzone-trigger-heading" data-pw={testId} testID={testId}>{heading}</span>
   </div>
@@ -28,7 +28,7 @@
     {...typeof testId === 'string' ? { testId } : {}}
   >
     <div class="file-dropzone-trigger-icon" aria-hidden="true">
-      <Img src={icon} alt="" fallback="" classes="file-dropzone-trigger-icon-img" />
+      <Img inlineSvg src={icon} alt="" fallback="" classes="file-dropzone-trigger-icon-img" />
     </div>
     <p class="file-dropzone-trigger-heading-wrap">
       <span class="file-dropzone-trigger-heading">{heading}</span>

package/dist/Select/Select.svelte

@@ -406,8 +406,10 @@
   >
     {#if typeof leftIcon === 'string' && leftIcon.length > 0}
       <Img
+        inlineSvg
         src={leftIcon}
         alt=""
+        fallback=""
         classes="select-left-icon"
         {...typeof leftIconTestId === 'string' ? { testId: leftIconTestId } : {}}
       />
@@ -601,7 +603,13 @@
                 {/if}
               {/if}
               {#if typeof row.item.icon === 'string' && row.item.icon.length > 0}
-                <Img src={row.item.icon} alt="" fallback="" classes="select-option-icon" />
+                <Img
+                  inlineSvg
+                  src={row.item.icon}
+                  alt=""
+                  fallback=""
+                  classes="select-option-icon"
+                />
               {/if}
               <span class="select-option-label">{row.item.label}</span>
               {#if showSelectedTick && !multiple && value.includes(row.item.id)}

package/dist/Select/properties.d.ts

@@ -9,6 +9,8 @@ export type SelectItem = {
      * Optional image src (URL or data URI) rendered at the left of the option row,
      * before the label — for icon pickers and any list whose options carry a glyph.
      * Size is controlled by the `--select-option-icon-size` CSS variable (default 16px).
+     * An SVG source is inlined, so an icon drawn with `currentColor` inherits the
+     * option row's text colour; anything else renders as a plain `<img>`.
      * Pair with the trigger's `leftIcon` (driven by the selected option's icon) to show
      * the current selection in the closed trigger.
      */
@@ -70,7 +72,12 @@ export type OptionalSelectProperties = {
     }]>;
     /** Visual hierarchy of the trigger. `'ghost'` renders a transparent, borderless trigger — useful when the Select is embedded in a toolbar or header where a full bordered input would be visually heavy. Defaults to `'default'`. */
     hierarchy?: SelectHierarchy;
-    /** Optional image src (URL or data URI) rendered at the left of the trigger. Size is controlled by the `--select-left-icon-size` CSS variable (default 16px). */
+    /**
+     * Optional image src (URL or data URI) rendered at the left of the trigger.
+     * Size is controlled by the `--select-left-icon-size` CSS variable (default 16px).
+     * An SVG source is inlined, so an icon drawn with `currentColor` inherits the
+     * trigger's text colour; anything else renders as a plain `<img>`.
+     */
     leftIcon?: string;
     /** `data-pw` test id forwarded to the leading icon `<Img>` element. */
     leftIconTestId?: string;

package/dist/Status/Status.svelte

@@ -25,7 +25,7 @@
       {#if icon}
         {@render icon()}
       {:else}
-        <Img src={statusIcon} alt="status" />
+        <Img inlineSvg src={statusIcon} alt="status" />
       {/if}
     </div>
     <div class="status-text">{statusText}</div>

package/dist/Table/BuiltinCell.svelte

@@ -146,7 +146,7 @@
         data-pw={column.testId ? `${column.testId}-icon-${iconIndex}` : null}
         testID={column.testId ? `${column.testId}-icon-${iconIndex}` : null}
       >
-        <Img src={String(iconSrc)} alt="" fallback="" />
+        <Img inlineSvg src={String(iconSrc)} alt="" fallback="" />
       </span>
     {/each}
     <span>{typeof data.label === 'string' ? data.label : '-'}</span>

package/dist/Tabs/Tabs.svelte

@@ -281,7 +281,7 @@
           })}
         {:else}
           {#if typeof tabItem?.icon === 'string' && tabItem.icon.length > 0}
-            <Img src={tabItem.icon} alt="" fallback="" classes="tabs-item-icon" />
+            <Img inlineSvg src={tabItem.icon} alt="" fallback="" classes="tabs-item-icon" />
           {/if}
           <span class="tabs-item-label" data-text={label}>{label}</span>
           {#if tabItem?.status && tabItem.status !== 'none'}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.120.2",
+  "version": "2.120.3",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",