feat: add raster image support

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

@@ -35,6 +35,7 @@
     "deepmerge": "1.3.2",
     "domready": "1.0.8",
     "escape-string-regexp": "1.0.5",
+    "image-size": "^0.5.5",
     "loader-utils": "^1.1.0",
     "svg-baker": "^1.5.0",
     "svg-baker-runtime": "^1.4.7",