@svgflex/core 0.1.0 → 0.1.2

package/README.md

@@ -10,6 +10,7 @@ This package is intended to be used by framework-specific implementations (e.g.,
 
 - Framework-agnostic type definitions
 - SVG sanitization utilities (removes scripts and event handlers)
+- Automatic color replacement for hardcoded SVG colors
 - Configuration processors for size and color handling
 - Shared utilities for SVG manipulation
 
@@ -54,15 +55,43 @@ Processes SVG configuration and returns normalized size and color values.
 }
 ```
 
-### `sanitizeSvg(svgContent: string): string`
+### `sanitizeSvg(svgContent: string, replaceColors?: boolean): string`
 
-Sanitizes SVG content by removing potentially dangerous elements and attributes.
+Sanitizes SVG content by removing potentially dangerous elements and attributes. Optionally replaces hardcoded colors with `currentColor` to enable dynamic color control.
 
 **Parameters:**
 - `svgContent` - Raw SVG string
+- `replaceColors` - Whether to replace hardcoded colors with `currentColor` (default: `false`)
 
 **Returns:**
-- Sanitized SVG string with scripts and event handlers removed
+- Sanitized SVG string with scripts and event handlers removed, and optionally with colors replaced
+
+**Example:**
+```typescript
+// Basic sanitization
+const safeSvg = sanitizeSvg(rawSvgContent);
+
+// Sanitization with color replacement
+const safeSvgWithColors = sanitizeSvg(rawSvgContent, true);
+// This will convert fill="#4E7079" to fill="currentColor"
+```
+
+### `replaceColorsWithCurrentColor(svgContent: string): string`
+
+Replaces all hardcoded colors in SVG attributes (`fill` and `stroke`) with `currentColor`, while preserving `none`, `transparent`, `currentColor`, and `url()` references.
+
+**Parameters:**
+- `svgContent` - SVG string with hardcoded colors
+
+**Returns:**
+- SVG string with colors replaced by `currentColor`
+
+**Example:**
+```typescript
+const svgWithHardcodedColor = '<svg><path fill="#FF0000" stroke="blue" /></svg>';
+const svgWithCurrentColor = replaceColorsWithCurrentColor(svgWithHardcodedColor);
+// Result: '<svg><path fill="currentColor" stroke="currentColor" /></svg>'
+```
 
 ## Usage in Framework Implementations
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgflex/core",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Framework-agnostic core utilities for SVGFlex",
   "main": "index.js",
   "module": "index.js",

package/types/svgflex-config.d.ts

@@ -44,6 +44,12 @@ export interface SvgFlexConfig {
      * When true, fetches and embeds the SVG content for full style control
      */
     inline?: boolean;
+    /**
+     * Whether to replace hardcoded colors with currentColor (default: true)
+     * When true, automatically replaces fill and stroke attributes with currentColor
+     * to allow the 'color' property to work even with SVGs that have hardcoded colors
+     */
+    replaceColors?: boolean;
 }
 /**
  * Internal processed configuration
@@ -56,5 +62,6 @@ export interface ProcessedSvgConfig {
     class: string;
     ariaLabel?: string;
     inline: boolean;
+    replaceColors: boolean;
 }
 //# sourceMappingURL=svgflex-config.d.ts.map

package/types/svgflex-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"svgflex-config.d.ts","sourceRoot":"","sources":["../../src/types/svgflex-config.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/D;;;GAGG;AACH,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG;IACtC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;CACjB"}
+{"version":3,"file":"svgflex-config.d.ts","sourceRoot":"","sources":["../../src/types/svgflex-config.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/D;;;GAGG;AACH,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG;IACtC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,EAAE,OAAO,CAAC;CACxB"}

package/utils/svg-config-processor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"svg-config-processor.d.ts","sourceRoot":"","sources":["../../src/utils/svg-config-processor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAYrF;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,OAAO,GAAG,SAAS,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAuBxF;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,kBAAkB,CAY1E"}
+{"version":3,"file":"svg-config-processor.d.ts","sourceRoot":"","sources":["../../src/utils/svg-config-processor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAarF;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,OAAO,GAAG,SAAS,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAuBxF;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,kBAAkB,CAa1E"}

package/utils/svg-config-processor.js

@@ -5,7 +5,8 @@ const DEFAULT_CONFIG = {
     color: 'currentColor',
     size: 24,
     inline: true,
-    class: ''
+    class: '',
+    replaceColors: true
 };
 /**
  * Processes size value into width and height strings
@@ -41,6 +42,7 @@ export function processSvgConfig(config) {
         height,
         class: config.class || DEFAULT_CONFIG.class,
         ariaLabel: config.ariaLabel,
-        inline: config.inline !== undefined ? config.inline : DEFAULT_CONFIG.inline
+        inline: config.inline !== undefined ? config.inline : DEFAULT_CONFIG.inline,
+        replaceColors: config.replaceColors !== undefined ? config.replaceColors : DEFAULT_CONFIG.replaceColors
     };
 }

package/utils/svg-sanitizer.d.ts

@@ -1,8 +1,17 @@
+/**
+ * Replaces hardcoded colors in SVG with currentColor
+ * This allows the SVG to inherit color from CSS
+ *
+ * @param svgContent - SVG content with hardcoded colors
+ * @returns SVG content with currentColor
+ */
+export declare function replaceColorsWithCurrentColor(svgContent: string): string;
 /**
  * Sanitizes SVG content by removing potentially harmful elements
  *
  * @param svgContent - Raw SVG content
+ * @param replaceColors - Whether to replace hardcoded colors with currentColor (default: false)
  * @returns Sanitized SVG content
  */
-export declare function sanitizeSvg(svgContent: string): string;
+export declare function sanitizeSvg(svgContent: string, replaceColors?: boolean): string;
 //# sourceMappingURL=svg-sanitizer.d.ts.map

package/utils/svg-sanitizer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"svg-sanitizer.d.ts","sourceRoot":"","sources":["../../src/utils/svg-sanitizer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAgBtD"}
+{"version":3,"file":"svg-sanitizer.d.ts","sourceRoot":"","sources":["../../src/utils/svg-sanitizer.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,6BAA6B,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAkBxE;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,UAAU,EAAE,MAAM,EAAE,aAAa,GAAE,OAAe,GAAG,MAAM,CAqBtF"}

package/utils/svg-sanitizer.js

@@ -1,10 +1,28 @@
+/**
+ * Replaces hardcoded colors in SVG with currentColor
+ * This allows the SVG to inherit color from CSS
+ *
+ * @param svgContent - SVG content with hardcoded colors
+ * @returns SVG content with currentColor
+ */
+export function replaceColorsWithCurrentColor(svgContent) {
+    let result = svgContent;
+    // Replace fill attributes with hex colors, rgb, rgba, named colors, etc.
+    // But preserve fill="none" and fill="transparent"
+    result = result.replace(/fill\s*=\s*["'](?!none["']|transparent["']|currentColor["']|url\()/gi, 'fill="currentColor');
+    // Replace stroke attributes with hex colors, rgb, rgba, named colors, etc.
+    // But preserve stroke="none" and stroke="transparent"
+    result = result.replace(/stroke\s*=\s*["'](?!none["']|transparent["']|currentColor["']|url\()/gi, 'stroke="currentColor');
+    return result;
+}
 /**
  * Sanitizes SVG content by removing potentially harmful elements
  *
  * @param svgContent - Raw SVG content
+ * @param replaceColors - Whether to replace hardcoded colors with currentColor (default: false)
  * @returns Sanitized SVG content
  */
-export function sanitizeSvg(svgContent) {
+export function sanitizeSvg(svgContent, replaceColors = false) {
     // Remove script tags and event handlers for security
     let sanitized = svgContent.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
     // Remove common event handlers
@@ -16,5 +34,9 @@ export function sanitizeSvg(svgContent) {
         const regex = new RegExp(`${handler}\\s*=\\s*["'][^"']*["']`, 'gi');
         sanitized = sanitized.replace(regex, '');
     });
+    // Replace hardcoded colors if requested
+    if (replaceColors) {
+        sanitized = replaceColorsWithCurrentColor(sanitized);
+    }
     return sanitized;
 }