Remove SVG build-time modifications

camptocamp · Aug 28, 2024 · d77c26c · d77c26c
1 parent 8a91bb7
commit d77c26c
Show file tree

Hide file tree

Showing 31 changed files with 1,090 additions and 350 deletions.
diff --git a/buildtools/svg-viewbox-loader.js → buildtools/svg-viewbox-cmd.js b/buildtools/svg-viewbox-loader.js → buildtools/svg-viewbox-cmd.js
@@ -20,24 +20,21 @@
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 /**
- * Webpack loader to be used after `svg-inline-loader`.
- *
  * It will:
  *  - Fill the `viewBox` if it's missing (to be able to change the `width` and the `height`).
  *  - Fill the `width` and `height` (required by OpenLayers).
  *  - Allows to change the `width` and `height` (with `width` or `height` arguments).
  *  - Remove the unneeded `x` and `y` property.
- *
- * See also the `svg` example.
  */
 
 const simpleHTMLTokenizer = require('simple-html-tokenizer');
 const querystring = require('querystring');
 const generate = require('./generate-xml-from-tokens.js');
 const parseUnit = require('parse-absolute-css-unit');
+const {program} = require('commander');
+const fs = require('fs');
 
-module.exports = function (source) {
-  this.cacheable(true);
+function process(source, resourceQuery) {
   let tokens = simpleHTMLTokenizer.tokenize(source);
 
   tokens = tokens.map((tag) => {
@@ -86,9 +83,7 @@ module.exports = function (source) {
         if (viewBox === undefined) {
           tag.attributes.push(['viewBox', `0 0 ${width} ${height}`, true]);
         }
-        const queryString = this.resourceQuery.startsWith('?')
-          ? this.resourceQuery.substring(1)
-          : this.resourceQuery;
+        const queryString = resourceQuery.startsWith('?') ? resourceQuery.substring(1) : resourceQuery;
         const query = querystring.decode(queryString);
         if (query.width !== undefined) {
           const parsed = query.width.match(/^([0-9]+)([a-z]*)$/);
@@ -108,4 +103,20 @@ module.exports = function (source) {
   });
 
   return generate(tokens);
-};
+}
+
+function main(args) {
+  const uri = args[0];
+  const resourceQuery = args[1];
+  const source = fs.readFileSync(uri, 'utf-8');
+  const result = process(source, resourceQuery);
+  fs.writeFileSync(uri, result, 'utf-8');
+}
+
+// If running this module directly then call the main function.
+if (require.main === module) {
+  program.parse(process.argv);
+  main(program.args);
+}
+
+module.exports = main;
diff --git a/buildtools/webpack.dev.js b/buildtools/webpack.dev.js
@@ -38,44 +38,15 @@ const resourcesRule = {
 
 const svgRule = {
   test: /\.svg$/,
-  oneOf: [
-    {
-      resourceQuery: /url/,
-      use: [
-        {
-          loader: 'file-loader',
-          options: {
-            esModule: false,
-            name: '[name].[ext]',
-          },
-        },
-        'svgo-loader',
-      ],
-    },
-    {
-      resourceQuery: /viewbox/,
-      use: [
-        {
-          loader: 'svg-inline-loader',
-          options: {
-            removeSVGTagAttrs: false,
-          },
-        },
-        './buildtools/svg-viewbox-loader',
-        'svgo-loader',
-      ],
-    },
+  use: [
     {
-      use: [
-        {
-          loader: 'svg-inline-loader',
-          options: {
-            removeSVGTagAttrs: false,
-          },
-        },
-        'svgo-loader',
-      ],
+      loader: 'file-loader',
+      options: {
+        esModule: false,
+        name: '[name].[ext]',
+      },
     },
+    'svgo-loader',
   ],
 };
 

diff --git a/buildtools/webpack.prod.js b/buildtools/webpack.prod.js
@@ -37,44 +37,15 @@ const resourcesRule = {
 
 const svgRule = {
   test: /\.svg$/,
-  oneOf: [
-    {
-      resourceQuery: /url/,
-      use: [
-        {
-          loader: 'file-loader',
-          options: {
-            esModule: false,
-            name: '[name].[hash:6].[ext]',
-          },
-        },
-        'svgo-loader',
-      ],
-    },
-    {
-      resourceQuery: /viewbox/,
-      use: [
-        {
-          loader: 'svg-inline-loader',
-          options: {
-            removeSVGTagAttrs: false,
-          },
-        },
-        './buildtools/svg-viewbox-loader',
-        'svgo-loader',
-      ],
-    },
+  use: [
     {
-      use: [
-        {
-          loader: 'svg-inline-loader',
-          options: {
-            removeSVGTagAttrs: false,
-          },
-        },
-        'svgo-loader',
-      ],
+      loader: 'file-loader',
+      options: {
+        esModule: false,
+        name: '[name].[hash:6].[ext]',
+      },
     },
+    'svgo-loader',
   ],
 };
 

diff --git a/contribs/gmf/apps/desktop/index.html.ejs b/contribs/gmf/apps/desktop/index.html.ejs
@@ -13,9 +13,7 @@
   </head>
   <body ng-class="{'gmf-profile-chart-active': !!profileChartActive, 'gmf-query-grid-active': !!mainCtrl.queryGridActive}" ng-keydown="mainCtrl.onKeydown($event)" tabindex="0">
     <div ng-show="mainCtrl.loading" class="loading-mask">
-      <i class="fa custom-spinner-loading fa-spin spinner-loading-mask">
-        <%=require('gmf/icons/spinner.svg?viewbox&height=1em')%>
-      </i>
+      <i class="fa custom-spinner-loading fa-spin spinner-loading-mask"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em"><circle cx="256" cy="48" r="48" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="109.17" cy="108.313" r="43" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="46.537" cy="257.328" r="38" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="108.028" cy="403.972" r="33" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="255.794" cy="463.935" r="28" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="402.894" cy="402.936" r="23" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="463.623" cy="256.106" r="18" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/></svg></i>
     </div>
     <gmf-header gmf-header-template-url="desktop/header.html"></gmf-header>
     <main>

diff --git a/contribs/gmf/apps/desktop_alt/index.html.ejs b/contribs/gmf/apps/desktop_alt/index.html.ejs
@@ -13,9 +13,7 @@
   </head>
   <body ng-keydown="mainCtrl.onKeydown($event)" tabindex="0">
   <div ng-show="mainCtrl.loading" class="loading-mask">
-    <i class="fa custom-spinner-loading fa-spin spinner-loading-mask">
-      <%=require('gmf/icons/spinner.svg?viewbox&height=1em')%>
-    </i>
+    <i class="fa custom-spinner-loading fa-spin spinner-loading-mask"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em"><circle cx="256" cy="48" r="48" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="109.17" cy="108.313" r="43" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="46.537" cy="257.328" r="38" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="108.028" cy="403.972" r="33" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="255.794" cy="463.935" r="28" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="402.894" cy="402.936" r="23" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="463.623" cy="256.106" r="18" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/></svg></i>
   </div>
     <gmf-desktop-canvas>
       <div slot="header" class="logo">

diff --git a/contribs/gmf/apps/iframe_api/index.html.ejs b/contribs/gmf/apps/iframe_api/index.html.ejs
@@ -13,9 +13,7 @@
   </head>
   <body>
     <div ng-show="mainCtrl.loading" class="loading-mask">
-      <i class="fa custom-spinner-loading fa-spin spinner-loading-mask">
-        <%=require('gmf/icons/spinner.svg?viewbox&height=1em')%>
-      </i>
+      <i class="fa custom-spinner-loading fa-spin spinner-loading-mask"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em"><circle cx="256" cy="48" r="48" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="109.17" cy="108.313" r="43" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="46.537" cy="257.328" r="38" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="108.028" cy="403.972" r="33" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="255.794" cy="463.935" r="28" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="402.894" cy="402.936" r="23" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="463.623" cy="256.106" r="18" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/></svg></i>
     </div>
     <main>
       <div class="gmf-app-map-container" ng-class="{'gmf-app-infobar-active': mainCtrl.options.showInfobar}">

diff --git a/contribs/gmf/apps/mobile/index.html.ejs b/contribs/gmf/apps/mobile/index.html.ejs
@@ -18,9 +18,7 @@
                    'gmf-mobile-nav-left-is-visible': mainCtrl.leftNavVisible,
                    'gmf-mobile-nav-right-is-visible': mainCtrl.rightNavVisible}">
     <div ng-show="mainCtrl.loading" class="loading-mask">
-      <i class="fa custom-spinner-loading fa-spin spinner-loading-mask">
-        <%=require('gmf/icons/spinner.svg?viewbox&height=1em')%>
-      </i>
+      <i class="fa custom-spinner-loading fa-spin spinner-loading-mask"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em"><circle cx="256" cy="48" r="48" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="109.17" cy="108.313" r="43" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="46.537" cy="257.328" r="38" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="108.028" cy="403.972" r="33" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="255.794" cy="463.935" r="28" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="402.894" cy="402.936" r="23" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="463.623" cy="256.106" r="18" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/></svg></i>
     </div>
     <main ng-class="{'gmf-search-is-active': mainCtrl.searchOverlayVisible}">
       <gmf-map
@@ -56,9 +54,7 @@
         gmf-mobile-measurepoint-map="::mainCtrl.map">
       </div>
       <button class="gmf-mobile-nav-trigger gmf-mobile-nav-left-trigger"
-        ng-click="mainCtrl.toggleLeftNavVisibility()">
-        <%=require('gmf/icons/layers.svg')%>
-      </button>
+        ng-click="mainCtrl.toggleLeftNavVisibility()"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M19.984 6.256 10 1.264.016 6.256 10 11.248zM10 2.921l6.67 3.335L10 9.591 3.33 6.256zM17.984 9l2 .999L10 14.992.016 10l2-1L10 12.992Zm0 3.743 2 1L10 18.736.016 13.744l2-1L10 16.736Z"/></svg></button>
       <gmf-search gmf-search-map="::mainCtrl.map"
         gmf-search-listeners="::mainCtrl.searchListeners">
       </gmf-search>

diff --git a/contribs/gmf/apps/mobile_alt/index.html.ejs b/contribs/gmf/apps/mobile_alt/index.html.ejs
@@ -18,9 +18,7 @@
                    'gmf-mobile-nav-left-is-visible': mainCtrl.leftNavVisible,
                    'gmf-mobile-nav-right-is-visible': mainCtrl.rightNavVisible}">
     <div ng-show="mainCtrl.loading" class="loading-mask">
-      <i class="fa custom-spinner-loading fa-spin spinner-loading-mask">
-        <%=require('gmf/icons/spinner.svg?viewbox&height=1em')%>
-      </i>
+      <i class="fa custom-spinner-loading fa-spin spinner-loading-mask"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em"><circle cx="256" cy="48" r="48" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="109.17" cy="108.313" r="43" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="46.537" cy="257.328" r="38" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="108.028" cy="403.972" r="33" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="255.794" cy="463.935" r="28" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="402.894" cy="402.936" r="23" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle cx="463.623" cy="256.106" r="18" style="opacity:1;fill-opacity:1;stroke:#000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/></svg></i>
     </div>
     <main ng-class="{'gmf-search-is-active': mainCtrl.searchOverlayVisible}">
       <gmf-map
@@ -50,9 +48,7 @@
         gmf-mobile-measurepoint-map="::mainCtrl.map">
       </div>
       <button class="gmf-mobile-nav-trigger gmf-mobile-nav-left-trigger"
-        ng-click="mainCtrl.toggleLeftNavVisibility()">
-        <%=require('gmf/icons/layers.svg')%>
-      </button>
+        ng-click="mainCtrl.toggleLeftNavVisibility()"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M19.984 6.256 10 1.264.016 6.256 10 11.248zM10 2.921l6.67 3.335L10 9.591 3.33 6.256zM17.984 9l2 .999L10 14.992.016 10l2-1L10 12.992Zm0 3.743 2 1L10 18.736.016 13.744l2-1L10 16.736Z"/></svg></button>
       <gmf-search gmf-search-map="::mainCtrl.map"
         gmf-search-listeners="::mainCtrl.searchListeners">
       </gmf-search>

diff --git a/examples/svg.html b/examples/svg.html
diff --git a/examples/svg.js b/examples/svg.js