Merge pull request #88 from mother/svg-bg-fix

SVG Background Image Fixes

Author: asabhaney

package-lock.json

@@ -7,6 +7,8 @@ import OIOContext from '../../OIOProvider/context'
 import { OIOFormContext } from '..'
 import checkboxIcon from './checkboxIcon.svg'
 
+const base64EncodedCheckboxIcon = window.btoa(checkboxIcon)
+
 // ============================================================================
 // Component
 // ============================================================================
@@ -63,7 +65,7 @@ const Checkbox = React.forwardRef(({
                },
                '&:checked': {
                   backgroundColor: `${inputHighlightColor}`,
-                  backgroundImage: `url('data:image/svg+xml;utf8,${checkboxIcon}')`,
+                  backgroundImage: `url('data:image/svg+xml;base64,${base64EncodedCheckboxIcon}')`,
                   backgroundSize: '50%',
                   borderColor: inputHighlightColor
                }

src/Form/Checkbox/index.js

@@ -7,6 +7,8 @@ import OIOContext from '../../OIOProvider/context'
 import { OIOFormContext } from '..'
 import selectArrowIcon from './selectArrowIcon.svg'
 
+const base64EncodedSelectArrowIcon = window.btoa(selectArrowIcon)
+
 // ============================================================================
 // Size Specific Styles
 // ============================================================================
@@ -98,7 +100,7 @@ const Select = React.forwardRef(({
                backgroundColor: formContext.elementBackgroundColor,
                borderRadius: formContext.elementBorderRadius,
                backgroundRepeat: 'no-repeat',
-               backgroundImage: `url('data:image/svg+xml;utf8,${selectArrowIcon}')`,
+               backgroundImage: `url('data:image/svg+xml;base64,${base64EncodedSelectArrowIcon}')`,
                color: formContext.elementTextColor,
                outline: 'none',
                fontFamily: oioContext.fontFamily,