refactor(*): move from svg to library icons (#1682)

infra-geo-ouverte · May 29, 2024 · 397f67b · 397f67b
1 parent 8b0e11b
commit 397f67b
Show file tree

Hide file tree

Showing 11 changed files with 20 additions and 164 deletions.
diff --git a/packages/common/icon/src/shared/icons.ts b/packages/common/icon/src/shared/icons.ts
@@ -3,12 +3,6 @@ import { IconSvg } from './icon.interface';
 /**
  * Source: https://pictogrammers.com/library/mdi/
  */
-export const MAGNIFY_SCAN_ICON: IconSvg = {
-  name: 'magnify-scan',
-  svg: `
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>magnify-scan</title><path d="M17 22V20H20V17H22V20.5C22 20.89 21.84 21.24 21.54 21.54C21.24 21.84 20.89 22 20.5 22H17M7 22H3.5C3.11 22 2.76 21.84 2.46 21.54C2.16 21.24 2 20.89 2 20.5V17H4V20H7V22M17 2H20.5C20.89 2 21.24 2.16 21.54 2.46C21.84 2.76 22 3.11 22 3.5V7H20V4H17V2M7 2V4H4V7H2V3.5C2 3.11 2.16 2.76 2.46 2.46C2.76 2.16 3.11 2 3.5 2H7M10.5 6C13 6 15 8 15 10.5C15 11.38 14.75 12.2 14.31 12.9L17.57 16.16L16.16 17.57L12.9 14.31C12.2 14.75 11.38 15 10.5 15C8 15 6 13 6 10.5C6 8 8 6 10.5 6M10.5 8C9.12 8 8 9.12 8 10.5C8 11.88 9.12 13 10.5 13C11.88 13 13 11.88 13 10.5C13 9.12 11.88 8 10.5 8Z" /></svg>
-`
-};
 
 export const MICROSOFT_ICON: IconSvg = {
   name: 'microsoft',
@@ -42,9 +36,3 @@ export const PRESENTATION_PLAY_ICON: IconSvg = {
   name: 'presentation-play',
   svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>presentation-play</title><path d="M2,3H10A2,2 0 0,1 12,1A2,2 0 0,1 14,3H22V5H21V16H15.25L17,22H15L13.25,16H10.75L9,22H7L8.75,16H3V5H2V3M5,5V14H19V5H5M11.85,11.85C11.76,11.94 11.64,12 11.5,12A0.5,0.5 0 0,1 11,11.5V7.5A0.5,0.5 0 0,1 11.5,7C11.64,7 11.76,7.06 11.85,7.15L13.25,8.54C13.57,8.86 13.89,9.18 13.89,9.5C13.89,9.82 13.57,10.14 13.25,10.46L11.85,11.85Z" /></svg>`
 };
-
-
-export const LAYER_PLUS_ICON: IconSvg = {
-  name: 'layers-plus',
-  svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>layers-plus</title><path d="M17,14H19V17H22V19H19V22H17V19H14V17H17V14M11,16L2,9L11,2L20,9L11,16M11,18.54L12,17.75V18C12,18.71 12.12,19.39 12.35,20L11,21.07L2,14.07L3.62,12.81L11,18.54Z" /></svg>`
-};
diff --git a/packages/geo/src/lib/catalog/catalog-library/catalog-library.component.html b/packages/geo/src/lib/catalog/catalog-library/catalog-library.component.html
@@ -21,6 +21,6 @@
     (click)="addCatalogDialog()"
   >
     {{ 'igo.geo.catalog.library.addBtn' | translate }}
-    <mat-icon [svgIcon]="layerPlusIcon.name"></mat-icon>
+    <mat-icon>library_add</mat-icon>
   </button>
 </div>
diff --git a/packages/geo/src/lib/catalog/catalog-library/catalog-library.component.ts b/packages/geo/src/lib/catalog/catalog-library/catalog-library.component.ts
@@ -14,7 +14,6 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { EntityStore } from '@igo2/common/entity';
-import { IconService, LAYER_PLUS_ICON } from '@igo2/common/icon';
 import { ListComponent, ListItemDirective } from '@igo2/common/list';
 import { IgoLanguageModule } from '@igo2/core/language';
 import { MessageService } from '@igo2/core/message';
@@ -85,8 +84,6 @@ export class CatalogLibaryComponent implements OnInit, OnDestroy {
 
   submitDisabled = true;
 
-  layerPlusIcon = LAYER_PLUS_ICON;
-
   private addingCatalog$$: Subscription;
 
   get addedCatalogs(): Catalog[] {
@@ -107,11 +104,8 @@ export class CatalogLibaryComponent implements OnInit, OnDestroy {
     private capabilitiesService: CapabilitiesService,
     private messageService: MessageService,
     private storageService: StorageService,
-    private dialog: MatDialog,
-    private iconService: IconService
-  ) {
-    this.iconService.registerSvg(this.layerPlusIcon);
-  }
+    private dialog: MatDialog
+  ) {}
 
   /**
    * @internal

diff --git a/packages/geo/src/lib/layer/layer-list/layer-list.component.html b/packages/geo/src/lib/layer/layer-list/layer-list.component.html
@@ -176,11 +176,9 @@
       [matTooltip]="'igo.geo.layer.zoomLayer' | translate"
       (click)="zoomLayerExtents(activeLayer)"
     >
-      <mat-icon
-        matBadgeColor="primary"
-        matBadgeSize="medium"
-        [svgIcon]="magnifyIcon.name"
-      ></mat-icon>
+      <mat-icon matBadgeColor="primary" matBadgeSize="medium"
+        >frame_inspect</mat-icon
+      >
     </button>
 
     <ng-container
@@ -340,7 +338,7 @@
       [matTooltip]="'igo.geo.layer.zoomLayers' | translate"
       (click)="zoomLayersExtents(layersChecked)"
     >
-      <mat-icon [svgIcon]="magnifyIcon.name"></mat-icon>
+      <mat-icon>frame_inspect</mat-icon>
     </button>
   </div>
 </igo-panel>
diff --git a/packages/geo/src/lib/layer/layer-list/layer-list.component.ts b/packages/geo/src/lib/layer/layer-list/layer-list.component.ts
@@ -22,7 +22,6 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatSliderChange, MatSliderModule } from '@angular/material/slider';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
-import { IconService, IconSvg, MAGNIFY_SCAN_ICON } from '@igo2/common/icon';
 import { ListComponent, ListItemDirective } from '@igo2/common/list';
 import { PanelComponent } from '@igo2/common/panel';
 import { IgoLanguageModule } from '@igo2/core/language';
@@ -270,14 +269,8 @@ export class LayerListComponent implements OnInit, OnDestroy {
   public selectAllCheck: boolean;
   public selectAllCheck$ = new BehaviorSubject<boolean>(undefined);
   private selectAllCheck$$: Subscription;
-  magnifyIcon: IconSvg = MAGNIFY_SCAN_ICON;
 
-  constructor(
-    private elRef: ElementRef,
-    private iconService: IconService
-  ) {
-    this.iconService.registerSvg(this.magnifyIcon);
-  }
+  constructor(private elRef: ElementRef) {}
 
   /**
    * Subscribe to the search term stream and trigger researches

diff --git a/packages/integration/src/lib/catalog/catalog-library-tool/catalog-library-tool.component.ts b/packages/integration/src/lib/catalog/catalog-library-tool/catalog-library-tool.component.ts
@@ -6,7 +6,6 @@ import {
 } from '@angular/core';
 
 import { EntityStore } from '@igo2/common/entity';
-import { LAYER_PLUS_ICON } from '@igo2/common/icon';
 import { ToolComponent } from '@igo2/common/tool';
 import { StorageScope, StorageService } from '@igo2/core/storage';
 import { Catalog, CatalogLibaryComponent, CatalogService } from '@igo2/geo';
@@ -22,7 +21,7 @@ import { CatalogState } from '../catalog.state';
 @ToolComponent({
   name: 'catalog',
   title: 'igo.integration.tools.catalog',
-  icon: LAYER_PLUS_ICON
+  icon: 'library_add'
 })
 @Component({
   selector: 'igo-catalog-library-tool',

diff --git a/...es/integration/src/lib/map/advanced-map-tool/advanced-swipe/advanced-swipe.component.html b/...es/integration/src/lib/map/advanced-map-tool/advanced-swipe/advanced-swipe.component.html
@@ -59,7 +59,7 @@
       </span>
     </mat-list-item>
     <mat-list-item>
-      <igo-icon matListItemIcon [icon]="layerPlusIcon"></igo-icon>
+      <mat-icon matListItemIcon>library_add</mat-icon>
       <span
         matListItemTitle
         class="catalog-tool mat-typography"

diff --git a/...ages/integration/src/lib/map/advanced-map-tool/advanced-swipe/advanced-swipe.component.ts b/...ages/integration/src/lib/map/advanced-map-tool/advanced-swipe/advanced-swipe.component.ts
@@ -15,7 +15,7 @@ import { MatListModule } from '@angular/material/list';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
-import { IgoIconComponent, LAYER_PLUS_ICON } from '@igo2/common/icon';
+import { IgoIconComponent } from '@igo2/common/icon';
 import { ContextService, DetailedContext } from '@igo2/context';
 import { IgoLanguageModule } from '@igo2/core/language';
 import { IgoMap, Layer, VectorLayer } from '@igo2/geo';
@@ -53,8 +53,6 @@ export class AdvancedSwipeComponent implements OnInit, OnDestroy {
   public res: DetailedContext;
   public listForSwipe: Layer[];
 
-  layerPlusIcon = LAYER_PLUS_ICON;
-
   /**
    * Get an active map state
    */

diff --git a/packages/integration/src/lib/map/map-details-tool/map-details-tool.component.html b/packages/integration/src/lib/map/map-details-tool/map-details-tool.component.html
@@ -48,20 +48,7 @@
       {{ 'igo.integration.mapTool.customize' | translate }}
     </p>
     <mat-list-item *ngIf="layerAdditionAllowed && searchToolInToolbar">
-      <mat-icon matListItemIcon>
-        <svg
-          viewBox="0 0 24 24"
-          fit=""
-          height="100%"
-          width="100%"
-          preserveAspectRatio="xMidYMid meet"
-          focusable="false"
-        >
-          <path
-            d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
-          ></path>
-        </svg>
-      </mat-icon>
+      <mat-icon matListItemIcon>search</mat-icon>
       <span
         matListItemTitle
         class="search-tool mat-typography"
@@ -71,20 +58,7 @@
       </span>
     </mat-list-item>
     <mat-list-item *ngIf="layerAdditionAllowed && catalogToolInToolbar">
-      <mat-icon matListItemIcon>
-        <svg
-          viewBox="0 0 24 24"
-          fit=""
-          height="100%"
-          width="100%"
-          preserveAspectRatio="xMidYMid meet"
-          focusable="false"
-        >
-          <path
-            d="M17,14H19V17H22V19H19V22H17V19H14V17H17V14M11,16L2,9L11,2L20,9L11,16M11,18.54L12,17.75V18C12,18.71 12.12,19.39 12.35,20L11,21.07L2,14.07L3.62,12.81L11,18.54Z"
-          ></path>
-        </svg>
-      </mat-icon>
+      <mat-icon matListItemIcon>library_add</mat-icon>
       <span
         matListItemTitle
         class="catalog-tool mat-typography"
@@ -94,20 +68,7 @@
       </span>
     </mat-list-item>
     <mat-list-item *ngIf="layerAdditionAllowed && contextToolInToolbar">
-      <mat-icon matListItemIcon>
-        <svg
-          viewBox="0 0 24 24"
-          fit=""
-          height="100%"
-          width="100%"
-          preserveAspectRatio="xMidYMid meet"
-          focusable="false"
-        >
-          <path
-            d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
-          ></path>
-        </svg>
-      </mat-icon>
+      <mat-icon matListItemIcon>star</mat-icon>
       <span
         matListItemTitle
         class="context-tool mat-typography"

diff --git a/packages/integration/src/lib/map/map-legend/map-legend-tool.component.html b/packages/integration/src/lib/map/map-legend/map-legend-tool.component.html
@@ -43,19 +43,7 @@
     </p>
 
     <mat-list-item *ngIf="layerAdditionAllowed && searchToolInToolbar">
-      <mat-icon matListItemIcon>
-        <svg
-          viewBox="0 0 24 24"
-          fit=""
-          height="100%"
-          width="100%"
-          preserveAspectRatio="xMidYMid meet"
-          focusable="false"
-        >
-          <path
-            d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
-          ></path></svg
-      ></mat-icon>
+      <mat-icon matListItemIcon>search</mat-icon>
       <span
         matListItemTitle
         class="search-tool mat-typography"
@@ -65,19 +53,7 @@
       </span>
     </mat-list-item>
     <mat-list-item *ngIf="layerAdditionAllowed && catalogToolInToolbar">
-      <mat-icon matListItemIcon>
-        <svg
-          viewBox="0 0 24 24"
-          fit=""
-          height="100%"
-          width="100%"
-          preserveAspectRatio="xMidYMid meet"
-          focusable="false"
-        >
-          <path
-            d="M17,14H19V17H22V19H19V22H17V19H14V17H17V14M11,16L2,9L11,2L20,9L11,16M11,18.54L12,17.75V18C12,18.71 12.12,19.39 12.35,20L11,21.07L2,14.07L3.62,12.81L11,18.54Z"
-          ></path></svg
-      ></mat-icon>
+      <mat-icon matListItemIcon>library_add</mat-icon>
       <span
         matListItemTitle
         class="catalog-tool mat-typography"
@@ -87,19 +63,7 @@
       </span>
     </mat-list-item>
     <mat-list-item *ngIf="layerAdditionAllowed && contextToolInToolbar">
-      <mat-icon matListItemIcon>
-        <svg
-          viewBox="0 0 24 24"
-          fit=""
-          height="100%"
-          width="100%"
-          preserveAspectRatio="xMidYMid meet"
-          focusable="false"
-        >
-          <path
-            d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
-          ></path></svg
-      ></mat-icon>
+      <mat-icon matListItemIcon>star</mat-icon>
       <span
         matListItemTitle
         class="context-tool mat-typography"

diff --git a/packages/integration/src/lib/map/map-tools/map-tools.component.html b/packages/integration/src/lib/map/map-tools/map-tools.component.html
@@ -95,20 +95,7 @@
       </p>
 
       <mat-list-item *ngIf="layerAdditionAllowed && searchToolInToolbar">
-        <mat-icon matListItemIcon>
-          <svg
-            viewBox="0 0 24 24"
-            fit=""
-            height="100%"
-            width="100%"
-            preserveAspectRatio="xMidYMid meet"
-            focusable="false"
-          >
-            <path
-              d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
-            ></path>
-          </svg>
-        </mat-icon>
+        <mat-icon matListItemIcon>search</mat-icon>
         <span
           matListItemTitle
           class="search-tool mat-typography"
@@ -118,20 +105,7 @@
         </span>
       </mat-list-item>
       <mat-list-item *ngIf="layerAdditionAllowed && catalogToolInToolbar">
-        <mat-icon matListItemIcon>
-          <svg
-            viewBox="0 0 24 24"
-            fit=""
-            height="100%"
-            width="100%"
-            preserveAspectRatio="xMidYMid meet"
-            focusable="false"
-          >
-            <path
-              d="M17,14H19V17H22V19H19V22H17V19H14V17H17V14M11,16L2,9L11,2L20,9L11,16M11,18.54L12,17.75V18C12,18.71 12.12,19.39 12.35,20L11,21.07L2,14.07L3.62,12.81L11,18.54Z"
-            ></path>
-          </svg>
-        </mat-icon>
+        <mat-icon matListItemIcon>library_add</mat-icon>
         <span
           matListItemTitle
           class="catalog-tool mat-typography"
@@ -141,20 +115,7 @@
         </span>
       </mat-list-item>
       <mat-list-item *ngIf="layerAdditionAllowed && contextToolInToolbar">
-        <mat-icon matListItemIcon>
-          <svg
-            viewBox="0 0 24 24"
-            fit=""
-            height="100%"
-            width="100%"
-            preserveAspectRatio="xMidYMid meet"
-            focusable="false"
-          >
-            <path
-              d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
-            ></path>
-          </svg>
-        </mat-icon>
+        <mat-icon matListItemIcon>star</mat-icon>
         <span
           matListItemTitle
           class="context-tool mat-typography"