feat: add raster image support

Author: meowtec

lib/loader.js

@@ -5,11 +5,12 @@ const SVGCompiler = require('svg-baker');
 const { NAMESPACE } = require('./config');
 const configure = require('./configurator');
 const Exceptions = require('./exceptions');
+const fileTypeDetect = require('./utils/file-type-detect');
 
 let svgCompiler = new SVGCompiler();
 
 // eslint-disable-next-line consistent-return
-module.exports = function loader(content) {
+module.exports = function loader(contentBuffer) {
   if (this.cacheable) {
     this.cacheable();
   }
@@ -24,7 +25,13 @@ module.exports = function loader(content) {
   const parentCompiler = isChildCompiler ? compiler.parentCompilation.compiler : null;
   const matchedRules = getOptions(loaderContext);
 
-  if (!content.includes('<svg')) {
+  const content = contentBuffer.toString();
+  const isSVG = fileTypeDetect.isSVG(content);
+
+  if (
+    !isSVG &&
+    !fileTypeDetect.isImage(contentBuffer)
+  ) {
     throw new Exceptions.InvalidSvg(content, matchedRules);
   }
 
@@ -72,11 +79,17 @@ module.exports = function loader(content) {
       regExp: config.symbolRegExp
     });
   }
-  svgCompiler.addSymbol({ id, content, path: resourcePath + resourceQuery })
+  svgCompiler.addSymbol({
+    id,
+    content: isSVG ? content : contentBuffer,
+    path: resourcePath + resourceQuery
+  })
     .then((symbol) => {
       const runtime = runtimeGenerator({ symbol, config, context: loaderContext.context, loaderContext });
       done(null, runtime);
     }).catch(done);
 };
 
 module.exports.NAMESPACE = NAMESPACE;
+
+module.exports.raw = true;

lib/utils/file-type-detect.js

@@ -0,0 +1,27 @@
+const imageSize = require('image-size');
+
+/**
+ * detect whether content is an image
+ * @param {Buffer} content
+ * @return {boolean}
+ */
+function isImage(content) {
+  try {
+    imageSize(content);
+    return true;
+  } catch (err) {
+    return false;
+  }
+}
+
+/**
+ * detect whether content is an image
+ * @param {string} content
+ * @return {boolean}
+ */
+function isSVG(content) {
+  return content.includes('<svg');
+}
+
+exports.isImage = isImage;
+exports.isSVG = isSVG;

package.json

@@ -36,6 +36,7 @@
     "domready": "1.0.8",
     "escape-string-regexp": "1.0.5",
     "html-webpack-plugin": "^3.2.0",
+    "image-size": "^0.8.3",
     "loader-utils": "^1.1.0",
     "svg-baker": "^1.5.0",
     "svg-baker-runtime": "^1.4.7",

yarn.lock

@@ -3816,6 +3816,13 @@ image-size@^0.5.1:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
 
+image-size@^0.8.3:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.8.3.tgz#f0b568857e034f29baffd37013587f2c0cad8b46"
+  integrity sha512-SMtq1AJ+aqHB45c3FsB4ERK0UCiA2d3H1uq8s+8T0Pf8A3W4teyBQyaFaktH6xvZqh+npwlKU7i4fJo0r7TYTg==
+  dependencies:
+    queue "6.0.1"
+
 import-fresh@^3.0.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66"
@@ -6507,6 +6514,13 @@ query-string@^4.1.0, query-string@^4.3.2:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
+[email protected]:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/queue/-/queue-6.0.1.tgz#abd5a5b0376912f070a25729e0b6a7d565683791"
+  integrity sha512-AJBQabRCCNr9ANq8v77RJEv73DPbn55cdTb+Giq4X0AVnNVZvMHlYp7XlQiN+1npCZj1DuSmaA2hYVUUDgxFDg==
+  dependencies:
+    inherits "~2.0.3"
+
 quick-lru@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"