From 09b6779d0ca8e891e7b8aa53a572b48595967daf Mon Sep 17 00:00:00 2001
From: David Czeck <david@ibiblio.org>
Date: Thu, 4 Jul 2024 08:45:32 -0700
Subject: [PATCH] Remove required src and allow for html-loading to set name

---
 README.md                                             |  7 ++++++-
 package.json                                          |  2 +-
 projects/angular-svg-icon/package.json                |  2 +-
 .../angular-svg-icon/src/lib/svg-icon.component.ts    | 11 ++++++++---
 src/app/demo-app.component.html                       |  4 ++--
 5 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 6afe0ff..da3d904 100644
--- a/README.md
+++ b/README.md
@@ -101,7 +101,12 @@ Basic usage is:
 ```
 *Note that without a height or width set, the SVG may not display!*
 
-If svg was previously loaded via registry with name it can be used like this:
+Loading with a name:
+```html
+<svg-icon src="images/eye.svg" name="eye" [svgStyle]="{ 'width.px':90 }"></svg-icon>
+```
+
+If the SVG was previously loaded with a name either via the component or registry, then it can be used like this:
 ```html
 <svg-icon name="eye" [svgStyle]="{ 'width.px':90 }"></svg-icon>
 ```
diff --git a/package.json b/package.json
index 5ffaab9..0bad613 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "svg-icon",
   "description": "Angular 18 component and service for inlining SVGs allowing them to be easily styled with CSS.",
-  "version": "18.0.0",
+  "version": "18.0.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/czeckd/angular-svg-icon.git"
diff --git a/projects/angular-svg-icon/package.json b/projects/angular-svg-icon/package.json
index f7207e4..22a0d2d 100644
--- a/projects/angular-svg-icon/package.json
+++ b/projects/angular-svg-icon/package.json
@@ -1,7 +1,7 @@
 {
   "name": "angular-svg-icon",
   "description": "Angular 18 component and service for inlining SVGs allowing them to be easily styled with CSS.",
-  "version": "18.0.0",
+  "version": "18.0.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/czeckd/angular-svg-icon.git"
diff --git a/projects/angular-svg-icon/src/lib/svg-icon.component.ts b/projects/angular-svg-icon/src/lib/svg-icon.component.ts
index 9750c1d..e247f4a 100644
--- a/projects/angular-svg-icon/src/lib/svg-icon.component.ts
+++ b/projects/angular-svg-icon/src/lib/svg-icon.component.ts
@@ -26,7 +26,7 @@ export class SvgIconComponent implements OnDestroy {
 	private renderer = inject(Renderer2);
 	private iconReg = inject(SvgIconRegistryService);
 
-	src = input.required<string>();
+	src = input<string>();
 	name = input<string>();
 	stretch = input(false);
 	applyClass = input(false);
@@ -115,8 +115,13 @@ export class SvgIconComponent implements OnDestroy {
 		return this.element.nativeElement.firstChild;
 	}
 
-	private init(src: string, name?: string) {
-		if (name) {
+	private init(src?: string, name?: string) {
+		if (src && name) {
+			const svgObs = this.iconReg.loadSvg(src, name);
+			if (svgObs) {
+				this.helper.icnSub = svgObs.subscribe(svg => this.initSvg(svg));
+			}
+		} else if (name) {
 			const svgObs = this.iconReg.getSvgByName(name);
 			if (svgObs) {
 				this.helper.icnSub = svgObs.subscribe(svg => this.initSvg(svg));
diff --git a/src/app/demo-app.component.html b/src/app/demo-app.component.html
index 3b07411..4860315 100644
--- a/src/app/demo-app.component.html
+++ b/src/app/demo-app.component.html
@@ -2,8 +2,8 @@
 
 	<div class="example"> <!-- style="width:500px;display: flex;"> -->
 		<svg-icon src="assets/images/eye.svg" class="red"></svg-icon>
-		<svg-icon src="assets/images/eye.svg" class="green" style="transform: scaleX(-1);"></svg-icon>
-		<svg-icon src="assets/images/eye.svg" class="blue"></svg-icon>
+		<svg-icon src="assets/images/eye.svg" name="eye" class="green" style="transform: scaleX(-1);"></svg-icon>
+		<svg-icon name="eye" class="blue"></svg-icon>
 	</div>
 
 	<form style="clear:both;">