fix(svg-icon): Handle DOMParser parsererrors (#1663)

This checks for `parsererror`s in the DOMParser's returned document,
to prevent re-use of the previous image and avoid displaying an error
document in the SVG icon slot.

Change-Type: patch
Changelog-Entry: Avoid "broken" icon when selecting a zip image archive with invalid SVG.
This commit is contained in:
Jonas Hermsmeier 2017-08-07 16:29:30 +02:00 committed by Juan Cruz Viotti
parent b5b98cf392
commit a2f1ddddb5
2 changed files with 17 additions and 4 deletions

View File

@ -35,6 +35,8 @@ const angularSVGIcon = angular.module(MODULE_NAME, [])
const DEFAULT_SIZE = '40px'
const domParser = new window.DOMParser()
/**
* @summary SVG element that takes both filepaths and file contents
* @type {Object}
@ -65,11 +67,11 @@ class SVGIcon extends react.Component {
const width = this.props.width || DEFAULT_SIZE
const height = this.props.height || DEFAULT_SIZE
const parser = new window.DOMParser()
const doc = parser.parseFromString(contents, 'image/svg+xml')
const doc = domParser.parseFromString(contents, 'image/svg+xml')
const parserError = doc.querySelector('parsererror')
const svg = doc.querySelector('svg')
const svgData = `data:image/svg+xml,${encodeURIComponent(svg.outerHTML)}`
const svgXml = svg && _.isNil(parserError) ? svg.outerHTML : ''
const svgData = `data:image/svg+xml,${encodeURIComponent(svgXml)}`
return react.createElement('img', {
className: 'svg-icon',

View File

@ -72,6 +72,17 @@ describe('Browser: SVGIcon', function () {
m.chai.expect(element.children().attr('src')).to.equal(imgData)
})
it('should use an empty src if there is a parsererror', function () {
// The following is invalid, because there's no closing tag for `foreignObject`
const iconContents = '<svg><foreignObject></svg>'
const imgData = `data:image/svg+xml,`
$rootScope.iconContents = iconContents
const element = $compile('<svg-icon path="iconContents">Resin.io</svg-icon>')($rootScope)
$rootScope.$digest()
m.chai.expect(element.children().attr('src')).to.equal(imgData)
})
it('should default the size to 40x40 pixels', function () {
const icon = '../../../lib/gui/assets/etcher.svg'
const element = $compile(`<svg-icon path="'${icon}'">Resin.io</svg-icon>`)($rootScope)