feature(image) add inline SVG files

packages/image/README.md

@@ -11,7 +11,7 @@
 
 🍣 A Rollup plugin which imports JPG, PNG, GIF, SVG, and WebP files.
 
-Images are encoded using base64, which means they will be 33% larger than the size on disk. You should therefore only use this for small images where the convenience of having them available on startup (e.g. rendering immediately to a canvas without co-ordinating asynchronous loading of several images) outweighs the cost.
+In case you are not using inline SVG, images are encoded using base64, which means they will be 33% larger than the size on disk. You should therefore only use this for small images where the convenience of having them available on startup (e.g. rendering immediately to a canvas without co-ordinating asynchronous loading of several images) outweighs the cost.
 
 ## Requirements
 
@@ -70,6 +70,28 @@ import logo from './rollup.png';
 document.body.appendChild(logo);
 ```
 
+### `inline`
+
+Type: `Boolean`<br>
+Default: `false`
+
+Depending on `dom` option, the plugin exports DOM `svg` node or svg content as string without encoding. Affects only SVG files.
+
+If both `dom` and `inline` are `true`, the export can be used as such:
+
+```js
+import logo from './rollup.svg';
+document.body.appendChild(logo);
+logo.setAttribute('fill', 'red');
+```
+
+And string is exported using `inline` without `dom` option:
+
+```js
+import logo from './rollup.svg';
+document.body.innerHTML += logo;
+```
+
 ### `exclude`
 
 Type: `String` | `Array[...String]`<br>

packages/image/src/index.js

@@ -6,7 +6,8 @@ import { createFilter } from '@rollup/pluginutils';
 const defaults = {
   dom: false,
   exclude: null,
-  include: null
+  include: null,
+  inline: false
 };
 
 const mimeTypes = {
@@ -36,12 +37,21 @@ export default function image(opts = {}) {
         return null;
       }
 
-      const format = mime === mimeTypes['.svg'] ? 'utf-8' : 'base64';
+      const isSVG = mime === mimeTypes['.svg'];
+      const format = isSVG ? 'utf-8' : 'base64';
       const source = readFileSync(id, format).replace(/[\r\n]+/gm, '');
-      const data = `'data:${mime};${format},${source}'`;
-      const code = options.dom
-        ? `var img = new Image(); img.src = ${data}; export default img;`
-        : `const img = ${data}; export default img;`;
+      let code;
+      if (isSVG && options.inline) {
+        const svg = JSON.stringify(source);
+        code = options.dom
+          ? `const svg = (new DOMParser().parseFromString(${svg}, 'image/svg+xml')).firstChild; export default svg;`
+          : `const svg = ${svg}; export default svg;`;
+      } else {
+        const data = `'data:${mime};${format},${source}'`;
+        code = options.dom
+          ? `const img = new Image(); img.src = ${data}; export default img;`
+          : `const img = ${data}; export default img;`;
+      }
 
       return code;
     }

packages/image/test/fixtures/dom.js

@@ -1,3 +1,4 @@
 /* eslint-disable */
 import logo from './rollup.jpg';
+
 document.body.appendChild( logo );

packages/image/test/test.js

@@ -41,3 +41,21 @@ test('imports an svg without encoding', async (t) => {
 
   t.snapshot(await getCode(bundle));
 });
+
+test('imports an svg and inline to string', async (t) => {
+  const bundle = await rollup.rollup({
+    input: 'fixtures/svg.js',
+    plugins: [image({ inline: true })]
+  });
+
+  t.snapshot(await getCode(bundle));
+});
+
+test('imports an svg and inline to dom', async (t) => {
+  const bundle = await rollup.rollup({
+    input: 'fixtures/svg.js',
+    plugins: [image({ dom: true, inline: true })]
+  });
+
+  t.snapshot(await getCode(bundle));
+});