fix: include .svg in issuer

Author: egoist

README.md

@@ -31,7 +31,7 @@ module.exports = {
         test: /\.svg$/,
         // If you want to import svg in css files
         // You need to configure another rule to use file-loader for that
-        issuer: /\.(vue|js|ts)$/,
+        issuer: /\.(vue|js|ts|svg)$/,
         use: [
           // This loader compiles .svg file to .vue file
           // So we use `vue-loader` after it
@@ -78,7 +78,7 @@ In your `vue.config.js`:
 module.exports = {
   chainWebpack(config) {
     // Only convert .svg files that are imported by these files as Vue component
-    const FILE_RE = /\.(vue|js|ts)$/
+    const FILE_RE = /\.(vue|js|ts|svg)$/
 
     // Use vue-cli's default rule for svg in non .vue .js .ts files
     config.module.rule('svg').issuer(file => !FILE_RE.test(file))

loader.js

@@ -10,16 +10,16 @@ const toSFC = require('.')
 module.exports = async function(source) {
   this.cacheable()
 
-  if (this.issuer && this.issuer.endsWith('.css')) {
-    throw new Error(
-      `Please configure another loader to handle .svg files imported in .css files\nSee more: https://github.com/egoist/svg-to-vue-component#usage`
-    )
-  }
-
   const cb = this.async()
   const { svgoConfig } = getOptions(this) || {}
 
   try {
+    if (this.issuer && this.issuer.endsWith('.css')) {
+      throw new Error(
+        `Please configure another loader to handle .svg files imported in .css files\nSee more: https://github.com/egoist/svg-to-vue-component#usage`
+      )
+    }
+
     if (svgoConfig !== false) {
       const svgo = new SVGO(
         await getSvgoConfig(svgoConfig, path.dirname(this.resourcePath))
@@ -33,7 +33,6 @@ module.exports = async function(source) {
     }
 
     const { component } = await toSFC(source)
-
     cb(null, component)
   } catch (err) {
     cb(err)

nuxt.js

@@ -11,7 +11,7 @@ module.exports = function() {
     imageRule.test = /\.(png|jpe?g|gif|webp)$/
 
     // Handle svg files imported by css files
-    const FILE_RE = /\.(vue|js|ts)$/
+    const FILE_RE = /\.(vue|js|ts|svg)$/
     config.module.rules.push(
       Object.assign({}, imageRule, {
         issuer: file => !FILE_RE.test(file)

poi.js

@@ -3,7 +3,7 @@ exports.name = 'svg-to-vue-component'
 exports.apply = api => {
   api.hook('createWebpackChain', config => {
     // Only convert .svg files that are imported by these files as Vue component
-    const FILE_RE = /\.(vue|js|ts)$/
+    const FILE_RE = /\.(vue|js|ts|svg)$/
 
     // Use vue-cli's default rule for svg in non .vue .js .ts files
     config.module.rule('svg').issuer(file => !FILE_RE.test(file))
@@ -12,7 +12,9 @@ exports.apply = api => {
     config.module
       .rule('svg-component')
       .test(/\.svg$/)
-      .issuer(file => FILE_RE.test(file))
+      .issuer(file => {
+        return FILE_RE.test(file)
+      })
       .use('vue')
       .loader('vue-loader')
       .end()