feat: load SVG via CSS using webpack loader

Fixes issue #19
oaeproject · Aug 12, 2019 · 307db9c · 307db9c · datreeio · Aug 12, 2019
1 parent 57b20dc
commit 307db9c
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ This project is based on the [Polymer project PWA starter kit](https://pwa-start
 To kickstart development:
 
 1. `git clone https://github.com/oaeproject/Biscuit-ux.git && cd Biscuit-ux` 
-2. `npm install`
+2. `yarn`
 3. `npm run start:webpack`
 
 ## Integration with Hilary

diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "prepublish": "npm run snyk-protect"
   },
   "dependencies": {
+    "svg-url-loader": "latest",
     "@material/button": "^3.0.0",
     "@mdi/font": "^3.9.96",
     "@mdi/svg": "^3.7.95",

diff --git a/src/components/sidebar.js b/src/components/sidebar.js
@@ -12,8 +12,7 @@ class Sidebar extends LitElement {
       <aside class="menu">
         <ul class="menu-list">
           <li>
-            <a>
-              <img class="sidebar dashboard-icon" src="./../../node_modules/@mdi/svg/svg/view-dashboard-outline.svg" />
+            <a class="dashboard">
               Dashboard
             </a>
           </li>

diff --git a/style/app.scss b/style/app.scss
@@ -167,6 +167,15 @@ h2 {
 	color: #757575;
 }
 
+.menu-list a.dashboard {
+	background: url('../node_modules/@mdi/svg/svg/view-dashboard-outline.svg') no-repeat;
+	background-position: 0% 0%;
+}
+
+a.dashboard {
+	padding-left: 3em;
+}
+
 img.sidebar {
 	width: 25px;
 	height: 25px;

diff --git a/webpack.config.js b/webpack.config.js
@@ -17,7 +17,7 @@ module.exports = [
   {
     devServer: {
       historyApiFallback: true,
-      disableHostCheck: true,
+      disableHostCheck: true
     },
     mode: 'production',
     module: {
@@ -27,47 +27,50 @@ module.exports = [
           use: {
             loader: 'babel-loader',
             options: {
-              presets: [['@babel/preset-env', {targets: {ie: '11'}}]],
-              plugins: ['@babel/plugin-syntax-dynamic-import'],
-            },
-          },
+              presets: [['@babel/preset-env', { targets: { ie: '11' } }]],
+              plugins: ['@babel/plugin-syntax-dynamic-import']
+            }
+          }
+        },
+        {
+          test: /\.svg/,
+          use: {
+            loader: 'svg-url-loader',
+            options: {}
+          }
         },
         {
           test: /\.css|\.s(c|a)ss$/,
           use: [
             {
               loader: 'lit-scss-loader',
               options: {
-                minify: true, // defaults to false
-              },
+                minify: true // Defaults to false
+              }
             },
-            {loader: 'extract-loader'},
-            {loader: 'css-loader'},
+            { loader: 'extract-loader' },
+            { loader: 'css-loader' },
             {
               loader: 'postcss-loader',
               options: {
-                plugins: () => [autoprefixer()],
-              },
+                plugins: () => [autoprefixer()]
+              }
             },
             {
               loader: 'sass-loader',
               options: {
-                includePaths: ['./node_modules', '../../node_modules'],
-              },
-            },
-          ],
-        },
-      ],
+                includePaths: ['./node_modules', '../../node_modules']
+              }
+            }
+          ]
+        }
+      ]
     },
     plugins: [
-      new CopyWebpackPlugin([
-        'images/**',
-        'node_modules/@webcomponents/webcomponentsjs/**',
-        'manifest.json',
-      ]),
+      new CopyWebpackPlugin(['images/**', 'node_modules/@webcomponents/webcomponentsjs/**', 'manifest.json']),
       new HtmlWebpackPlugin({
         chunksSortMode: 'none',
-        template: 'index.html',
+        template: 'index.html'
       }),
       new WorkboxWebpackPlugin.GenerateSW({
         include: ['index.html', 'manifest.json', /\.js$/],
@@ -79,14 +82,14 @@ module.exports = [
         runtimeCaching: [
           {
             urlPattern: /\/@webcomponents\/webcomponentsjs\//,
-            handler: 'staleWhileRevalidate',
+            handler: 'staleWhileRevalidate'
           },
           {
             urlPattern: /^https:\/\/fonts.gstatic.com\//,
-            handler: 'staleWhileRevalidate',
-          },
-        ],
-      }),
-    ],
-  },
+            handler: 'staleWhileRevalidate'
+          }
+        ]
+      })
+    ]
+  }
 ];
diff --git a/yarn.lock b/yarn.lock
@@ -5482,7 +5482,7 @@ file-entry-cache@^5.0.1:
   dependencies:
     flat-cache "^2.0.1"
 
-file-loader@^4.0.0:
+file-loader@4.0.0, file-loader@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-4.0.0.tgz#c3570783fefb6e1bc0978a856f4bf5825b966c2a"
   integrity sha512-roAbL6IdSGczwfXxhMi6Zq+jD4IfUpL0jWHD7fvmjdOVb7xBfdRUHe4LpBgO23VtVK5AW1OlWZo0p34Jvx3iWg==
@@ -12196,6 +12196,14 @@ sver-compat@^1.5.0:
     es6-iterator "^2.0.1"
     es6-symbol "^3.1.1"
 
+svg-url-loader@latest:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/svg-url-loader/-/svg-url-loader-3.0.0.tgz#366e5982da8fad5e4be4d405349cc58d68cd119b"
+  integrity sha512-z50VtJLRPoZKUW8gv/YP4ld3QUknK4Vzi2q9dHWYW9iFfOeOMLbBo5x61YLD8O+BrzOk1rVB7ZNCFdX83DTgFg==
+  dependencies:
+    file-loader "4.0.0"
+    loader-utils "1.2.3"
+
 sw-precache@^5.1.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/sw-precache/-/sw-precache-5.2.1.tgz#06134f319eec68f3b9583ce9a7036b1c119f7179"