using svg-url-loader for webpack configs that accept svgs

storybookjs · Mar 16, 2018 · 3ef56d7 · 3ef56d7
1 parent 40596d0
commit 3ef56d7
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 10 deletions.
diff --git a/docs/.storybook/webpack.config.js b/docs/.storybook/webpack.config.js
@@ -10,9 +10,16 @@ const config = {
         use: ['json-loader', 'yaml-loader'],
       },
       {
-        test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)$/,
+        test: /\.(jpg|png|gif|eot|ttf|woff|woff2)$/,
         use: ['file-loader'],
       },
+      {
+        test: /\.svg$/,
+        loader: 'svg-url-loader',
+        options: {
+          noquotes: true,
+        },
+      },
     ],
   },
 };

diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
@@ -30,6 +30,7 @@
     "babel-preset-vue": "^2.0.1",
     "cross-env": "^5.1.4",
     "file-loader": "^1.1.11",
+    "svg-url-loader": "^2.3.2",
     "vue-loader": "^14.2.1",
     "webpack": "^3.11.0",
     "webpack-dev-server": "^2.11.2"

diff --git a/examples/vue-kitchen-sink/webpack.config.js b/examples/vue-kitchen-sink/webpack.config.js
@@ -24,12 +24,19 @@ module.exports = {
         exclude: /node_modules/,
       },
       {
-        test: /\.(png|jpg|gif|svg)$/,
+        test: /\.(png|jpg|gif)$/,
         loader: 'file-loader',
         options: {
           name: '[name].[ext]?[hash]',
         },
       },
+      {
+        test: /\.svg$/,
+        loader: 'svg-url-loader',
+        options: {
+          noquotes: true,
+        },
+      },
     ],
   },
   resolve: {

diff --git a/lib/core/package.json b/lib/core/package.json
@@ -42,6 +42,7 @@
     "serve-favicon": "^2.4.5",
     "shelljs": "^0.8.1",
     "style-loader": "^0.20.3",
+    "svg-url-loader": "^2.3.2",
     "url-loader": "^0.6.2",
     "webpack": "^3.11.0",
     "webpack-dev-middleware": "^1.12.2",

diff --git a/lib/core/src/server/config/defaults/webpack.config.js b/lib/core/src/server/config/defaults/webpack.config.js
@@ -37,12 +37,19 @@ export function createDefaultWebpackConfig(storybookBaseConfig) {
           loader: require.resolve('json-loader'),
         },
         {
-          test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
+          test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
           loader: require.resolve('file-loader'),
           query: {
             name: 'static/media/[name].[hash:8].[ext]',
           },
         },
+        {
+          test: /\.svg$/,
+          loader: require.resolve('svg-url-loader'),
+          options: {
+            noquotes: true,
+          },
+        },
         {
           test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
           loader: require.resolve('url-loader'),

diff --git a/yarn.lock b/yarn.lock
@@ -6038,20 +6038,20 @@ file-entry-cache@^2.0.0:
     flat-cache "^1.2.1"
     object-assign "^4.0.1"
 
+[email protected], file-loader@^1.1.11:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.11.tgz#6fe886449b0f2a936e43cabaac0cdbfb369506f8"
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^0.4.5"
+
 [email protected]:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.5.tgz#91c25b6b6fbe56dae99f10a425fd64933b5c9daa"
   dependencies:
     loader-utils "^1.0.2"
     schema-utils "^0.3.0"
 
-file-loader@^1.1.11:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.11.tgz#6fe886449b0f2a936e43cabaac0cdbfb369506f8"
-  dependencies:
-    loader-utils "^1.0.2"
-    schema-utils "^0.4.5"
-
 file-loader@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.6.tgz#7b9a8f2c58f00a77fddf49e940f7ac978a3ea0e8"
@@ -15187,6 +15187,13 @@ svg-tags@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
 
+svg-url-loader@^2.3.2:
+  version "2.3.2"
+  resolved "http://artifactory.eng.qops.net:8081/artifactory/api/npm/npm-virtual/svg-url-loader/-/svg-url-loader-2.3.2.tgz#dd86b26c19fe3b914f04ea10ef39594eade04464"
+  dependencies:
+    file-loader "1.1.11"
+    loader-utils "1.1.0"
+
 svgo@^0.7.0:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"