Inline SVG and CSS

Inline assets so consumers don't have to manually import it.

Author: rtucek

package.json

@@ -21,7 +21,8 @@
   "unpkg": "dist/query-builder.umd.min.js",
   "types": "./types/index.d.ts",
   "files": [
-    "/dist/",
+    "/dist/*.js",
+    "/dist/*.js.map",
     "/types/*.d.ts"
   ],
   "dependencies": {
@@ -50,6 +51,7 @@
     "node-sass": "^4.9.0",
     "sass-loader": "^8.0.0",
     "typescript": "^3.4.3",
+    "vue-svg-inline-loader": "^1.4.4",
     "vue-template-compiler": "^2.5.21"
   },
   "gitHooks": {

src/QueryBuilderGroup.vue

@@ -292,6 +292,8 @@ export default class QueryBuilderGroup extends Vue implements QueryBuilderGroupI
       <template v-if="$scopedSlots.groupOperator">
         <div class="query-builder-group__group-selection-slot">
           <img
+            svg-inline
+            svg-sprite
             v-if="showDragHandle"
             class="query-builder__draggable-handle"
             src="./grip-vertical-solid.svg"
@@ -306,6 +308,8 @@ export default class QueryBuilderGroup extends Vue implements QueryBuilderGroupI
       <template v-else>
         <div class="query-builder-group__group-selection">
           <img
+            svg-inline
+            svg-sprite
             v-if="showDragHandle"
             class="query-builder__draggable-handle"
             src="./grip-vertical-solid.svg"

src/QueryBuilderRule.vue

@@ -70,6 +70,8 @@ export default class QueryBuilderRule extends Vue {
 <template>
   <div class="query-builder-rule" >
     <img
+      svg-inline
+      svg-sprite
       v-if="showDragHandle"
       class="query-builder__draggable-handle"
       src="./grip-vertical-solid.svg"

vue.config.js

@@ -1,7 +1,18 @@
 module.exports = {
+  css: {
+    extract: false,
+  },
   chainWebpack: (config) => {
-    config.module.rule('eslint').use('eslint-loader').options({
-      fix: true,
-    });
+    config.module
+      .rule('eslint')
+      .use('eslint-loader')
+      .options({
+        fix: true,
+      });
+
+    config.module
+      .rule('vue')
+      .use('vue-svg-inline-loader')
+      .loader('vue-svg-inline-loader');
   },
 };

yarn.lock

@@ -633,6 +633,14 @@
     "@babel/helper-create-regexp-features-plugin" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/polyfill@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.7.0.tgz#e1066e251e17606ec7908b05617f9b7f8180d8f3"
+  integrity sha512-/TS23MVvo34dFmf8mwCisCbWGrfhbiWZSwBo6HkADTBhUa2Q/jWltyY/tpofz/b6/RIhqaqQcquptCirqIhOaQ==
+  dependencies:
+    core-js "^2.6.5"
+    regenerator-runtime "^0.13.2"
+
 "@babel/preset-env@^7.7.4":
   version "7.7.7"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.7.7.tgz#c294167b91e53e7e36d820e943ece8d0c7fe46ac"
@@ -3058,7 +3066,7 @@ core-js-compat@^3.4.4, core-js-compat@^3.6.0:
     browserslist "^4.8.2"
     semver "7.0.0"
 
-core-js@^2.4.0:
+core-js@^2.4.0, core-js@^2.6.10, core-js@^2.6.5:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
   integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
@@ -9833,7 +9841,7 @@ svg-tags@^1.0.0:
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
   integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
 
-svgo@^1.0.0:
+svgo@^1.0.0, svgo@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
   integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
@@ -10543,6 +10551,17 @@ vue-style-loader@^4.1.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
+vue-svg-inline-loader@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/vue-svg-inline-loader/-/vue-svg-inline-loader-1.4.4.tgz#255cd58f5e8bb4ba13cc531cf0f07ee61881567d"
+  integrity sha512-iEuebrVvEM/XJ/TndBbndPgdINquEDwEf2hHBUeckgFJoiW0BEM7glgeOoOF3VdfkcmSkIRdrjeSMxDBldQsLw==
+  dependencies:
+    "@babel/polyfill" "^7.7.0"
+    "@babel/runtime" "^7.7.4"
+    core-js "^2.6.10"
+    loader-utils "^1.2.3"
+    svgo "^1.3.2"
+
 vue-template-compiler@^2.5.21:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz#c04704ef8f498b153130018993e56309d4698080"