fix SVG class interpolation regression (fix #2035)

Author: yyx990803

src/directive.js

@@ -7,7 +7,8 @@ import {
   getBindAttr,
   camelize,
   nextTick,
-  warn
+  warn,
+  setClass
 } from './util/index'
 import Watcher from './watcher'
 import { removeTags } from './parsers/text'
@@ -88,9 +89,10 @@ Directive.prototype._bind = function () {
     } else {
       // for class interpolations, only remove the parts that
       // need to be interpolated.
-      this.el.className = removeTags(this.el.className)
-        .trim()
-        .replace(/\s+/g, ' ')
+      setClass(
+        this.el,
+        removeTags(this.el.getAttribute('class')).trim().replace(/\s+/g, ' ')
+      )
     }
   }
 

src/util/dom.js

@@ -188,7 +188,7 @@ export function off (el, event, cb) {
  * @param {String} cls
  */
 
-function setClass (el, cls) {
+export function setClass (el, cls) {
   /* istanbul ignore if */
   if (isIE9 && !(el instanceof SVGElement)) {
     el.className = cls

test/unit/specs/misc_spec.js

@@ -401,4 +401,19 @@ describe('Misc', function () {
     })
     expect(vm.$el.firstChild.className).toBe('outer inner')
   })
+
+  it('SVG class interpolation', function () {
+    var vm = new Vue({
+      el: document.createElement('div'),
+      template: '<icon class="abc" icon="def"></icon>',
+      components: {
+        icon: {
+          props: ['class', 'icon'],
+          replace: true,
+          template: '<svg class="si-icon {{icon}} {{class}}"><use xlink:href=""></use></svg>'
+        }
+      }
+    })
+    expect(vm.$el.firstChild.getAttribute('class')).toBe('si-icon abc def')
+  })
 })