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

SVG Background Image Fixes
mother · May 18, 2021 · 7eca82e · 7eca82e
2 parents 31f105e + c586a28
commit 7eca82e
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 29 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Form/Checkbox/index.js b/src/Form/Checkbox/index.js
@@ -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
                }

diff --git a/src/Form/Select/index.js b/src/Form/Select/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,