feat(icon): cache svg icons

A-l-y-l-e · Nov 3, 2018 · 5df9448 · 5df9448
1 parent 11f327e
commit 5df9448
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 22 deletions.
diff --git a/src/lib/icon/icon.service.ts b/src/lib/icon/icon.service.ts
@@ -12,12 +12,12 @@ const styles = {
     width: 'inherit',
     height: 'inherit',
     fill: 'currentColor',
-    }
+  }
 };
 
 export interface SvgIcon {
   obs: Observable<SVGElement>;
-  loaded?: boolean;
+  svg?: SVGElement;
 }
 
 @Injectable({
@@ -26,34 +26,50 @@ export interface SvgIcon {
 export class LyIconService {
   private svgMap = new Map<string, SvgIcon>();
   classes = this.theme.addStyleSheet(styles, STYLE_PRIORITY);
+  readonly defaultSvgIcon: SVGElement;
   constructor(
     private http: HttpClient,
     @Optional() @Inject(DOCUMENT) private document: any,
     private theme: LyTheme2
-  ) { }
+  ) {
+    this.defaultSvgIcon = this._textToSvg('<svg viewBox="0 0 20 20"><circle cx="10" cy="10" r="10"></circle></svg>');
+  }
 
   setSvg(key: string, url: string) {
     if (!this.svgMap.has(key)) {
       url = `${url}.svg`;
-      this.svgMap.set(key,
-        {
-          obs: this.http.get(url, { responseType: 'text' })
-          .pipe(
-            share(),
-            map(svgText => this.textToSvg(svgText)),
-          )
-        }
-      );
+      const svgIcon: SvgIcon = {
+        obs: this.http.get(url, { responseType: 'text' })
+        .pipe(
+          share(),
+          map(svgText => {
+            if (svgIcon.svg) {
+              return svgIcon.svg;
+            }
+            const svg = this._textToSvg(svgText);
+            this._cacheSvgIcon(svg, key);
+            return svg;
+          }),
+        )
+      };
+      this.svgMap.set(key, svgIcon);
     }
   }
 
-  textToSvg(str: string): SVGElement {
+  private _textToSvg(str: string): SVGElement {
     const div = this.document.createElement('DIV');
     div.innerHTML = str;
     const svg = div.querySelector('svg') as SVGElement;
     return svg;
   }
 
+  private _cacheSvgIcon(svg: SVGElement, key: string) {
+    const svgIconInfo = this.svgMap.get(key);
+    if (!svgIconInfo.svg) {
+      this.svgMap.get(key).svg = svg;
+    }
+  }
+
   getSvg(key: string): SvgIcon {
     return this.svgMap.get(key);
   }

diff --git a/src/lib/icon/icon.ts b/src/lib/icon/icon.ts
@@ -53,14 +53,19 @@ export class Icon implements OnInit {
   }
 
   private _prepareSvgIcon(svgIcon: SvgIcon) {
-    svgIcon.obs
-      .pipe(
-        take(1)
-      )
-      .subscribe((svgElement) => {
-        this._cleanIcon();
-        this._appendChild(svgElement);
-      });
+    if (svgIcon.svg) {
+      this._cleanIcon();
+      this._appendChild(svgIcon.svg.cloneNode(true) as SVGElement);
+    } else {
+      svgIcon.obs
+        .pipe(
+          take(1)
+        )
+        .subscribe((svgElement) => {
+          this._cleanIcon();
+          this._appendChild(svgElement.cloneNode(true) as SVGElement);
+        });
+    }
   }
 
   private _appendChild(svg: SVGElement) {
@@ -69,7 +74,7 @@ export class Icon implements OnInit {
   }
 
   private _appendDefaultSvgIcon() {
-    this._appendChild(this.iconService.textToSvg('<svg viewBox="0 0 20 20"><circle cx="10" cy="10" r="10"></circle></svg>'));
+    this._appendChild(this.iconService.defaultSvgIcon);
   }
 
   private _updateClass() {