fix: add warning for .svg files that are imported by css files

README.md

@@ -29,6 +29,9 @@ module.exports = {
     rules: [
       {
         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)$/,
         use: [
           // This loader compiles .svg file to .vue file
           // So we use `vue-loader` after it
@@ -67,20 +70,24 @@ export default {
 </script>
 ```
 
-### With Vue CLI or Poi
+### With Vue CLI
 
-In your `vue.config.js` or `poi.config.js`:
+In your `vue.config.js`:
 
 ```js
 module.exports = {
   chainWebpack(config) {
-    // Remove existing SVG rule which uses file-loader
-    config.module.rules.delete('svg')
+    // Only convert .svg files that are imported by these files as Vue component
+    const FILE_RE = /\.(vue|js|ts)$/
 
-    // Use our loader instead
+    // Use vue-cli's default rule for svg in non .vue .js .ts files
+    config.module.rule('svg').issuer(file => !FILE_RE.test(file))
+
+    // Use our loader to handle svg imported by other files
     config.module
-      .rule('svg')
+      .rule('svg-component')
       .test(/\.svg$/)
+      .issuer(file => FILE_RE.test(file))
       .use('vue')
       .loader('vue-loader')
       .end()
@@ -90,32 +97,23 @@ module.exports = {
 }
 ```
 
-### Nuxt.js 2
+## With Poi
 
-In your `nuxt.config.js`:
+In your `poi.config.js`:
 
 ```js
 module.exports = {
-  build: {
-    extend(config) {
-      const imageLoaderRule = config.module.rules.find(
-        rule => rule.test && rule.test.test('.svg')
-      )
-      if (!imageLoaderRule) {
-        throw new Error('Cannot find the existing webpack rule for .svg files')
-      }
+  plugins: ['svg-to-vue-component/poi']
+}
+```
+
+### Nuxt.js 2
 
-      // Don't process .svg files in default image rule
-      // from https://github.com/nuxt/nuxt.js/blob/76b10d2d3f4e5352f1c9d14c52008f234e66d7d5/lib/builder/webpack/base.js#L203
-      imageLoaderRule.test = /\.(png|jpe?g|gif|webp)$/
+In your `nuxt.config.js`:
 
-      // Add a new rule for .svg file
-      config.module.rules.push({
-        test: /\.svg$/,
-        use: ['vue-loader', 'svg-to-vue-component/loader']
-      })
-    }
-  }
+```js
+module.exports = {
+  modules: ['svg-to-vue-component/nuxt']
 }
 ```
 

example/index.js

@@ -1,5 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
+// eslint-disable-next-line import/no-unassigned-import
+import './style.css'
 
 // eslint-disable-next-line no-new
 new Vue({

example/poi.config.js

@@ -3,15 +3,5 @@ module.exports = {
   output: {
     dir: './example/dist'
   },
-  chainWebpack(config) {
-    config.module.rules.delete('svg')
-    config.module
-      .rule('svg')
-      .test(/\.svg$/)
-      .use('vue')
-      .loader('vue-loader')
-      .end()
-      .use('sfc')
-      .loader(require.resolve('../loader'))
-  }
+  plugins: ['../poi']
 }

example/style.css

@@ -0,0 +1,3 @@
+body {
+  background-image: url(./icon.svg);
+}

loader.js

@@ -10,6 +10,12 @@ 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) || {}
 

nuxt.js

@@ -0,0 +1,28 @@
+module.exports = function() {
+  this.extendBuild(config => {
+    const imageRule = config.module.rules.find(
+      rule => rule.test && rule.test.test('.svg')
+    )
+    if (!imageRule) {
+      throw new Error('Cannot find the existing webpack rule for .svg files')
+    }
+    // Don't process .svg files in default image rule
+    // from https://github.com/nuxt/nuxt.js/blob/76b10d2d3f4e5352f1c9d14c52008f234e66d7d5/lib/builder/webpack/base.js#L203
+    imageRule.test = /\.(png|jpe?g|gif|webp)$/
+
+    // Handle svg files imported by css files
+    const FILE_RE = /\.(vue|js|ts)$/
+    config.module.rules.push(
+      Object.assign({}, imageRule, {
+        issuer: file => !FILE_RE.test(file)
+      })
+    )
+
+    // Handle svg files imported by js files
+    config.module.rules.push({
+      test: /\.svg$/,
+      issuer: file => FILE_RE.test(file),
+      use: ['vue-loader', 'svg-to-vue-component/loader']
+    })
+  })
+}

package.json

@@ -10,6 +10,8 @@
   "files": [
     "index.js",
     "loader.js",
+    "nuxt.js",
+    "poi.js",
     "lib"
   ],
   "scripts": {
@@ -40,7 +42,7 @@
     "eslint-plugin-prettier": "^3.0.1",
     "husky": "^1.3.1",
     "lint-staged": "^8.1.0",
-    "poi": "^12.4.3",
+    "poi": "^12.5.2",
     "prettier": "^1.15.3",
     "semantic-release": "^15.13.3",
     "vue": "^2.5.17",

poi.js

@@ -0,0 +1,22 @@
+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)$/
+
+    // Use vue-cli's default rule for svg in non .vue .js .ts files
+    config.module.rule('svg').issuer(file => !FILE_RE.test(file))
+
+    // Use our loader to handle svg imported by other files
+    config.module
+      .rule('svg-component')
+      .test(/\.svg$/)
+      .issuer(file => FILE_RE.test(file))
+      .use('vue')
+      .loader('vue-loader')
+      .end()
+      .use('svg-to-vue-component')
+      .loader(require.resolve('./loader'))
+  })
+}

yarn.lock

@@ -851,10 +851,10 @@
     universal-user-agent "^2.0.0"
     url-template "^2.0.8"
 
-"@poi/dev-utils@^12.1.0":
-  version "12.1.0"
-  resolved "https://registry.npmjs.org/@poi/dev-utils/-/dev-utils-12.1.0.tgz#646b159a75a1d74bac5cb784a3e75b8b755dd67c"
-  integrity sha512-y3fGQXA1UJMa00/MoU6s7pqkrsRg16mb5px4bI678S5u2Wy5d4H+JLlCuJL+Zg6ktLE5ikeXXC/iUWcnmZdBdQ==
+"@poi/dev-utils@^12.1.1":
+  version "12.1.1"
+  resolved "https://registry.npmjs.org/@poi/dev-utils/-/dev-utils-12.1.1.tgz#3a0c2c92f886cf4b6395aa8e803ca2462c99d09c"
+  integrity sha512-gV1RUXKCR59P+84RHJaCkJXh/F9k6nDUPzoVB6DeNi/4rhG2SapRGIvjy9ZXzJGToaOa7qQw/mR63MdoOE/EXA==
   dependencies:
     address "^1.0.3"
     cross-spawn "^6.0.5"
@@ -870,6 +870,16 @@
   dependencies:
     chalk "^2.4.1"
 
+"@poi/plugin-html-entry@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.npmjs.org/@poi/plugin-html-entry/-/plugin-html-entry-0.1.1.tgz#41ed44c13424cf3209a8d26b664995e3e8168dff"
+  integrity sha512-04kdLhbP/W02M2mdn9tk4bP+tRIlt1U6rr1jBXAZscGFi8QA+Tj7EBks3/jqGodL2/5uOYfKPMJpoZRDBcBQWg==
+  dependencies:
+    chokidar "^2.0.4"
+    fs-extra "^7.0.1"
+    lodash "^4.17.11"
+    posthtml "^0.11.3"
+
 "@poi/pnp-webpack-plugin@^0.0.2":
   version "0.0.2"
   resolved "https://registry.npmjs.org/@poi/pnp-webpack-plugin/-/pnp-webpack-plugin-0.0.2.tgz#4633d4445637a2ed3b3da7f831ea7ee38587e6d7"
@@ -2625,7 +2635,7 @@ chokidar@^1.4.2:
   optionalDependencies:
     fsevents "^1.0.0"
 
-chokidar@^2.0.0, chokidar@^2.0.2:
+chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.4:
   version "2.0.4"
   resolved "https://registry.npmjs.org/chokidar/-/chokidar-2.0.4.tgz#356ff4e2b0e8e43e322d18a372460bbcf3accd26"
   integrity sha512-z9n7yt9rOvIJrMhvDtDictKrkFHeihkNl6uWMmZlmL6tJtX9Cs+87oK+teBx+JIgzvbX3yZHT3eF8vpbDxHJXQ==
@@ -8698,6 +8708,11 @@ parse-ms@^1.0.0:
   resolved "https://registry.npmjs.org/parse-ms/-/parse-ms-1.0.1.tgz#56346d4749d78f23430ca0c713850aef91aa361d"
   integrity sha1-VjRtR0nXjyNDDKDHE4UK75GqNh0=
 
+parse-ms@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/parse-ms/-/parse-ms-2.0.0.tgz#7b3640295100caf3fa0100ccceb56635b62f9d62"
+  integrity sha512-AddiXFSLLCqj+tCRJ9MrUtHZB4DWojO3tk0NVZ+g5MaMQHF2+p2ktqxuoXyPFLljz/aUK0Nfhd/uGWnhXVXEyA==
+
 parse-passwd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
@@ -8888,10 +8903,10 @@ pluralize@^1.2.1:
   resolved "https://registry.npmjs.org/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
   integrity sha1-0aIUg/0iu0HlihL6NCGCMUCJfEU=
 
-poi@^12.4.3:
-  version "12.4.3"
-  resolved "https://registry.npmjs.org/poi/-/poi-12.4.3.tgz#8c27018c934abe031956831c948392a0acb2c463"
-  integrity sha512-NOpOYepmRrrjpmewM8m+aDnzXWpG2ActL8KeGv9zU4Ix2evWspdjYQIbDHArIv9PLnKQx7TIkKxnUiXWx2NhPg==
+poi@^12.5.2:
+  version "12.5.2"
+  resolved "https://registry.npmjs.org/poi/-/poi-12.5.2.tgz#9315a3ee9b7be272ba206840ea058e3cc8405988"
+  integrity sha512-ad3dnCWY/E1fAJCmYPJ5Qf/NfGaBaPiPJEpRE0qFD6XLpMFUyXvOjHwAGO9TIvX95/qxq0pv2aqM8FiudblXZQ==
   dependencies:
     "@babel/core" "^7.1.6"
     "@babel/plugin-proposal-class-properties" "^7.1.0"
@@ -8905,8 +8920,9 @@ poi@^12.4.3:
     "@babel/preset-typescript" "^7.1.0"
     "@babel/runtime" "^7.1.5"
     "@intervolga/optimize-cssnano-plugin" "^1.0.6"
-    "@poi/dev-utils" "^12.1.0"
+    "@poi/dev-utils" "^12.1.1"
     "@poi/logger" "^12.0.0"
+    "@poi/plugin-html-entry" "^0.1.1"
     "@poi/pnp-webpack-plugin" "^0.0.2"
     babel-helper-vue-jsx-merge-props "^2.0.3"
     babel-loader "^8.0.4"
@@ -8933,6 +8949,7 @@ poi@^12.4.3:
     mini-css-extract-plugin "^0.4.5"
     ora "^3.0.0"
     postcss-loader "^3.0.0"
+    pretty-ms "^4.0.0"
     resolve-from "^4.0.0"
     string-width "^2.1.1"
     superstruct "^0.6.0"
@@ -9390,6 +9407,13 @@ pretty-ms@^3.0.0:
   dependencies:
     parse-ms "^1.0.0"
 
+pretty-ms@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/pretty-ms/-/pretty-ms-4.0.0.tgz#31baf41b94fd02227098aaa03bd62608eb0d6e92"
+  integrity sha512-qG66ahoLCwpLXD09ZPHSCbUWYTqdosB7SMP4OffgTgL2PBKXMuUsrk5Bwg8q4qPkjTXsKBMr+YK3Ltd/6F9s/Q==
+  dependencies:
+    parse-ms "^2.0.0"
+
 private@^0.1.6, private@^0.1.8:
   version "0.1.8"
   resolved "https://registry.npmjs.org/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"