init

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitattributes

@@ -0,0 +1 @@
+* text=auto

.gitignore

@@ -0,0 +1 @@
+node_modules

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) EGOIST <0x142857@gmail.com> (https://github.com/egoist)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,75 @@
+
+# svg-to-vue-component
+
+[![NPM version](https://badgen.net/npm/v/svg-to-vue-component)](https://npmjs.com/package/svg-to-vue-component) [![NPM downloads](https://badgen.net/npm/dm/svg-to-vue-component)](https://npmjs.com/package/svg-to-vue-component) [![CircleCI](https://badgen.net/circleci/github/egoist/svg-to-vue-component/master)](https://circleci.com/gh/egoist/svg-to-vue-component/tree/master)  [![donate](https://badgen.net/badge/support%20me/donate/ff69b4)](https://patreon.com/egoist) [![chat](https://badgen.net/badge/chat%20on/discord/7289DA)](https://chat.egoist.moe)
+
+## Install
+
+```bash
+yarn add svg-to-vue-component --dev
+```
+
+## Usage
+
+### With Webpack
+
+```js
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.svg$/,
+        use: [
+          // This loader compile .svg file to .vue file
+          // So we use `vue-loader` after it
+          'vue-loader',
+          'svg-to-vue-component/loader'
+        ]
+      }
+    ]
+  },
+  // ...other configurations
+}
+```
+
+Then you can import `.svg` files directly and use them as Vue functional components:
+
+```vue
+<template>
+  <!-- Dom props and events are all available here -->
+  <CheckIcon width="20px" height="20px" @click="handleClick" />
+</template>
+
+<script>
+import CheckIcon from './check-icon.svg'
+
+export default {
+  components: {
+    CheckIcon
+  },
+
+  methods: {
+    handleClick() {
+      console.log('It works!')
+    }
+  }
+}
+</script>
+```
+
+## Contributing
+
+1. Fork it!
+2. Create your feature branch: `git checkout -b my-new-feature`
+3. Commit your changes: `git commit -am 'Add some feature'`
+4. Push to the branch: `git push origin my-new-feature`
+5. Submit a pull request :D
+
+
+## Author
+
+**svg-to-vue-component** © [EGOIST](https://github.com/egoist), Released under the [MIT](./LICENSE) License.<br>
+Authored and maintained by EGOIST with help from contributors ([list](https://github.com/egoist/svg-to-vue-component/contributors)).
+
+> [Website](https://egoist.sh) · GitHub [@EGOIST](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)

circle.yml

@@ -0,0 +1,23 @@
+version: 2
+jobs:
+  build:
+    docker:
+      - image: circleci/node:latest
+    branches:
+      ignore:
+        - gh-pages # list of branches to ignore
+        - /release\/.*/ # or ignore regexes
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "yarn.lock" }}
+      - run:
+          name: install dependences
+          command: yarn
+      - save_cache:
+          key: dependency-cache-{{ checksum "yarn.lock" }}
+          paths:
+            - ./node_modules
+      - run:
+          name: test
+          command: yarn test

example/App.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <Icon @click="handleClick" foo="bat" />
+  </div>
+</template>
+
+<script>
+import Icon from './icon.svg'
+
+export default {
+  components: {
+    Icon
+  },
+  methods: {
+    handleClick() {
+      alert(new Date())
+    }
+  }
+}
+</script>

example/index.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+// eslint-disable-next-line no-new
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})

example/poi.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  entry: './example/index.js',
+  outDir: './example/dist',
+  chainWebpack(config) {
+    config.module.rules.delete('svg')
+    config.module.rule('svg')
+      .test(/\.svg$/)
+      .use('vue')
+      .loader('vue-loader')
+      .end()
+      .use('sfc')
+      .loader(require.resolve('../loader'))
+  }
+}

index.js

@@ -0,0 +1,41 @@
+const posthtml = require('posthtml')
+
+const plugin = tree => {
+  tree.match({ tag: 'svg' }, node => {
+    // Remove unnecessary attrs on SVG tag
+
+    const attrs = {}
+    for (const name of Object.keys(node.attrs)) {
+      if (name !== 'version' && name !== 'xmlns' && !name.startsWith('xmlns:')) {
+        attrs[name] = node.attrs[name]
+      }
+      delete node.attrs[name]
+    }
+
+    // Adding v-bind
+    node.attrs['v-bind'] = `Object.assign(${JSON.stringify(attrs)},data.attrs)`
+
+    // Adding v-on
+    node.attrs['v-on'] = 'data.on'
+
+    return node
+  })
+}
+
+const createComponent = svg => {
+  return `<template functional>${svg}</template>`
+}
+
+module.exports = (input, { sync } = {}) => {
+  const stream = posthtml([
+    plugin
+  ]).process(input, { sync })
+
+  if (stream.then) {
+    return stream.then(res => ({
+      component: createComponent(res.html)
+    }))
+  }
+
+  return { component: createComponent(stream.html) }
+}

loader.js

@@ -0,0 +1,13 @@
+const toSFC = require('.')
+
+module.exports = async function (source) {
+  this.cacheable()
+  const cb = this.async()
+
+  try {
+    const { component } = await toSFC(source)
+    cb(null, component)
+  } catch (err) {
+    cb(err)
+  }
+}

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "svg-to-vue-component",
+  "version": "0.0.0",
+  "description": "Compile SVG files to Vue SFC.",
+  "repository": {
+    "url": "egoist/svg-to-vue-component",
+    "type": "git"
+  },
+  "main": "index.js",
+  "files": [
+    "index.js",
+    "loader.js"
+  ],
+  "scripts": {
+    "test": "npm run lint && ava",
+    "lint": "xo",
+    "example": "poi dev --config example/poi.config.js"
+  },
+  "author": "egoist <0x142857@gmail.com>",
+  "license": "MIT",
+  "jest": {
+    "testEnvironment": "node"
+  },
+  "dependencies": {
+    "posthtml": "^0.11.3"
+  },
+  "devDependencies": {
+    "ava": "^0.25.0",
+    "eslint-config-rem": "^3.0.0",
+    "vue": "^2.5.17",
+    "vue-template-compiler": "^2.5.17",
+    "xo": "^0.18.0"
+  },
+  "xo": {
+    "extends": "rem"
+  }
+}

test/index.test.js

@@ -0,0 +1,32 @@
+const test = require('ava')
+const toSFC = require('../')
+
+test('main', t => {
+  const sfc = toSFC(
+    `
+ <?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="1px" viewBox="0 0 48 1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Rectangle 5 可以</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="19-Separator" transform="translate(-129.000000, -156.000000)" fill="#063855">
+            <g id="Controls/Settings" transform="translate(80.000000, 0.000000)">
+                <g id="Content" transform="translate(0.000000, 64.000000)">
+                    <g id="Group" transform="translate(24.000000, 56.000000)">
+                        <g id="Group-2">
+                            <rect id="Rectangle-5" x="25" y="36" width="48" height="1"></rect>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
+ `,
+    { sync: true }
+  )
+
+  t.snapshot(sfc)
+})

test/snapshots/index.test.js.md

@@ -0,0 +1,34 @@
+# Snapshot report for `test/index.test.js`
+
+The actual snapshot is saved in `index.test.js.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## main
+
+> Snapshot 1
+
+    {
+      component: `<template functional>␊
+       ␊
+      <svg v-bind="Object.assign({&quot;width&quot;:&quot;48px&quot;,&quot;height&quot;:&quot;1px&quot;,&quot;viewBox&quot;:&quot;0 0 48 1&quot;},data.attrs)" v-on="data.on">␊
+          <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->␊
+          <title>Rectangle 5 可以</title>␊
+          <desc>Created with Sketch.</desc>␊
+          <defs></defs>␊
+          <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">␊
+              <g id="19-Separator" transform="translate(-129.000000, -156.000000)" fill="#063855">␊
+                  <g id="Controls/Settings" transform="translate(80.000000, 0.000000)">␊
+                      <g id="Content" transform="translate(0.000000, 64.000000)">␊
+                          <g id="Group" transform="translate(24.000000, 56.000000)">␊
+                              <g id="Group-2">␊
+                                  <rect id="Rectangle-5" x="25" y="36" width="48" height="1"></rect>␊
+                              </g>␊
+                          </g>␊
+                      </g>␊
+                  </g>␊
+              </g>␊
+          </g>␊
+      </svg>␊
+       </template>`,
+    }