@svgflex/angular 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,102 @@
+# @svgflex/angular
+
+SVG icons with easy color and size customization for Angular.
+
+## Features
+
+- Easy color and size customization using `currentColor`
+- Support for inline SVG (full style control) or external references
+- TypeScript support with full type definitions
+- Flexible sizing: numbers (px), strings with units, or width/height objects
+- SCSS/CSS class support
+- Accessibility features (ARIA labels)
+
+## Installation
+
+```bash
+npm install @svgflex/angular
+```
+
+## Usage
+
+### Basic Usage
+
+```typescript
+import { Component } from '@angular/core';
+import { SvgflexComponent } from '@svgflex/angular';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [SvgflexComponent],
+  template: `
+    <svgflex src="assets/icons/home.svg"></svgflex>
+  `
+})
+export class AppComponent {}
+```
+
+### With Color and Size
+
+```html
+<!-- Using currentColor (inherits from parent text color) -->
+<svgflex src="assets/icons/home.svg" color="currentColor" size="24"></svgflex>
+
+<!-- Custom color -->
+<svgflex src="assets/icons/star.svg" color="#ff0000" size="32"></svgflex>
+
+<!-- Size with units -->
+<svgflex src="assets/icons/user.svg" color="blue" size="2rem"></svgflex>
+
+<!-- Different width and height -->
+<svgflex
+  src="assets/icons/logo.svg"
+  [size]="{width: '100px', height: '50px'}"
+></svgflex>
+```
+
+### With CSS Classes
+
+```html
+<svgflex
+  src="assets/icons/heart.svg"
+  class="icon-large text-red"
+></svgflex>
+```
+
+```scss
+.icon-large {
+  width: 48px;
+  height: 48px;
+}
+
+.text-red {
+  color: red;
+}
+```
+
+### Accessibility
+
+```html
+<svgflex
+  src="assets/icons/close.svg"
+  ariaLabel="Close dialog"
+></svgflex>
+```
+
+## API
+
+### Inputs
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `src` | `string` | *required* | Path or URL to the SVG file |
+| `color` | `string` | `'currentColor'` | CSS color value |
+| `size` | `number \| string \| {width, height}` | `24` | Size in px, or with units, or object |
+| `class` | `string` | `''` | Additional CSS classes |
+| `ariaLabel` | `string` | `undefined` | Accessibility label |
+| `inline` | `boolean` | `true` | Whether to inline SVG content |
+
+## License
+
+MIT

package/fesm2022/svgflex-angular.mjs

@@ -0,0 +1,181 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, HostBinding, Input, Component } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+import { of } from 'rxjs';
+import { map, catchError, shareReplay } from 'rxjs/operators';
+import { sanitizeSvg, processSvgConfig } from '@svgflex/core';
+export * from '@svgflex/core';
+import * as i1 from '@angular/common/http';
+
+/**
+ * Service for loading and caching SVG content
+ */
+class SvgLoaderService {
+    http;
+    cache = new Map();
+    constructor(http) {
+        this.http = http;
+    }
+    /**
+     * Loads SVG content from a URL with caching
+     */
+    loadSvg(url) {
+        console.log('[SvgLoaderService] Loading SVG from:', url);
+        if (this.cache.has(url)) {
+            console.log('[SvgLoaderService] Returning cached SVG for:', url);
+            return this.cache.get(url);
+        }
+        const svg$ = this.http.get(url, { responseType: 'text' }).pipe(map(svgContent => {
+            console.log('[SvgLoaderService] Successfully loaded SVG from:', url, 'Length:', svgContent.length);
+            return sanitizeSvg(svgContent);
+        }), catchError(error => {
+            console.error(`[SvgLoaderService] Failed to load SVG from ${url}:`, error);
+            return of('');
+        }), shareReplay(1));
+        this.cache.set(url, svg$);
+        return svg$;
+    }
+    /**
+     * Clears the SVG cache
+     */
+    clearCache() {
+        this.cache.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SvgLoaderService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SvgLoaderService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SvgLoaderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+
+/**
+ * SVGFlex Component
+ *
+ * Renders SVG icons with customizable color and size.
+ * Supports both inline SVG (for full style control) and external references.
+ *
+ * @example
+ * <svgflex src="assets/icons/home.svg" color="red" size="32"></svgflex>
+ * <svgflex src="assets/icons/user.svg" color="currentColor" [size]="{width: '2rem', height: '2rem'}"></svgflex>
+ */
+class SvgflexComponent {
+    svgLoader = inject(SvgLoaderService);
+    sanitizer = inject(DomSanitizer);
+    /** Path or URL to the SVG file */
+    src;
+    /** Color for the SVG (defaults to 'currentColor') */
+    color;
+    /** Size for the SVG (number in px, string with units, or {width, height} object) */
+    size;
+    /** Additional CSS classes */
+    class;
+    /** Accessibility label */
+    ariaLabel;
+    /** Whether to inline the SVG (default: true) */
+    inline = true;
+    // Processed values
+    width = '24px';
+    height = '24px';
+    processedColor = 'currentColor';
+    svgContent = null;
+    // Apply CSS classes to :host element
+    get hostClasses() {
+        return this.class || '';
+    }
+    // Apply inline styles to :host element when size is specified
+    get hostWidth() {
+        return this.size ? this.width : null;
+    }
+    get hostHeight() {
+        return this.size ? this.height : null;
+    }
+    ngOnChanges(changes) {
+        const config = {
+            src: this.src,
+            color: this.color,
+            size: this.size,
+            class: this.class,
+            ariaLabel: this.ariaLabel,
+            inline: this.inline
+        };
+        const processed = processSvgConfig(config);
+        this.width = processed.width;
+        this.height = processed.height;
+        this.processedColor = processed.color;
+        this.ariaLabel = processed.ariaLabel;
+        console.log('[SvgflexComponent] Processed config:', {
+            width: this.width,
+            height: this.height,
+            color: this.processedColor,
+            src: this.src
+        });
+        // Load SVG content if inline mode is enabled
+        // Check if src or inline changed, or if it's the first change (firstChange)
+        if (this.inline && (changes['src'] || changes['inline'] || Object.keys(changes).length > 0)) {
+            this.loadSvgContent();
+        }
+    }
+    loadSvgContent() {
+        console.log('[SvgflexComponent] loadSvgContent called, src:', this.src, 'inline:', this.inline);
+        if (!this.src) {
+            console.log('[SvgflexComponent] No src provided, skipping load');
+            return;
+        }
+        this.svgLoader.loadSvg(this.src).subscribe((content) => {
+            console.log('[SvgflexComponent] Received SVG content, length:', content.length);
+            if (content) {
+                // SVG is already sanitized by SvgLoaderService
+                // Directly bypass security and trust the HTML
+                this.svgContent = this.sanitizer.bypassSecurityTrustHtml(content);
+                console.log('[SvgflexComponent] SVG content set successfully');
+            }
+            else {
+                console.log('[SvgflexComponent] Received empty content');
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SvgflexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: SvgflexComponent, isStandalone: true, selector: "svgflex", inputs: { src: "src", color: "color", size: "size", class: "class", ariaLabel: "ariaLabel", inline: "inline" }, host: { properties: { "class": "this.hostClasses", "style.width": "this.hostWidth", "style.height": "this.hostHeight" } }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"svgflex-container\"\n  [style.color]=\"processedColor\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.role]=\"ariaLabel ? 'img' : null\"\n>\n  @if (inline && svgContent) {\n    <div [innerHTML]=\"svgContent\" class=\"svgflex-inline\"></div>\n  } @else if (!inline) {\n    <img\n      [src]=\"src\"\n      [alt]=\"ariaLabel || ''\"\n      [style.width]=\"width\"\n      [style.height]=\"height\"\n    />\n  } @else {\n    <div class=\"svgflex-loading\"></div>\n  }\n</div>\n", styles: [":host{display:inline-block}:host.block{display:block}:host.flex{display:flex}.svgflex-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:inherit}.svgflex-inline{display:contents}.svgflex-inline ::ng-deep svg{width:100%;height:100%;fill:currentColor}.svgflex-inline ::ng-deep svg path,.svgflex-inline ::ng-deep svg circle,.svgflex-inline ::ng-deep svg rect,.svgflex-inline ::ng-deep svg polygon,.svgflex-inline ::ng-deep svg polyline,.svgflex-inline ::ng-deep svg ellipse,.svgflex-inline ::ng-deep svg line{fill:currentColor}.svgflex-inline ::ng-deep svg[stroke]{stroke:currentColor}.svgflex-inline ::ng-deep svg[stroke] path,.svgflex-inline ::ng-deep svg[stroke] circle,.svgflex-inline ::ng-deep svg[stroke] rect,.svgflex-inline ::ng-deep svg[stroke] polygon,.svgflex-inline ::ng-deep svg[stroke] polyline,.svgflex-inline ::ng-deep svg[stroke] ellipse,.svgflex-inline ::ng-deep svg[stroke] line{stroke:currentColor}.svgflex-loading{width:100%;height:100%;background-color:currentColor;opacity:.1;border-radius:2px}img{display:block;max-width:100%;max-height:100%}:host.icon-sm{width:16px;height:16px}:host.icon-md{width:24px;height:24px}:host.icon-lg{width:32px;height:32px}:host.icon-xl{width:48px;height:48px}:host.icon-2xl{width:64px;height:64px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SvgflexComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'svgflex', standalone: true, imports: [CommonModule], template: "<div\n  class=\"svgflex-container\"\n  [style.color]=\"processedColor\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.role]=\"ariaLabel ? 'img' : null\"\n>\n  @if (inline && svgContent) {\n    <div [innerHTML]=\"svgContent\" class=\"svgflex-inline\"></div>\n  } @else if (!inline) {\n    <img\n      [src]=\"src\"\n      [alt]=\"ariaLabel || ''\"\n      [style.width]=\"width\"\n      [style.height]=\"height\"\n    />\n  } @else {\n    <div class=\"svgflex-loading\"></div>\n  }\n</div>\n", styles: [":host{display:inline-block}:host.block{display:block}:host.flex{display:flex}.svgflex-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:inherit}.svgflex-inline{display:contents}.svgflex-inline ::ng-deep svg{width:100%;height:100%;fill:currentColor}.svgflex-inline ::ng-deep svg path,.svgflex-inline ::ng-deep svg circle,.svgflex-inline ::ng-deep svg rect,.svgflex-inline ::ng-deep svg polygon,.svgflex-inline ::ng-deep svg polyline,.svgflex-inline ::ng-deep svg ellipse,.svgflex-inline ::ng-deep svg line{fill:currentColor}.svgflex-inline ::ng-deep svg[stroke]{stroke:currentColor}.svgflex-inline ::ng-deep svg[stroke] path,.svgflex-inline ::ng-deep svg[stroke] circle,.svgflex-inline ::ng-deep svg[stroke] rect,.svgflex-inline ::ng-deep svg[stroke] polygon,.svgflex-inline ::ng-deep svg[stroke] polyline,.svgflex-inline ::ng-deep svg[stroke] ellipse,.svgflex-inline ::ng-deep svg[stroke] line{stroke:currentColor}.svgflex-loading{width:100%;height:100%;background-color:currentColor;opacity:.1;border-radius:2px}img{display:block;max-width:100%;max-height:100%}:host.icon-sm{width:16px;height:16px}:host.icon-md{width:24px;height:24px}:host.icon-lg{width:32px;height:32px}:host.icon-xl{width:48px;height:48px}:host.icon-2xl{width:64px;height:64px}\n"] }]
+        }], propDecorators: { src: [{
+                type: Input,
+                args: [{ required: true }]
+            }], color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], inline: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostWidth: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], hostHeight: [{
+                type: HostBinding,
+                args: ['style.height']
+            }] } });
+
+/*
+ * Public API Surface of @svgflex/angular
+ */
+// Components
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SvgLoaderService, SvgflexComponent };
+//# sourceMappingURL=svgflex-angular.mjs.map

package/fesm2022/svgflex-angular.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"svgflex-angular.mjs","sources":["../../../packages/angular/src/lib/services/svg-loader.service.ts","../../../packages/angular/src/lib/components/svgflex.component.ts","../../../packages/angular/src/lib/components/svgflex.component.html","../../../packages/angular/src/public-api.ts","../../../packages/angular/src/svgflex-angular.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { Observable, of } from 'rxjs';\nimport { map, catchError, shareReplay } from 'rxjs/operators';\nimport { sanitizeSvg } from '@svgflex/core';\n\n/**\n * Service for loading and caching SVG content\n */\n@Injectable({\n  providedIn: 'root'\n})\nexport class SvgLoaderService {\n  private cache = new Map<string, Observable<string>>();\n\n  constructor(private http: HttpClient) {}\n\n  /**\n   * Loads SVG content from a URL with caching\n   */\n  loadSvg(url: string): Observable<string> {\n    console.log('[SvgLoaderService] Loading SVG from:', url);\n\n    if (this.cache.has(url)) {\n      console.log('[SvgLoaderService] Returning cached SVG for:', url);\n      return this.cache.get(url)!;\n    }\n\n    const svg$ = this.http.get(url, { responseType: 'text' }).pipe(\n      map(svgContent => {\n        console.log('[SvgLoaderService] Successfully loaded SVG from:', url, 'Length:', svgContent.length);\n        return sanitizeSvg(svgContent);\n      }),\n      catchError(error => {\n        console.error(`[SvgLoaderService] Failed to load SVG from ${url}:`, error);\n        return of('');\n      }),\n      shareReplay(1)\n    );\n\n    this.cache.set(url, svg$);\n    return svg$;\n  }\n\n  /**\n   * Clears the SVG cache\n   */\n  clearCache(): void {\n    this.cache.clear();\n  }\n}\n","import {\n  Component,\n  Input,\n  OnChanges,\n  SimpleChanges,\n  HostBinding,\n  inject\n} from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\nimport { CommonModule } from '@angular/common';\nimport { SvgLoaderService } from '../services/svg-loader.service';\nimport { processSvgConfig, SvgFlexConfig, SvgSize, SvgColor } from '@svgflex/core';\n\n/**\n * SVGFlex Component\n *\n * Renders SVG icons with customizable color and size.\n * Supports both inline SVG (for full style control) and external references.\n *\n * @example\n * <svgflex src=\"assets/icons/home.svg\" color=\"red\" size=\"32\"></svgflex>\n * <svgflex src=\"assets/icons/user.svg\" color=\"currentColor\" [size]=\"{width: '2rem', height: '2rem'}\"></svgflex>\n */\n@Component({\n  selector: 'svgflex',\n  standalone: true,\n  imports: [CommonModule],\n  templateUrl: './svgflex.component.html',\n  styleUrl: './svgflex.component.scss'\n})\nexport class SvgflexComponent implements OnChanges {\n  private svgLoader = inject(SvgLoaderService);\n  private sanitizer = inject(DomSanitizer);\n\n  /** Path or URL to the SVG file */\n  @Input({ required: true }) src!: string;\n\n  /** Color for the SVG (defaults to 'currentColor') */\n  @Input() color?: SvgColor;\n\n  /** Size for the SVG (number in px, string with units, or {width, height} object) */\n  @Input() size?: SvgSize;\n\n  /** Additional CSS classes */\n  @Input() class?: string;\n\n  /** Accessibility label */\n  @Input() ariaLabel?: string;\n\n  /** Whether to inline the SVG (default: true) */\n  @Input() inline: boolean = true;\n\n  // Processed values\n  protected width: string = '24px';\n  protected height: string = '24px';\n  protected processedColor: string = 'currentColor';\n  protected svgContent: any = null;\n\n  // Apply CSS classes to :host element\n  @HostBinding('class')\n  get hostClasses(): string {\n    return this.class || '';\n  }\n\n  // Apply inline styles to :host element when size is specified\n  @HostBinding('style.width')\n  get hostWidth(): string | null {\n    return this.size ? this.width : null;\n  }\n\n  @HostBinding('style.height')\n  get hostHeight(): string | null {\n    return this.size ? this.height : null;\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    const config: SvgFlexConfig = {\n      src: this.src,\n      color: this.color,\n      size: this.size,\n      class: this.class,\n      ariaLabel: this.ariaLabel,\n      inline: this.inline\n    };\n\n    const processed = processSvgConfig(config);\n\n    this.width = processed.width;\n    this.height = processed.height;\n    this.processedColor = processed.color;\n    this.ariaLabel = processed.ariaLabel;\n\n    console.log('[SvgflexComponent] Processed config:', {\n      width: this.width,\n      height: this.height,\n      color: this.processedColor,\n      src: this.src\n    });\n\n    // Load SVG content if inline mode is enabled\n    // Check if src or inline changed, or if it's the first change (firstChange)\n    if (this.inline && (changes['src'] || changes['inline'] || Object.keys(changes).length > 0)) {\n      this.loadSvgContent();\n    }\n  }\n\n  private loadSvgContent(): void {\n    console.log('[SvgflexComponent] loadSvgContent called, src:', this.src, 'inline:', this.inline);\n\n    if (!this.src) {\n      console.log('[SvgflexComponent] No src provided, skipping load');\n      return;\n    }\n\n    this.svgLoader.loadSvg(this.src).subscribe((content: string) => {\n      console.log('[SvgflexComponent] Received SVG content, length:', content.length);\n      if (content) {\n        // SVG is already sanitized by SvgLoaderService\n        // Directly bypass security and trust the HTML\n        this.svgContent = this.sanitizer.bypassSecurityTrustHtml(content);\n        console.log('[SvgflexComponent] SVG content set successfully');\n      } else {\n        console.log('[SvgflexComponent] Received empty content');\n      }\n    });\n  }\n}\n","<div\n  class=\"svgflex-container\"\n  [style.color]=\"processedColor\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.role]=\"ariaLabel ? 'img' : null\"\n>\n  @if (inline && svgContent) {\n    <div [innerHTML]=\"svgContent\" class=\"svgflex-inline\"></div>\n  } @else if (!inline) {\n    <img\n      [src]=\"src\"\n      [alt]=\"ariaLabel || ''\"\n      [style.width]=\"width\"\n      [style.height]=\"height\"\n    />\n  } @else {\n    <div class=\"svgflex-loading\"></div>\n  }\n</div>\n","/*\n * Public API Surface of @svgflex/angular\n */\n\n// Components\nexport * from './lib/components/svgflex.component';\n\n// Services\nexport * from './lib/services/svg-loader.service';\n\n// Re-export core types and utils for convenience\nexport * from '@svgflex/core';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,65 @@
+import * as i0 from '@angular/core';
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { SvgColor, SvgSize } from '@svgflex/core';
+export * from '@svgflex/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+/**
+ * SVGFlex Component
+ *
+ * Renders SVG icons with customizable color and size.
+ * Supports both inline SVG (for full style control) and external references.
+ *
+ * @example
+ * <svgflex src="assets/icons/home.svg" color="red" size="32"></svgflex>
+ * <svgflex src="assets/icons/user.svg" color="currentColor" [size]="{width: '2rem', height: '2rem'}"></svgflex>
+ */
+declare class SvgflexComponent implements OnChanges {
+    private svgLoader;
+    private sanitizer;
+    /** Path or URL to the SVG file */
+    src: string;
+    /** Color for the SVG (defaults to 'currentColor') */
+    color?: SvgColor;
+    /** Size for the SVG (number in px, string with units, or {width, height} object) */
+    size?: SvgSize;
+    /** Additional CSS classes */
+    class?: string;
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** Whether to inline the SVG (default: true) */
+    inline: boolean;
+    protected width: string;
+    protected height: string;
+    protected processedColor: string;
+    protected svgContent: any;
+    get hostClasses(): string;
+    get hostWidth(): string | null;
+    get hostHeight(): string | null;
+    ngOnChanges(changes: SimpleChanges): void;
+    private loadSvgContent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SvgflexComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SvgflexComponent, "svgflex", never, { "src": { "alias": "src"; "required": true; }; "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; "class": { "alias": "class"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Service for loading and caching SVG content
+ */
+declare class SvgLoaderService {
+    private http;
+    private cache;
+    constructor(http: HttpClient);
+    /**
+     * Loads SVG content from a URL with caching
+     */
+    loadSvg(url: string): Observable<string>;
+    /**
+     * Clears the SVG cache
+     */
+    clearCache(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SvgLoaderService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SvgLoaderService>;
+}
+
+export { SvgLoaderService, SvgflexComponent };

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@svgflex/angular",
+  "version": "0.1.0",
+  "description": "Angular library for SVG icons with easy color and size customization",
+  "keywords": [
+    "svg",
+    "icons",
+    "angular",
+    "currentColor",
+    "customizable",
+    "standalone",
+    "component"
+  ],
+  "author": "Kosuke Shimizu",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/KosukeShimizu/svgflex.git",
+    "directory": "packages/angular"
+  },
+  "homepage": "https://github.com/KosukeShimizu/svgflex#readme",
+  "bugs": {
+    "url": "https://github.com/KosukeShimizu/svgflex/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/common": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@svgflex/core": "^0.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/svgflex-angular.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/svgflex-angular.mjs"
+    }
+  }
+}