Creates JavaScript files with the SVG icons

camptocamp · Aug 29, 2024 · c1c5c5a · c1c5c5a
1 parent b58bedd
commit c1c5c5a
Show file tree

Hide file tree

Showing 31 changed files with 403 additions and 1,011 deletions.
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "ngeo/test": "./test/spec",
     "gmf/test": "./contribs/gmf/test/spec",
     "ngeo": "./src",
+    "gmf": "./src",
     "api": "./api/src",
     "lib": "./lib",
     "jsts": "jsts/org/locationtech/jts",

diff --git a/src/auth/FormElement.ts b/src/auth/FormElement.ts
@@ -24,8 +24,7 @@ import {customElement, property, state} from 'lit/decorators.js';
 import GmfBaseElement from 'gmfapi/elements/BaseElement';
 import {Message, MessageType} from 'ngeo/message/Message';
 import ngeoMessageNotification from 'ngeo/message/Notification';
-import {unsafeSVG} from 'lit/directives/unsafe-svg';
-import loadingSvg from 'gmf/icons/spinner';
+import {litIcon as svgSpinner} from 'gmf/icons/spinner_svg';
 import {gmfBackgroundlayerStatus} from 'ngeo/backgroundlayerselector/status';
 import user, {User, UserState} from 'gmfapi/store/user';
 // @ts-ignore
@@ -225,7 +224,7 @@ export default class GmfAuthForm extends GmfBaseElement {
                 ${this.isLoading
                   ? html`
                       <div class="login-spinner">
-                        <i class="fa fa-spin">${unsafeSVG(loadingSvg)}</i>
+                        <i class="fa fa-spin">${svgSpinner()}</i>
                       </div>
                     `
                   : ''}

diff --git a/src/auth/PanelElement.ts b/src/auth/PanelElement.ts
@@ -21,8 +21,7 @@
 
 import {html, TemplateResult, CSSResult, css, unsafeCSS} from 'lit';
 import {customElement, property, state} from 'lit/decorators.js';
-import {unsafeSVG} from 'lit/directives/unsafe-svg.js';
-import loadingSvg from 'gmf/icons/spinner';
+import {litIcon as svgSpinner} from 'gmf/icons/spinner_svg';
 import i18next from 'i18next';
 import {PasswordValidator} from './FormElement';
 import './FormElement';
@@ -62,7 +61,7 @@ export default class GmfAuthPanel extends ToolPanelElement {
     const spinnerTemplate = this.postLoading
       ? html`
           <div>
-            <i class="fa fa-spin svg-spinner">${unsafeSVG(loadingSvg)}</i>
+            <i class="fa fa-spin svg-spinner">${svgSpinner()}</i>
             ${i18next.t('Loading themes, please wait...')}
           </div>
         `

diff --git a/src/drawing/drawFeatureComponent.html.js b/src/drawing/drawFeatureComponent.html.js
@@ -19,6 +19,13 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
+import svgPoint from 'gmf/icons/point_svg';
+import svgLine from 'gmf/icons/line_svg';
+import svgPolygon from 'gmf/icons/polygon_svg';
+import svgCircle from 'gmf/icons/circle_svg';
+import svgRectangle from 'gmf/icons/rectangle_svg';
+import svgText from 'gmf/icons/text_svg';
+
 export default `<ngeo-drawfeature
   ngeo-btn-group
   class="btn-group"
@@ -36,11 +43,7 @@ export default `<ngeo-drawfeature
     class="btn btn-default ngeo-drawfeature-point"
     ng-class="{active: dfCtrl.drawPoint.active}"
     ng-model="dfCtrl.drawPoint.active"
-    ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em">
-      <path
-        d="M7.948 10.25c-1.26.009-2.349-1.23-2.184-2.48.11-1.153 1.218-2.124 2.387-2.013 1.064.06 2.022.956 2.09 2.028.1.975-.492 1.973-1.42 2.31a2.2 2.2 0 0 1-.873.155m.047-1.357c.606.03 1.103-.703.827-1.248-.215-.499-.934-.709-1.357-.343-.393.3-.47.941-.11 1.295.16.18.395.295.64.296"
-      /></svg
-  ></a>
+    >${svgPoint}</a>
   <a
     data-toggle="tooltip"
     title="{{'Draw a line on the map' | translate}}"
@@ -50,11 +53,7 @@ export default `<ngeo-drawfeature
     class="btn btn-default ngeo-drawfeature-linestring"
     ng-class="{active: dfCtrl.measureLength.active}"
     ng-model="dfCtrl.measureLength.active"
-    ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em">
-      <path
-        d="M6.626.267C5.366.26 4.27 1.498 4.436 2.75c.109 1.153 1.216 2.129 2.384 2.017 1.064-.06 2.031-.96 2.1-2.031.1-.975-.497-1.977-1.424-2.313a2.2 2.2 0 0 0-.87-.155zm.046 1.364c.605-.03 1.095.7.819 1.244-.215.498-.93.71-1.353.344-.392-.3-.473-.94-.112-1.293.16-.18.4-.294.645-.295zM3.916 8.397c-1.256-.007-2.353 1.225-2.19 2.475.104 1.16 1.223 2.142 2.397 2.023 1.062-.066 2.019-.962 2.087-2.036.093-.932-.446-1.892-1.312-2.259a2.2 2.2 0 0 0-.983-.203zm.048 1.363c.612-.028 1.104.716.807 1.266-.228.493-.94.682-1.355.313-.377-.3-.457-.923-.106-1.276a.89.89 0 0 1 .654-.303m8.05 1.467c-1.25-.023-2.353 1.178-2.224 2.422.075 1.165 1.179 2.174 2.358 2.078 1.07-.043 2.05-.936 2.13-2.016.103-.936-.434-1.905-1.301-2.278-.301-.14-.631-.214-.963-.207zm.008 1.364c.615-.037 1.115.708.821 1.26-.217.478-.906.684-1.322.344-.424-.297-.5-.976-.113-1.332a.88.88 0 0 1 .615-.272zm-6.81-2.163c-.143.417-.282.832-.434 1.245 1.92.67 3.84 1.333 5.755 2.011.153-.432.296-.863.455-1.293-1.92-.67-3.841-1.335-5.759-2.011zm.426-6.874C4.973 5.436 4.313 7.32 3.642 9.2q.648.225 1.292.458 1-2.85 2.012-5.694-.648-.224-1.29-.458z"
-      /></svg
-  ></a>
+    >${svgLine}</a>
   <a
     data-toggle="tooltip"
     title="{{'Draw a polygon on the map' | translate}}"
@@ -64,11 +63,7 @@ export default `<ngeo-drawfeature
     class="btn btn-default ngeo-drawfeature-polygon"
     ng-class="{active: dfCtrl.measureArea.active}"
     ng-model="dfCtrl.measureArea.active"
-    ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em">
-      <path
-        d="M5.045-.029c-1.26-.008-2.35 1.23-2.184 2.48.06.632.43 1.202.936 1.576-.479 1.358-.968 2.714-1.45 4.072-1.257-.008-2.363 1.23-2.2 2.48.105 1.16 1.228 2.13 2.402 2.012a2.3 2.3 0 0 0 1.45-.67c1.273.53 2.553 1.056 3.823 1.59a2 2 0 0 0 0 .438c.074 1.165 1.176 2.17 2.355 2.074 1.07-.042 2.057-.932 2.138-2.012a2.3 2.3 0 0 0-.453-1.607q.654-.89 1.31-1.778c.186.04.369.047.562.031 1.067-.047 2.04-.935 2.122-2.012.11-.964-.464-1.959-1.373-2.31a2 2 0 0 0-.343-.108l-.125-1.857c.743-.313 1.326-1.036 1.388-1.856.11-.964-.463-1.958-1.372-2.309a2.2 2.2 0 0 0-.92-.172c-.08 0-.158-.008-.235 0-.841.098-1.565.75-1.84 1.545-1.26-.004-2.53-.009-3.791-.016C7.045.918 6.564.361 5.919.127a2.2 2.2 0 0 0-.874-.156m.047 1.357c.605-.03 1.103.704.827 1.248-.215.499-.934.71-1.358.343-.392-.299-.47-.94-.109-1.294a.87.87 0 0 1 .64-.297m8.08.063c.62-.026 1.099.719.796 1.263-.232.498-.967.692-1.373.297-.361-.308-.431-.939-.078-1.28a.9.9 0 0 1 .656-.28M7.246 2.919c1.257.005 2.517.024 3.775.032a2.33 2.33 0 0 0 1.622 1.513q.064.936.125 1.872c-.877.376-1.511 1.322-1.388 2.293.042.482.267.94.592 1.295-.416.567-.826 1.136-1.248 1.7a2 2 0 0 0-.67-.109v.016c-.632-.012-1.235.287-1.654.748-1.26-.525-2.517-1.063-3.775-1.59.005-.043.013-.083.015-.126a2.27 2.27 0 0 0-.967-2.074q.707-2.014 1.42-4.025c.052 0 .104.005.156 0 .898-.05 1.72-.7 1.997-1.545m6.38 4.602c.62-.025 1.098.72.796 1.264-.233.497-.967.691-1.373.296-.362-.308-.432-.938-.078-1.279a.9.9 0 0 1 .655-.28M2.393 9.456c.612-.028 1.109.729.811 1.28-.228.493-.942.68-1.357.311-.377-.3-.46-.926-.11-1.28a.9.9 0 0 1 .656-.311m7.66 3.432c.615-.037 1.12.711.826 1.263-.217.48-.91.684-1.326.344-.423-.297-.495-.986-.109-1.342a.86.86 0 0 1 .609-.265"
-      /></svg
-  ></a>
+    >${svgPolygon}</a>
   <a
     data-toggle="tooltip"
     title="{{'Draw a circle on the map' | translate}}"
@@ -78,11 +73,7 @@ export default `<ngeo-drawfeature
     class="btn btn-default ngeo-drawfeature-circle"
     ng-class="{active: dfCtrl.measureAzimut.active}"
     ng-model="dfCtrl.measureAzimut.active"
-    ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em">
-      <path
-        d="M1.14 8c0-1.242.308-2.383.92-3.432a6.84 6.84 0 0 1 2.496-2.496 6.7 6.7 0 0 1 3.432-.92c1.242 0 2.383.308 3.432.92a6.84 6.84 0 0 1 2.496 2.496c.612 1.049.92 2.19.92 3.432a6.7 6.7 0 0 1-.577 2.746c.409.444.651 1.039.593 1.653-.06 1.064-.956 2.022-2.028 2.09a2.25 2.25 0 0 1-1.591-.467 6.7 6.7 0 0 1-3.245.826 6.7 6.7 0 0 1-3.432-.92 6.84 6.84 0 0 1-2.496-2.496A6.7 6.7 0 0 1 1.14 8m1.138 0q0 1.158.453 2.215a5.7 5.7 0 0 0 1.216 1.81 5.8 5.8 0 0 0 1.826 1.217 5.5 5.5 0 0 0 2.215.468c.773-.001 1.51-.166 2.215-.468.11-.048.222-.104.328-.156-.003-.007-.014-.01-.016-.016a2.2 2.2 0 0 1-.156-.874c-.008-1.26 1.23-2.349 2.48-2.184.145.014.285.05.422.094.004.001.01-.002.015 0 .274-.67.421-1.373.421-2.106 0-.773-.164-1.511-.468-2.215a5.8 5.8 0 0 0-1.216-1.825 5.7 5.7 0 0 0-1.81-1.217 5.6 5.6 0 0 0-2.215-.453 5.5 5.5 0 0 0-2.215.453A5.8 5.8 0 0 0 3.947 3.96a5.8 5.8 0 0 0-1.216 1.825A5.5 5.5 0 0 0 2.278 8m9.438 4.243v.063c.005.128.047.25.11.358a1 1 0 0 0 .046.078.9.9 0 0 0 .203.203c.017.013.03.035.047.047q.016.009.031.016a.779.779 0 0 0 .811.062c.37-.159.579-.595.515-.983v-.015a.75.75 0 0 0-.172-.36.8.8 0 0 0-.156-.155c-.02-.015-.04-.018-.062-.031a1 1 0 0 0-.11-.063q-.06-.027-.124-.047-.038-.009-.078-.015a1 1 0 0 0-.218-.016q.008-.008.015-.015a.8.8 0 0 0-.561.234.87.87 0 0 0-.297.64"
-      /></svg
-  ></a>
+    >${svgCircle}</a>
   <a
     data-toggle="tooltip"
     title="{{'Draw a rectangle on the map' | translate}}"
@@ -92,11 +83,7 @@ export default `<ngeo-drawfeature
     class="btn btn-default ngeo-drawfeature-rectangle"
     ng-class="{active: dfCtrl.drawRectangle.active}"
     ng-model="dfCtrl.drawRectangle.active"
-    ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em">
-      <path
-        d="M2.317 14.491a2.2 2.2 0 0 1-.874-.156C.257 13.91-.343 12.38.242 11.262a2.27 2.27 0 0 1 1.28-1.139l-.016-4.258c-.02-.008-.042-.008-.063-.016C.258 5.424-.343 3.894.243 2.776.74 1.731 2.115 1.194 3.174 1.7c.572.246 1.007.747 1.217 1.326L11.6 3.01c.028-.077.055-.16.093-.234.5-1.045 1.874-1.582 2.933-1.076.979.422 1.584 1.59 1.28 2.62a2.3 2.3 0 0 1-1.467 1.576l.016 4.228c.057.02.115.035.171.062.979.422 1.584 1.59 1.28 2.621-.24.95-1.151 1.688-2.137 1.685a2.2 2.2 0 0 1-.874-.156c-.625-.224-1.083-.757-1.295-1.373l-7.207.015c-.302.864-1.151 1.516-2.075 1.513zm-.14-1.357c.508.052 1.045-.42.982-.951-.03-.542-.63-.978-1.154-.78-.472.146-.764.713-.547 1.17.089.223.27.413.5.499a.8.8 0 0 0 .218.062m11.45 0c.509.052 1.045-.42.982-.951-.03-.542-.63-.978-1.154-.78-.472.146-.764.713-.546 1.17.088.223.27.413.499.499a.8.8 0 0 0 .218.062M4.39 11.527l7.192-.015q.045-.128.109-.25c.259-.542.747-.944 1.31-1.139V5.88c-.036-.012-.073-.017-.109-.031-.628-.225-1.085-.768-1.295-1.388H4.407a2.33 2.33 0 0 1-1.42 1.435l.015 4.227c.056.02.118.037.172.063.576.248 1.009.757 1.217 1.342zm-2.215-6.88c.51.052 1.046-.42.983-.95-.03-.543-.63-.979-1.154-.781-.472.146-.764.714-.547 1.17.089.224.27.414.5.5a.8.8 0 0 0 .218.062m11.45 0c.51.052 1.046-.42.983-.95-.03-.543-.63-.979-1.154-.781-.472.146-.764.714-.546 1.17.088.224.27.414.499.5a.8.8 0 0 0 .218.062"
-      /></svg
-  ></a>
+    >${svgRectangle}</a>
   <a
     data-toggle="tooltip"
     title="{{'Draw a text label on the map' | translate}}"
@@ -106,11 +93,7 @@ export default `<ngeo-drawfeature
     class="btn btn-default ngeo-drawfeature-text"
     ng-class="{active: dfCtrl.drawText.active}"
     ng-model="dfCtrl.drawText.active"
-    ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em">
-      <path
-        d="M14.334 6.347v1.996h-1.997v4.649h-1.996V8.343H8.344V6.347zM1.666 3.008h8.674v1.997H7v7.987H5.004V5.005H1.666z"
-      /></svg
-  ></a>
+    >${svgText}</a>
 </ngeo-drawfeature>
 
 <div ng-switch="efCtrl.selectedFeature">

diff --git a/src/editing/editFeatureComponent.html.js b/src/editing/editFeatureComponent.html.js
@@ -19,6 +19,10 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
+import svgPoint from 'gmf/icons/point_svg';
+import svgLine from 'gmf/icons/line_svg';
+import svgPolygon from 'gmf/icons/polygon_svg';
+
 export default `<div>
   <div ng-switch="efCtrl.feature">
     <a
@@ -36,53 +40,17 @@ export default `<div>
       ng-model="efCtrl.createActive"
     >
       <span ng-switch="::efCtrl.geomType">
-        <span ng-switch-when="Point">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em">
-            <path
-              d="M7.948 10.25c-1.26.009-2.349-1.23-2.184-2.48.11-1.153 1.218-2.124 2.387-2.013 1.064.06 2.022.956 2.09 2.028.1.975-.492 1.973-1.42 2.31a2.2 2.2 0 0 1-.873.155m.047-1.357c.606.03 1.103-.703.827-1.248-.215-.499-.934-.709-1.357-.343-.393.3-.47.941-.11 1.295.16.18.395.295.64.296"
-            />
-          </svg>
-          {{'Draw new point' | translate}}
+        <span ng-switch-when="Point">${svgPoint} {{'Draw new point' | translate}}
         </span>
-        <span ng-switch-when="MultiPoint">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em">
-            <path
-              d="M7.948 10.25c-1.26.009-2.349-1.23-2.184-2.48.11-1.153 1.218-2.124 2.387-2.013 1.064.06 2.022.956 2.09 2.028.1.975-.492 1.973-1.42 2.31a2.2 2.2 0 0 1-.873.155m.047-1.357c.606.03 1.103-.703.827-1.248-.215-.499-.934-.709-1.357-.343-.393.3-.47.941-.11 1.295.16.18.395.295.64.296"
-            />
-          </svg>
-          {{'Draw new point' | translate}}
+        <span ng-switch-when="MultiPoint">${svgPoint} {{'Draw new point' | translate}}
         </span>
-        <span ng-switch-when="LineString">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em">
-            <path
-              d="M6.626.267C5.366.26 4.27 1.498 4.436 2.75c.109 1.153 1.216 2.129 2.384 2.017 1.064-.06 2.031-.96 2.1-2.031.1-.975-.497-1.977-1.424-2.313a2.2 2.2 0 0 0-.87-.155zm.046 1.364c.605-.03 1.095.7.819 1.244-.215.498-.93.71-1.353.344-.392-.3-.473-.94-.112-1.293.16-.18.4-.294.645-.295zM3.916 8.397c-1.256-.007-2.353 1.225-2.19 2.475.104 1.16 1.223 2.142 2.397 2.023 1.062-.066 2.019-.962 2.087-2.036.093-.932-.446-1.892-1.312-2.259a2.2 2.2 0 0 0-.983-.203zm.048 1.363c.612-.028 1.104.716.807 1.266-.228.493-.94.682-1.355.313-.377-.3-.457-.923-.106-1.276a.89.89 0 0 1 .654-.303m8.05 1.467c-1.25-.023-2.353 1.178-2.224 2.422.075 1.165 1.179 2.174 2.358 2.078 1.07-.043 2.05-.936 2.13-2.016.103-.936-.434-1.905-1.301-2.278-.301-.14-.631-.214-.963-.207zm.008 1.364c.615-.037 1.115.708.821 1.26-.217.478-.906.684-1.322.344-.424-.297-.5-.976-.113-1.332a.88.88 0 0 1 .615-.272zm-6.81-2.163c-.143.417-.282.832-.434 1.245 1.92.67 3.84 1.333 5.755 2.011.153-.432.296-.863.455-1.293-1.92-.67-3.841-1.335-5.759-2.011zm.426-6.874C4.973 5.436 4.313 7.32 3.642 9.2q.648.225 1.292.458 1-2.85 2.012-5.694-.648-.224-1.29-.458z"
-            />
-          </svg>
-          {{'Draw new linestring' | translate}}
+        <span ng-switch-when="LineString">${svgLine} {{'Draw new linestring' | translate}}
         </span>
-        <span ng-switch-when="MultiLineString">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em">
-            <path
-              d="M6.626.267C5.366.26 4.27 1.498 4.436 2.75c.109 1.153 1.216 2.129 2.384 2.017 1.064-.06 2.031-.96 2.1-2.031.1-.975-.497-1.977-1.424-2.313a2.2 2.2 0 0 0-.87-.155zm.046 1.364c.605-.03 1.095.7.819 1.244-.215.498-.93.71-1.353.344-.392-.3-.473-.94-.112-1.293.16-.18.4-.294.645-.295zM3.916 8.397c-1.256-.007-2.353 1.225-2.19 2.475.104 1.16 1.223 2.142 2.397 2.023 1.062-.066 2.019-.962 2.087-2.036.093-.932-.446-1.892-1.312-2.259a2.2 2.2 0 0 0-.983-.203zm.048 1.363c.612-.028 1.104.716.807 1.266-.228.493-.94.682-1.355.313-.377-.3-.457-.923-.106-1.276a.89.89 0 0 1 .654-.303m8.05 1.467c-1.25-.023-2.353 1.178-2.224 2.422.075 1.165 1.179 2.174 2.358 2.078 1.07-.043 2.05-.936 2.13-2.016.103-.936-.434-1.905-1.301-2.278-.301-.14-.631-.214-.963-.207zm.008 1.364c.615-.037 1.115.708.821 1.26-.217.478-.906.684-1.322.344-.424-.297-.5-.976-.113-1.332a.88.88 0 0 1 .615-.272zm-6.81-2.163c-.143.417-.282.832-.434 1.245 1.92.67 3.84 1.333 5.755 2.011.153-.432.296-.863.455-1.293-1.92-.67-3.841-1.335-5.759-2.011zm.426-6.874C4.973 5.436 4.313 7.32 3.642 9.2q.648.225 1.292.458 1-2.85 2.012-5.694-.648-.224-1.29-.458z"
-            />
-          </svg>
-          {{'Draw new linestring' | translate}}
+        <span ng-switch-when="MultiLineString">${svgLine} {{'Draw new linestring' | translate}}
         </span>
-        <span ng-switch-when="Polygon">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em">
-            <path
-              d="M5.045-.029c-1.26-.008-2.35 1.23-2.184 2.48.06.632.43 1.202.936 1.576-.479 1.358-.968 2.714-1.45 4.072-1.257-.008-2.363 1.23-2.2 2.48.105 1.16 1.228 2.13 2.402 2.012a2.3 2.3 0 0 0 1.45-.67c1.273.53 2.553 1.056 3.823 1.59a2 2 0 0 0 0 .438c.074 1.165 1.176 2.17 2.355 2.074 1.07-.042 2.057-.932 2.138-2.012a2.3 2.3 0 0 0-.453-1.607q.654-.89 1.31-1.778c.186.04.369.047.562.031 1.067-.047 2.04-.935 2.122-2.012.11-.964-.464-1.959-1.373-2.31a2 2 0 0 0-.343-.108l-.125-1.857c.743-.313 1.326-1.036 1.388-1.856.11-.964-.463-1.958-1.372-2.309a2.2 2.2 0 0 0-.92-.172c-.08 0-.158-.008-.235 0-.841.098-1.565.75-1.84 1.545-1.26-.004-2.53-.009-3.791-.016C7.045.918 6.564.361 5.919.127a2.2 2.2 0 0 0-.874-.156m.047 1.357c.605-.03 1.103.704.827 1.248-.215.499-.934.71-1.358.343-.392-.299-.47-.94-.109-1.294a.87.87 0 0 1 .64-.297m8.08.063c.62-.026 1.099.719.796 1.263-.232.498-.967.692-1.373.297-.361-.308-.431-.939-.078-1.28a.9.9 0 0 1 .656-.28M7.246 2.919c1.257.005 2.517.024 3.775.032a2.33 2.33 0 0 0 1.622 1.513q.064.936.125 1.872c-.877.376-1.511 1.322-1.388 2.293.042.482.267.94.592 1.295-.416.567-.826 1.136-1.248 1.7a2 2 0 0 0-.67-.109v.016c-.632-.012-1.235.287-1.654.748-1.26-.525-2.517-1.063-3.775-1.59.005-.043.013-.083.015-.126a2.27 2.27 0 0 0-.967-2.074q.707-2.014 1.42-4.025c.052 0 .104.005.156 0 .898-.05 1.72-.7 1.997-1.545m6.38 4.602c.62-.025 1.098.72.796 1.264-.233.497-.967.691-1.373.296-.362-.308-.432-.938-.078-1.279a.9.9 0 0 1 .655-.28M2.393 9.456c.612-.028 1.109.729.811 1.28-.228.493-.942.68-1.357.311-.377-.3-.46-.926-.11-1.28a.9.9 0 0 1 .656-.311m7.66 3.432c.615-.037 1.12.711.826 1.263-.217.48-.91.684-1.326.344-.423-.297-.495-.986-.109-1.342a.86.86 0 0 1 .609-.265"
-            />
-          </svg>
-          {{'Draw new polygon' | translate}}
+        <span ng-switch-when="Polygon">${svgPolygon} {{'Draw new polygon' | translate}}
         </span>
-        <span ng-switch-when="MultiPolygon">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em">
-            <path
-              d="M5.045-.029c-1.26-.008-2.35 1.23-2.184 2.48.06.632.43 1.202.936 1.576-.479 1.358-.968 2.714-1.45 4.072-1.257-.008-2.363 1.23-2.2 2.48.105 1.16 1.228 2.13 2.402 2.012a2.3 2.3 0 0 0 1.45-.67c1.273.53 2.553 1.056 3.823 1.59a2 2 0 0 0 0 .438c.074 1.165 1.176 2.17 2.355 2.074 1.07-.042 2.057-.932 2.138-2.012a2.3 2.3 0 0 0-.453-1.607q.654-.89 1.31-1.778c.186.04.369.047.562.031 1.067-.047 2.04-.935 2.122-2.012.11-.964-.464-1.959-1.373-2.31a2 2 0 0 0-.343-.108l-.125-1.857c.743-.313 1.326-1.036 1.388-1.856.11-.964-.463-1.958-1.372-2.309a2.2 2.2 0 0 0-.92-.172c-.08 0-.158-.008-.235 0-.841.098-1.565.75-1.84 1.545-1.26-.004-2.53-.009-3.791-.016C7.045.918 6.564.361 5.919.127a2.2 2.2 0 0 0-.874-.156m.047 1.357c.605-.03 1.103.704.827 1.248-.215.499-.934.71-1.358.343-.392-.299-.47-.94-.109-1.294a.87.87 0 0 1 .64-.297m8.08.063c.62-.026 1.099.719.796 1.263-.232.498-.967.692-1.373.297-.361-.308-.431-.939-.078-1.28a.9.9 0 0 1 .656-.28M7.246 2.919c1.257.005 2.517.024 3.775.032a2.33 2.33 0 0 0 1.622 1.513q.064.936.125 1.872c-.877.376-1.511 1.322-1.388 2.293.042.482.267.94.592 1.295-.416.567-.826 1.136-1.248 1.7a2 2 0 0 0-.67-.109v.016c-.632-.012-1.235.287-1.654.748-1.26-.525-2.517-1.063-3.775-1.59.005-.043.013-.083.015-.126a2.27 2.27 0 0 0-.967-2.074q.707-2.014 1.42-4.025c.052 0 .104.005.156 0 .898-.05 1.72-.7 1.997-1.545m6.38 4.602c.62-.025 1.098.72.796 1.264-.233.497-.967.691-1.373.296-.362-.308-.432-.938-.078-1.279a.9.9 0 0 1 .655-.28M2.393 9.456c.612-.028 1.109.729.811 1.28-.228.493-.942.68-1.357.311-.377-.3-.46-.926-.11-1.28a.9.9 0 0 1 .656-.311m7.66 3.432c.615-.037 1.12.711.826 1.263-.217.48-.91.684-1.326.344-.423-.297-.495-.986-.109-1.342a.86.86 0 0 1 .609-.265"
-            />
-          </svg>
-          {{'Draw new polygon' | translate}}
+        <span ng-switch-when="MultiPolygon">${svgPolygon} {{'Draw new polygon' | translate}}
         </span>
       </span>
     </a>