Merge pull request #158 from czeckd/bugfix/src-should-not-be-required

Remove required src and allow for html-loading to set name

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>
 ```

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"

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"

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));

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;">