Add 'image' tag of SVG to 'transformToRequire` option as default (#579)

* add dev dependency module

* add 'image' tag to 'transformToRequire' option as default

Closes #569

* update doc

* add fixture

Author: kazupon

docs/en/options.md

@@ -108,9 +108,9 @@ module.exports = {
 ### transformToRequire
 
 - type: `{ [tag: string]: string | Array<string> }`
-- default: `{ img: 'src' }`
+- default: `{ img: 'src', image: 'xlink:href' }`
 
-  During template compilation, the compiler can transform certain attributes, such as `src` URLs, into `require` calls, so that the target asset can be handled by Webpack. The default config transforms the `src` attribute on `<img>` tags.
+  During template compilation, the compiler can transform certain attributes, such as `src` URLs, into `require` calls, so that the target asset can be handled by Webpack. The default config transforms the `src` attribute on `<img>` tags and `xlink:href` attribute on `<image>` tags of SVG.
 
 ### buble
 

lib/template-compiler.js

@@ -7,7 +7,8 @@ var hotReloadAPIPath = normalize.dep('vue-hot-reload-api')
 
 // vue compiler module for using transforming `<tag>:<attribute>` to `require`
 var defaultTransformToRequire = {
-  img: 'src'
+  img: 'src',
+  image: 'xlink:href'
 }
 var transformToRequire = defaultTransformToRequire
 var defaultCompileOptions = {

package.json

@@ -72,6 +72,7 @@
     "stylus": "^0.54.5",
     "stylus-loader": "^2.0.0",
     "sugarss": "^0.2.0",
+    "url-loader": "^0.5.7",
     "vue": "^2.1.0",
     "vue-template-compiler": "^2.1.0",
     "webpack": "^2.1.0-beta.27"

test/fixtures/transform.vue

@@ -0,0 +1,12 @@
+<template>
+<div>
+  <img src="./logo.png">
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
+    <image xlink:href="./logo.png" />
+  </svg>
+</div>
+</template>
+
+<style>
+html { background-image: url(./logo.png); }
+</style>

test/test.js

@@ -330,6 +330,34 @@ describe('vue-loader', function () {
     })
   })
 
+  it('transformToRequire option', function (done) {
+    test({
+      entry: './test/fixtures/transform.vue',
+      module: {
+        rules: [
+          { test: /\.vue$/, loader: loaderPath },
+          {
+            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+            loader: 'url-loader'
+          }
+        ]
+      }
+    }, function (window, module) {
+      function includeDataURL (s) {
+        return !!s.match(/\s*data:([a-z]+\/[a-z]+(;[a-z\-]+\=[a-z\-]+)?)?(;base64)?,[a-z0-9\!\$\&\'\,\(\)\*\+\,\;\=\-\.\_\~\:\@\/\?\%\s]*\s*/i)
+      }
+      var vnode = mockRender(module)
+      // img tag
+      expect(includeDataURL(vnode.children[0].data.attrs.src)).to.equal(true)
+      // image tag (SVG)
+      expect(includeDataURL(vnode.children[2].children[0].data.attrs['xlink:href'])).to.equal(true)
+      var style = window.document.querySelector('style').textContent
+      // style
+      expect(includeDataURL(style)).to.equal(true)
+      done()
+    })
+  })
+
   it('postcss options', function (done) {
     test({
       entry: './test/fixtures/postcss.vue',