Nuxt: SyntaxError Unexpected token <

[fsproru]

When I import SvgIcon and add it as a component, I start getting Unexpected token < on page refresh in a Nuxt project.

Sample code

import SvgIcon from '@jamescoyle/vue-icon'
import { Component } from 'vue-property-decorator'

@Component({
  components: {
    SvgIcon
  }
})
export default class MyComponent extends Vue {
}

[JamesCoyle]

I'm guessing it's not being treated in the same way as a direct import and is expecting a JS Module instead of a Vue SFC. I'll look into solutions to this but I'm assuming I would need a build step to compile the SFC to a Module.

For now you can just import the component directly using import SvgIcon from '@jamescoyle/vue-icon/lib/svg-icon.vue'.

[abdoulmouctard]

There is missing value variable in flip validator

flip: {
    type: String,
    validator: () => ["horizontal", "vertical", "both"].includes(value),
},

👉 https://github.com/JamesCoyle/vue-icon/blob/51550e9d1a8f87b5026e429335ba3e0eee8c2e08/lib/svg-icon.vue#L39

Correction:

flip: {
    type: String,
    validator: (value) => ["horizontal", "vertical", "both"].includes(value),
},