@svgflex/angular 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -93,7 +93,6 @@ class SvgflexComponent {
|
|
|
93
93
|
// Processed values
|
|
94
94
|
width = '24px';
|
|
95
95
|
height = '24px';
|
|
96
|
-
processedColor = 'currentColor';
|
|
97
96
|
processedReplaceColors = true;
|
|
98
97
|
svgContent = null;
|
|
99
98
|
// Apply CSS classes to :host element
|
|
@@ -120,13 +119,12 @@ class SvgflexComponent {
|
|
|
120
119
|
const processed = processSvgConfig(config);
|
|
121
120
|
this.width = processed.width;
|
|
122
121
|
this.height = processed.height;
|
|
123
|
-
this.processedColor = processed.color;
|
|
124
122
|
this.processedReplaceColors = processed.replaceColors;
|
|
125
123
|
this.ariaLabel = processed.ariaLabel;
|
|
126
124
|
console.log('[SvgflexComponent] Processed config:', {
|
|
127
125
|
width: this.width,
|
|
128
126
|
height: this.height,
|
|
129
|
-
color: this.
|
|
127
|
+
color: this.color,
|
|
130
128
|
replaceColors: this.processedReplaceColors,
|
|
131
129
|
src: this.src
|
|
132
130
|
});
|
|
@@ -158,11 +156,11 @@ class SvgflexComponent {
|
|
|
158
156
|
});
|
|
159
157
|
}
|
|
160
158
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SvgflexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
161
|
-
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", alt: "alt", inline: "inline", replaceColors: "replaceColors" }, 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]=\"
|
|
159
|
+
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", alt: "alt", inline: "inline", replaceColors: "replaceColors" }, 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]=\"color || null\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.role]=\"ariaLabel ? 'img' : null\"\n [attr.title]=\"ariaLabel\"\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 [title]=\"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-flex;align-items:center;justify-content:center}: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 }] });
|
|
162
160
|
}
|
|
163
161
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SvgflexComponent, decorators: [{
|
|
164
162
|
type: Component,
|
|
165
|
-
args: [{ selector: 'svgflex', standalone: true, imports: [CommonModule], template: "<div\n class=\"svgflex-container\"\n [style.color]=\"
|
|
163
|
+
args: [{ selector: 'svgflex', standalone: true, imports: [CommonModule], template: "<div\n class=\"svgflex-container\"\n [style.color]=\"color || null\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.role]=\"ariaLabel ? 'img' : null\"\n [attr.title]=\"ariaLabel\"\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 [title]=\"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-flex;align-items:center;justify-content:center}: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"] }]
|
|
166
164
|
}], propDecorators: { src: [{
|
|
167
165
|
type: Input,
|
|
168
166
|
args: [{ required: true }]
|
|
@@ -1 +1 @@
|
|
|
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, Map<boolean, Observable<string>>>();\n\n constructor(private http: HttpClient) {}\n\n /**\n * Loads SVG content from a URL with caching\n * @param url - URL to load the SVG from\n * @param replaceColors - Whether to replace hardcoded colors with currentColor (default: true)\n */\n loadSvg(url: string, replaceColors: boolean = true): Observable<string> {\n console.log('[SvgLoaderService] Loading SVG from:', url, 'replaceColors:', replaceColors);\n\n // Check cache with both url and replaceColors as key\n if (!this.cache.has(url)) {\n this.cache.set(url, new Map());\n }\n\n const urlCache = this.cache.get(url)!;\n if (urlCache.has(replaceColors)) {\n console.log('[SvgLoaderService] Returning cached SVG for:', url, 'replaceColors:', replaceColors);\n return urlCache.get(replaceColors)!;\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, replaceColors);\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 urlCache.set(replaceColors, 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 ChangeDetectorRef\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 * Compatible with both Zone.js and Zoneless Angular applications.\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 private cdr = inject(ChangeDetectorRef);\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 /** Alternative text / Accessibility label (alias for ariaLabel) */\n @Input() alt?: string;\n\n /** Whether to inline the SVG (default: true) */\n @Input() inline: boolean = true;\n\n /** Whether to replace hardcoded colors with currentColor (default: true) */\n @Input() replaceColors: boolean = true;\n\n // Processed values\n protected width: string = '24px';\n protected height: string = '24px';\n protected processedColor: string = 'currentColor';\n protected processedReplaceColors: boolean = true;\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 || this.alt,\n inline: this.inline,\n replaceColors: this.replaceColors\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.processedReplaceColors = processed.replaceColors;\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 replaceColors: this.processedReplaceColors,\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'] || changes['replaceColors'] || 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, 'replaceColors:', this.processedReplaceColors);\n\n if (!this.src) {\n console.log('[SvgflexComponent] No src provided, skipping load');\n return;\n }\n\n this.svgLoader.loadSvg(this.src, this.processedReplaceColors).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 // Manually trigger change detection for Zoneless compatibility\n this.cdr.markForCheck();\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 [attr.title]=\"ariaLabel\"\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 [title]=\"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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"}
|
|
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, Map<boolean, Observable<string>>>();\n\n constructor(private http: HttpClient) {}\n\n /**\n * Loads SVG content from a URL with caching\n * @param url - URL to load the SVG from\n * @param replaceColors - Whether to replace hardcoded colors with currentColor (default: true)\n */\n loadSvg(url: string, replaceColors: boolean = true): Observable<string> {\n console.log('[SvgLoaderService] Loading SVG from:', url, 'replaceColors:', replaceColors);\n\n // Check cache with both url and replaceColors as key\n if (!this.cache.has(url)) {\n this.cache.set(url, new Map());\n }\n\n const urlCache = this.cache.get(url)!;\n if (urlCache.has(replaceColors)) {\n console.log('[SvgLoaderService] Returning cached SVG for:', url, 'replaceColors:', replaceColors);\n return urlCache.get(replaceColors)!;\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, replaceColors);\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 urlCache.set(replaceColors, 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 ChangeDetectorRef\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 * Compatible with both Zone.js and Zoneless Angular applications.\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 private cdr = inject(ChangeDetectorRef);\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 /** Alternative text / Accessibility label (alias for ariaLabel) */\n @Input() alt?: string;\n\n /** Whether to inline the SVG (default: true) */\n @Input() inline: boolean = true;\n\n /** Whether to replace hardcoded colors with currentColor (default: true) */\n @Input() replaceColors: boolean = true;\n\n // Processed values\n protected width: string = '24px';\n protected height: string = '24px';\n protected processedReplaceColors: boolean = true;\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 || this.alt,\n inline: this.inline,\n replaceColors: this.replaceColors\n };\n\n const processed = processSvgConfig(config);\n\n this.width = processed.width;\n this.height = processed.height;\n this.processedReplaceColors = processed.replaceColors;\n this.ariaLabel = processed.ariaLabel;\n\n console.log('[SvgflexComponent] Processed config:', {\n width: this.width,\n height: this.height,\n color: this.color,\n replaceColors: this.processedReplaceColors,\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'] || changes['replaceColors'] || 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, 'replaceColors:', this.processedReplaceColors);\n\n if (!this.src) {\n console.log('[SvgflexComponent] No src provided, skipping load');\n return;\n }\n\n this.svgLoader.loadSvg(this.src, this.processedReplaceColors).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 // Manually trigger change detection for Zoneless compatibility\n this.cdr.markForCheck();\n });\n }\n}\n","<div\n class=\"svgflex-container\"\n [style.color]=\"color || null\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.role]=\"ariaLabel ? 'img' : null\"\n [attr.title]=\"ariaLabel\"\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 [title]=\"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
CHANGED
|
@@ -38,7 +38,6 @@ declare class SvgflexComponent implements OnChanges {
|
|
|
38
38
|
replaceColors: boolean;
|
|
39
39
|
protected width: string;
|
|
40
40
|
protected height: string;
|
|
41
|
-
protected processedColor: string;
|
|
42
41
|
protected processedReplaceColors: boolean;
|
|
43
42
|
protected svgContent: any;
|
|
44
43
|
get hostClasses(): string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@svgflex/angular",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4",
|
|
4
4
|
"description": "Angular library for SVG icons with easy color and size customization",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"svg",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"@angular/common": "^20.0.0",
|
|
30
30
|
"@angular/core": "^20.0.0",
|
|
31
|
-
"@svgflex/core": "^0.1.
|
|
31
|
+
"@svgflex/core": "^0.1.4"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"tslib": "^2.3.0"
|