Hi there. I'm trying to get svg-to-vue-component up and running and I've hit a road block. I installed the npm module, and copy/pasted the Vue CLI config into vue.config.js. When I try to run vue-cli-service serve, I get the following error:
Syntax Error: TypeError: Cannot read property 'parseComponent' of undefined
Vue Component
<template>
<TestIcon />
</template>
<script>
import TestIcon from '@/assets/icons/test.svg'
export default {
components: {
TestIcon,
},
}
</script>
<style lang="stylus" scoped>
</style>SVG
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
<g><rect fill="none" height="24" width="24"/></g>
<g><path d="M23,12l-2.44-2.79l0.34-3.69l-3.61-0.82L15.4,1.5L12,2.96L8.6,1.5L6.71,4.69L3.1,5.5L3.44,9.2L1,12l2.44,2.79l-0.34,3.7 l3.61,0.82L8.6,22.5l3.4-1.47l3.4,1.46l1.89-3.19l3.61-0.82l-0.34-3.69L23,12z M10.09,16.72l-3.8-3.81l1.48-1.48l2.32,2.33 l5.85-5.87l1.48,1.48L10.09,16.72z"/></g>
</svg>vue.config.js
module.exports = {
chainWebpack(config) {
// only convert .svg files that are imported by these files as vue component
const fileRegex = /\.(vue|js|ts|svg)$/
// use vue-cli's default rule for svg in non .vue .js .ts files
config.module.rule('svg').issuer((file) => { return !fileRegex.test(file) })
// use our loader to handle svg imported by other files
config.module
.rule('svg-component')
.test(/\.svg$/)
.issuer((file) => { return fileRegex.test(file) })
.use('vue')
.loader('vue-loader')
.end()
.use('svg-to-vue-component')
.loader('svg-to-vue-component/loader')
},
}I'm not sure what I'm doing wrong. I'm using Vue 3, so maybe that's the issue? Any help would be appreciated!
egoist / svg-to-vue-component
Transform SVG files into Vue SFC (with hot reloading and SVGO support)
236
Contributors get 70% of received funds after fees
How does funding with Polar work?
1
Pay now to fund the work behind this issue.
2
Get updates on progress being made.
3
Maintainer is rewarded once the issue is completed.
FAQ
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too