diff --git a/index.js b/index.js
index 7b5bcbb..ddbc94e 100644
--- a/index.js
+++ b/index.js
@@ -1,61 +1,9 @@
const path = require('path')
const posthtml = require('posthtml')
-const REGISTER_STYLE_COMPONENT = path.join(
- __dirname,
- './lib/registerStyleComponent.js'
-)
+const STYLE_COMPONENT = path.join(__dirname, './lib/StyleComponent.js')
const plugin = state => tree => {
- tree.match({ tag: 'svg' }, node => {
- const attrs = {}
-
- node.attrs = node.attrs || {}
- for (const name of Object.keys(node.attrs)) {
- // Don't add unnecessary attrs
- if (
- name !== 'version' &&
- name !== 'xmlns' &&
- !name.startsWith('xmlns:')
- ) {
- attrs[name] = node.attrs[name]
- }
- delete node.attrs[name]
- }
-
- // Adding v-bind
- const existingClass = attrs.class
- const existingStyle = attrs.style
- delete attrs.class
- delete attrs.style
-
- // Bind all attrs on the component
- node.attrs['v-bind'] = 'data.attrs'
-
- // Merge exiting class with the class prop on the component
- node.attrs['v-bind:class'] = `[${JSON.stringify(
- existingClass
- )}, data.staticClass, data.class]`
-
- // Merge exiting style with the style prop on the component
- node.attrs['v-bind:style'] = `[${JSON.stringify(
- existingStyle
- )}, data.style]`
-
- for (const key of Object.keys(attrs)) {
- node.attrs[`v-bind:${key}`] = `!data.attrs || data.attrs[${JSON.stringify(
- key
- )}] === undefined ? ${JSON.stringify(
- attrs[key]
- )} : data.attrs[${JSON.stringify(key)}]`
- }
-
- // Adding v-on
- node.attrs['v-on'] = 'data.on'
-
- return node
- })
-
// SVGO will inline styles, so if you don't turn off relevant plugin
// the tree will never match `style` nodes because they don't exist
tree.match({ tag: 'style' }, node => {
@@ -71,13 +19,17 @@ const plugin = state => tree => {
}
const createComponent = (svg, state) => {
- let result = `${svg}`
+ let result = `${svg}`
if (state.hasStyleTag) {
result += `
`
}
@@ -88,7 +40,10 @@ const createComponent = (svg, state) => {
module.exports = (input, { sync } = {}) => {
const state = {}
- const stream = posthtml([plugin(state)]).process(input, { sync })
+ const stream = posthtml([plugin(state)]).process(input, {
+ sync,
+ recognizeSelfClosing: true
+ })
if (stream.then) {
return stream.then(res => ({
diff --git a/lib/StyleComponent.js b/lib/StyleComponent.js
new file mode 100644
index 0000000..bb124c2
--- /dev/null
+++ b/lib/StyleComponent.js
@@ -0,0 +1,7 @@
+export default {
+ name: 'svg2vue-style',
+ functional: true,
+ render(h, ctx) {
+ return h('style', ctx.data, ctx.children)
+ }
+}
diff --git a/lib/registerStyleComponent.js b/lib/registerStyleComponent.js
deleted file mode 100644
index 92990c5..0000000
--- a/lib/registerStyleComponent.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Vue from 'vue'
-
-var NAME = 'svg2vue-style'
-
-if (!Vue.component(NAME)) {
- Vue.component(NAME, {
- functional: true,
- render: function (h, ctx) {
- return h('style', ctx.data, ctx.children)
- }
- })
-}
diff --git a/package.json b/package.json
index 78ec2d1..dae80fd 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
"eslint-plugin-prettier": "^3.0.1",
"husky": "^1.3.1",
"lint-staged": "^8.1.0",
- "poi": "^12.0.0-beta.6",
+ "poi": "^12.4.3",
"prettier": "^1.15.3",
"semantic-release": "^15.13.3",
"vue": "^2.5.17",
@@ -53,7 +53,7 @@
"plugin:prettier/recommended"
],
"rules": {
- "unicorn/filename": "off"
+ "unicorn/filename-case": "off"
},
"ignores": [
"lib/registerStyleComponent.js"
diff --git a/test/index.test.js b/test/index.test.js
index 2ad2974..9d016f8 100644
--- a/test/index.test.js
+++ b/test/index.test.js
@@ -36,6 +36,6 @@ test('replace style tag', t => {
sync: true
})
- t.true(sfc.component.includes('/lib/registerStyleComponent.js'))
+ t.true(sfc.component.includes('/lib/StyleComponent.js'))
t.true(sfc.component.includes(''))
})
diff --git a/test/snapshots/index.test.js.md b/test/snapshots/index.test.js.md
index 7065c29..57207e6 100644
--- a/test/snapshots/index.test.js.md
+++ b/test/snapshots/index.test.js.md
@@ -9,9 +9,9 @@ Generated by [AVA](https://ava.li).
> Snapshot 1
{
- component: `␊
+ component: `␊
␊
-