[fix] Image support for inline SVG data

SVG data may contain characters that need escaping when applied as a CSS
background image.

Fix #512

src/components/Image/ImageUriCache.js

@@ -2,13 +2,15 @@
  * @flow
  */
 
+const dataUriPattern = /^data:/;
+
 export default class ImageUriCache {
   static _maximumEntries: number = 256;
   static _entries = {};
 
   static has(uri: string) {
     const entries = ImageUriCache._entries;
-    const isDataUri = /^data:/.test(uri);
+    const isDataUri = dataUriPattern.test(uri);
     return isDataUri || Boolean(entries[uri]);
   }
 

src/components/Image/index.js

@@ -45,8 +45,17 @@ const resolveAssetDimensions = source => {
   }
 };
 
+const svgDataUriPattern = /^data:image\/svg\+xml;/;
 const resolveAssetSource = source => {
-  return (typeof source === 'object' ? source.uri : source) || '';
+  const uri = typeof source === 'object' ? source.uri : source || '';
+  // SVG data may contain characters (e.g., #, ") that need to be escaped
+  if (svgDataUriPattern.test(uri)) {
+    const parts = uri.split('<svg');
+    const [prefix, ...svgFragment] = parts;
+    const svg = encodeURIComponent(`<svg${svgFragment}`);
+    return `${prefix}${svg}`;
+  }
+  return uri;
 };
 
 class Image extends Component {