Use SVG in the DOM instead of as background image

We now insert SVG nodes directly into the DOM for displaying all icons and buttons instead of using data URLs in the CSS file. This enables us to restyle them more easily, e.g. for dark mode or high-contrast mode. Also reduces the size of some of the SVG icons significantly and changes the Mapbox logo to a version that is aligned better to the pixel grid on low-res devices.

build/loader.js

@@ -10,5 +10,8 @@ function loadFile(module, filename) {
     module._compile(`module.exports = ${JSON.stringify(content)};`, filename);
 }
 
+// $FlowFixMe: Flow doesn't know about require.extensions
+require.extensions['.svg'] = loadFile;
+
 // $FlowFixMe: Flow doesn't know about require.extensions
 require.extensions['.glsl'] = loadFile;

build/rollup_plugins.js

@@ -1,13 +1,15 @@
 
+/* eslint-disable flowtype/require-valid-file-annotation */
 import flowRemoveTypes from '@mapbox/flow-remove-types';
 import buble from 'rollup-plugin-buble';
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import unassert from 'rollup-plugin-unassert';
 import json from 'rollup-plugin-json';
-import { terser } from 'rollup-plugin-terser';
+import svgo from 'rollup-plugin-svgo';
+import {terser} from 'rollup-plugin-terser';
 import minifyStyleSpec from './rollup_plugin_minify_style_spec';
-import { createFilter } from 'rollup-pluginutils';
+import {createFilter} from 'rollup-pluginutils';
 
 // Common set of plugins/transformations shared across different rollup
 // builds (main mapboxgl bundle, style-spec package, benchmarks bundle)
@@ -17,6 +19,15 @@ export const plugins = (minified, production) => [
     minifyStyleSpec(),
     json(),
     glsl('./src/shaders/*.glsl', production),
+    svgo({
+        plugins: [{
+            removeViewBox: false
+        }, {
+            removeDimensions: false
+        }, {
+            cleanupIDs: false
+        }]
+    }),
     buble({transforms: {dangerousForOf: true}, objectAssign: "Object.assign"}),
     minified ? terser() : false,
     production ? unassert() : false,

debug/debug.html

@@ -52,6 +52,7 @@
     }
 }));
 map.addControl(new mapboxgl.ScaleControl());
+map.addControl(new mapboxgl.FullscreenControl());
 
 map.on('load', function() {
     map.addSource('geojson', {

package.json

@@ -44,6 +44,7 @@
     "@mapbox/mapbox-gl-test-suite": "file:test/integration",
     "@octokit/rest": "^16.30.1",
     "address": "^1.1.2",
+    "autoprefixer": "^9.6.5",
     "babel-eslint": "^10.0.1",
     "benchmark": "^2.1.4",
     "browserify": "^16.2.3",
@@ -73,7 +74,7 @@
     "pirates": "^4.0.1",
     "pngjs": "^3.4.0",
     "postcss-cli": "^6.1.2",
-    "postcss-inline-svg": "^3.1.1",
+    "postcss-nested": "^4.1.2",
     "pretty-bytes": "^5.1.0",
     "puppeteer": "^1.18.0",
     "qrcode-terminal": "^0.12.0",
@@ -87,6 +88,7 @@
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-sourcemaps": "^0.4.2",
+    "rollup-plugin-svgo": "^1.1.0",
     "rollup-plugin-terser": "^5.1.2",
     "rollup-plugin-unassert": "^0.3.0",
     "sinon": "^7.3.2",
@@ -131,8 +133,8 @@
     "test-suite-clean": "find test/integration/{render,query, expressions}-tests -mindepth 2 -type d -exec test -e \"{}/actual.png\" \\; -not \\( -exec test -e \"{}/style.json\" \\; \\) -print | xargs -t rm -r",
     "test-unit": "build/run-tap --reporter classic --no-coverage test/unit",
     "test-build": "build/run-tap --no-coverage test/build/**/*.test.js",
-    "test-render": "node --max-old-space-size=2048 test/render.test.js",
-    "test-query-node": "node test/query.test.js",
+    "test-render": "build/run-node --max-old-space-size=2048 test/render.test.js",
+    "test-query-node": "build/run-node test/query.test.js",
     "watch-query": "testem -f test/integration/testem.js",
     "test-query": "testem ci -f test/integration/testem.js -R xunit > test/integration/query-tests/test-results.xml",
     "test-expressions": "build/run-node test/expression.test.js",

postcss.config.js

@@ -1,6 +1,11 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+/* eslint-disable import/no-commonjs */
 module.exports = {
     plugins: [
-        require('postcss-inline-svg'),
-        require('cssnano')
+        require('cssnano'),
+        require('autoprefixer')({
+            overrideBrowserslist: [ 'defaults', 'IE 11' ]
+        }),
+        require('postcss-nested')
     ]
-}
+};

rollup.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
 import fs from 'fs';
 import sourcemaps from 'rollup-plugin-sourcemaps';
 import {plugins} from './build/rollup_plugins';