Inline SVG images for easier bundler setup

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Fix syntax label from "Javascript" to "JavaScript".
 - Fix typing errors for emitter.
+- Inline SVG images for easier bundler setup.
 
 # v2.0.0-beta.0
 

packages/quill/babel.config.js

@@ -2,5 +2,8 @@ const pkg = require('./package.json');
 
 module.exports = {
   presets: ['@babel/preset-env', '@babel/preset-typescript'],
-  plugins: [['transform-define', { QUILL_VERSION: pkg.version }]],
+  plugins: [
+    ['transform-define', { QUILL_VERSION: pkg.version }],
+    './scripts/babel-svg-inline-import',
+  ],
 };

packages/quill/package.json

@@ -42,6 +42,7 @@
     "style-loader": "^3.3.3",
     "stylus": "^0.62.0",
     "stylus-loader": "^7.1.3",
+    "svgo": "^3.2.0",
     "terser-webpack-plugin": "^5.3.9",
     "transpile-webpack-plugin": "^1.1.3",
     "ts-loader": "^9.5.1",

packages/quill/scripts/babel-svg-inline-import.js

@@ -0,0 +1,43 @@
+const fs = require('fs');
+const { dirname, resolve } = require('path');
+const { optimize } = require('svgo');
+
+module.exports = ({ types: t }) => {
+  class BabelSVGInlineImport {
+    constructor() {
+      return {
+        visitor: {
+          ImportDeclaration: {
+            exit(path, state) {
+              const givenPath = path.node.source.value;
+              if (!givenPath.endsWith('.svg')) {
+                return;
+              }
+              const specifier = path.node.specifiers[0];
+              const id = specifier.local.name;
+              const reference = state && state.file && state.file.opts.filename;
+              const absolutePath = resolve(dirname(reference), givenPath);
+              const content = optimize(
+                fs.readFileSync(absolutePath).toString(),
+              ).data;
+
+              const variableValue = t.stringLiteral(content);
+              const variable = t.variableDeclarator(
+                t.identifier(id),
+                variableValue,
+              );
+
+              path.replaceWith({
+                type: 'VariableDeclaration',
+                kind: 'const',
+                declarations: [variable],
+              });
+            },
+          },
+        },
+      };
+    }
+  }
+
+  return new BabelSVGInlineImport();
+};