forked from egoist/svg-to-vue-component
/
index.js
42 lines (36 loc) · 1.14 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
const posthtml = require('posthtml')
const plugin = () => tree => {
tree.match({ tag: 'svg' }, node => {
node.attrs = node.attrs || {}
// Bind all events so that you can @click="handler" instead of @click.native="handler"
node.attrs['v-on'] = '$listeners'
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 => {
// Ignore the style tag if it's empty
if (!node.content || node.content.length === 0) return
// When SVGO is turned off
// Make `style` tags work by using a dynamic component
node.tag = 'component'
node.attrs = node.attrs || {}
node.attrs.is = 'style'
return node
})
}
const createComponent = svg => {
return `<template>\n${svg}\n</template>`
}
module.exports = (input, { sync } = {}) => {
const stream = posthtml([plugin()]).process(input, {
sync,
recognizeSelfClosing: true
})
if (stream.then) {
return stream.then(res => ({
component: createComponent(res.html)
}))
}
return { component: createComponent(stream.html) }
}