@svgflex/core 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Kosuke Shimizu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,84 @@
+# @svgflex/core
+
+Framework-agnostic core library for SVGFlex. This package contains shared types, utilities, and sanitization logic used across all SVGFlex framework implementations.
+
+## Overview
+
+This package is intended to be used by framework-specific implementations (e.g., `@svgflex/angular`, `@svgflex/react`, `@svgflex/vue`) and is not typically installed directly by end users.
+
+## Features
+
+- Framework-agnostic type definitions
+- SVG sanitization utilities (removes scripts and event handlers)
+- Configuration processors for size and color handling
+- Shared utilities for SVG manipulation
+
+## Exports
+
+### Types
+
+```typescript
+import type {
+  SvgFlexConfig,
+  SvgSize,
+  SvgColor,
+  SizeConfig
+} from '@svgflex/core';
+```
+
+### Utilities
+
+```typescript
+import {
+  processSvgConfig,
+  sanitizeSvg
+} from '@svgflex/core';
+```
+
+## API
+
+### `processSvgConfig(config: SvgFlexConfig)`
+
+Processes SVG configuration and returns normalized size and color values.
+
+**Parameters:**
+- `config.size` - Size value (number, string, or {width, height} object)
+- `config.color` - Color value (CSS color string)
+
+**Returns:**
+```typescript
+{
+  width: string | null;
+  height: string | null;
+  color: string;
+}
+```
+
+### `sanitizeSvg(svgContent: string): string`
+
+Sanitizes SVG content by removing potentially dangerous elements and attributes.
+
+**Parameters:**
+- `svgContent` - Raw SVG string
+
+**Returns:**
+- Sanitized SVG string with scripts and event handlers removed
+
+## Usage in Framework Implementations
+
+```typescript
+import { sanitizeSvg, processSvgConfig } from '@svgflex/core';
+
+// Sanitize SVG content
+const safeSvg = sanitizeSvg(rawSvgContent);
+
+// Process configuration
+const { width, height, color } = processSvgConfig({
+  size: '24px',
+  color: 'currentColor'
+});
+```
+
+## License
+
+MIT

package/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @svgflex/core
+ * Framework-agnostic core utilities for SVGFlex
+ */
+export * from './types/svgflex-config';
+export * from './utils/svg-config-processor';
+export * from './utils/svg-sanitizer';
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,cAAc,wBAAwB,CAAC;AAGvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC"}

package/index.js

@@ -0,0 +1,9 @@
+/**
+ * @svgflex/core
+ * Framework-agnostic core utilities for SVGFlex
+ */
+// Types
+export * from './types/svgflex-config';
+// Utils
+export * from './utils/svg-config-processor';
+export * from './utils/svg-sanitizer';

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@svgflex/core",
+  "version": "0.1.0",
+  "description": "Framework-agnostic core utilities for SVGFlex",
+  "main": "index.js",
+  "module": "index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "tsc && cp package.json README.md ../../LICENSE dist/",
+    "watch": "tsc --watch"
+  },
+  "keywords": [
+    "svg",
+    "icons",
+    "framework-agnostic",
+    "utilities",
+    "customizable"
+  ],
+  "author": "Kosuke Shimizu",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/KosukeShimizu/svgflex.git",
+    "directory": "packages/core"
+  },
+  "homepage": "https://github.com/KosukeShimizu/svgflex#readme",
+  "bugs": {
+    "url": "https://github.com/KosukeShimizu/svgflex/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "*.js",
+    "*.d.ts",
+    "*.map",
+    "types",
+    "utils",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "devDependencies": {
+    "typescript": "~5.8.0"
+  }
+}

package/types/svgflex-config.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Supported size units for SVG dimensions
+ */
+export type SizeUnit = 'px' | 'rem' | 'em' | '%' | 'vw' | 'vh';
+/**
+ * Size configuration for SVG
+ * Can be a number (interpreted as px), a string with units, or an object with width/height
+ */
+export type SvgSize = number | string | {
+    width: number | string;
+    height: number | string;
+};
+/**
+ * Color configuration for SVG
+ * Supports CSS color values including currentColor
+ */
+export type SvgColor = string;
+/**
+ * Configuration interface for SVGFlex
+ */
+export interface SvgFlexConfig {
+    /**
+     * Path or URL to the SVG file
+     */
+    src: string;
+    /**
+     * Color for the SVG (defaults to 'currentColor' for CSS inheritance)
+     */
+    color?: SvgColor;
+    /**
+     * Size for the SVG
+     */
+    size?: SvgSize;
+    /**
+     * Additional CSS classes to apply
+     */
+    class?: string;
+    /**
+     * Accessibility label
+     */
+    ariaLabel?: string;
+    /**
+     * Whether to inline the SVG content (default: true)
+     * When true, fetches and embeds the SVG content for full style control
+     */
+    inline?: boolean;
+}
+/**
+ * Internal processed configuration
+ */
+export interface ProcessedSvgConfig {
+    src: string;
+    color: string;
+    width: string;
+    height: string;
+    class: string;
+    ariaLabel?: string;
+    inline: boolean;
+}
+//# sourceMappingURL=svgflex-config.d.ts.map

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

@@ -0,0 +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"}

package/types/svgflex-config.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,13 @@
+import { SvgFlexConfig, ProcessedSvgConfig, SvgSize } from '../types/svgflex-config';
+/**
+ * Processes size value into width and height strings
+ */
+export declare function processSize(size: SvgSize | undefined): {
+    width: string;
+    height: string;
+};
+/**
+ * Processes the SVGFlex configuration into a standardized format
+ */
+export declare function processSvgConfig(config: SvgFlexConfig): ProcessedSvgConfig;
+//# sourceMappingURL=svg-config-processor.d.ts.map

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

@@ -0,0 +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"}

package/utils/svg-config-processor.js

@@ -0,0 +1,46 @@
+/**
+ * Default configuration values
+ */
+const DEFAULT_CONFIG = {
+    color: 'currentColor',
+    size: 24,
+    inline: true,
+    class: ''
+};
+/**
+ * Processes size value into width and height strings
+ */
+export function processSize(size) {
+    const defaultSize = `${DEFAULT_CONFIG.size}px`;
+    if (!size) {
+        return { width: defaultSize, height: defaultSize };
+    }
+    // If it's a number, convert to px
+    if (typeof size === 'number') {
+        const sizeStr = `${size}px`;
+        return { width: sizeStr, height: sizeStr };
+    }
+    // If it's a string, use it for both width and height
+    if (typeof size === 'string') {
+        return { width: size, height: size };
+    }
+    // If it's an object with width/height
+    const width = typeof size.width === 'number' ? `${size.width}px` : size.width;
+    const height = typeof size.height === 'number' ? `${size.height}px` : size.height;
+    return { width, height };
+}
+/**
+ * Processes the SVGFlex configuration into a standardized format
+ */
+export function processSvgConfig(config) {
+    const { width, height } = processSize(config.size);
+    return {
+        src: config.src,
+        color: config.color || DEFAULT_CONFIG.color,
+        width,
+        height,
+        class: config.class || DEFAULT_CONFIG.class,
+        ariaLabel: config.ariaLabel,
+        inline: config.inline !== undefined ? config.inline : DEFAULT_CONFIG.inline
+    };
+}

package/utils/svg-sanitizer.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Sanitizes SVG content by removing potentially harmful elements
+ *
+ * @param svgContent - Raw SVG content
+ * @returns Sanitized SVG content
+ */
+export declare function sanitizeSvg(svgContent: string): string;
+//# sourceMappingURL=svg-sanitizer.d.ts.map

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

@@ -0,0 +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"}

package/utils/svg-sanitizer.js

@@ -0,0 +1,20 @@
+/**
+ * Sanitizes SVG content by removing potentially harmful elements
+ *
+ * @param svgContent - Raw SVG content
+ * @returns Sanitized SVG content
+ */
+export function sanitizeSvg(svgContent) {
+    // Remove script tags and event handlers for security
+    let sanitized = svgContent.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
+    // Remove common event handlers
+    const eventHandlers = [
+        'onclick', 'onload', 'onerror', 'onmouseover', 'onmouseout',
+        'onmousemove', 'onmousedown', 'onmouseup', 'onfocus', 'onblur'
+    ];
+    eventHandlers.forEach(handler => {
+        const regex = new RegExp(`${handler}\\s*=\\s*["'][^"']*["']`, 'gi');
+        sanitized = sanitized.replace(regex, '');
+    });
+    return sanitized;
+}