Double fill or stroke property fix

[tabun-matadorov]

Hi.
I've noticed that vue-svgicon don't work in IE11 even with polyfill. I've found out that when you using original prop, it gives double fill or stroke property in XML: one from addOriginalColor and one from addColor, and xml parser in polyfill will throw an exception about invalid XML data.

[coveralls]

Coverage remained the same at 43.75% when pulling 3a927d6 on tabun-matadorov:master into 4015e16 on MMF-FE:master.

[Allenice]

Your code will invalidate the "Overriding Original Color" feature. Please view the demo.

[Allenice]

Fixed in v2.1.1

[tabun-matadorov]

Thanks a lot, Allenice.
Just wanted to push another pull request with such code:

      path() {
        let _this = this
        
        function addOriginalColor (data) {
          let styleReg = /_fill=\"|_stroke="/gi
          return data.replace(styleReg, (styleName) => {
            return styleName && styleName.slice(1)
          })
        }

        function addColor (data) {
          let reg = /<(path|rect|circle|polygon|line|polyline|ellipse)\s[^/>]*/gi
          let i = 0
          return data.replace(reg, (match) => {
            let color = _this.colors[i++] || _this.colors[_this.colors.length - 1]
            // Use original colors
            if (_this.original && (!color || color === '_')) {
              return addOriginalColor(match);
            }
            
            let fill = _this.fill

            // if color is '_', ignore it
            if (color && color === '_') {
              return match
            }

            // if color start with 'r-', reverse the fill value
            if (color && color.indexOf('r-') === 0) {
              fill = !fill
              color = color.split('r-')[1]
            }

            let style = fill ? 'fill' : 'stroke'
            let reverseStyle = fill ? 'stroke' : 'fill'
            return match + `${style}="${color}" ${reverseStyle}="none" `
          })
        }

        let pathData = ''
        if (this.iconData) {
          pathData = this.iconData.data
          pathData = addColor(pathData);
        } else {
          // if no iconData, push to notLoadedIcons
          notLoadedIcons.push({
            name: this.iconName,
            component: this
          })
        }

        return pathData
      },

But it's already solved, so ... thanks again for a fast fixing for this issue.

[Allenice]

I think your solution is better than mine. In addition, I suggest that your regular expression is best changed to this:

/<(path|rect|circle|polygon|line|polyline|ellipse)\s[^\/>]*/gi

"/" should be escaped.