Initial commit

Author: zakkor

.gitignore

@@ -0,0 +1 @@
+node_modules

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "singleQuote": true,
+  "printWidth": 120,
+  "arrowParens": "avoid",
+  "semi": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "es5"
+}

index.js

@@ -0,0 +1,43 @@
+const { getOptions } = require('loader-utils');
+const { optimize } = require('svgo');
+const svelte = require('svelte/compiler');
+
+module.exports.default = function loader(source) {
+  const { resourcePath } = this;
+  const { svgoConfig, ssr } = getOptions(this) || {};
+  const splitRegex = /(<svg.*?)(\/?>.*)/;
+  const code = source.toString();
+
+  let svg = optimizeSvg(code, resourcePath, svgoConfig);
+  // Support any custom attributes
+  const parts = splitRegex.exec(svg);
+  if (parts === null) {
+    console.error('[svelte-svg-loader] Failed to parse:', resourcePath);
+  } else {
+    const [_, head, body] = parts;
+    svg = `${head} {...$$props}${body}`;
+  }
+
+  // Compile with Svelte
+  return compileSvg(svg, resourcePath, ssr).code;
+};
+
+function compileSvg(source, filename, ssr) {
+  const {
+    js: { code, map },
+  } = svelte.compile(source, {
+    generate: ssr ? 'ssr' : 'dom',
+    // If `dev` is set to true, trying to instantiate the component from Webpack will throw a "'target' is a required option" error.
+    dev: false,
+    hydratable: true,
+  });
+  return { code, map };
+}
+
+function optimizeSvg(content, path, config = {}) {
+  const { data } = optimize(content, {
+    ...config,
+    path,
+  });
+  return data;
+}

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "svelte-svg-loader",
+  "version": "1.0.0",
+  "description": "Webpack loader to load SVG files as Svelte components",
+  "main": "index.js",
+  "author": "Metafy <[email protected]>",
+  "license": "MIT",
+  "devDependencies": {
+    "svelte": "^3.38.3"
+  },
+  "dependencies": {
+    "loader-utils": "^2.0.0",
+    "svgo": "^2.3.0"
+  }
+}