Use raw-loader to import SVG

app/assets/javascripts/environments/components/deploy_board_component.js.es6

-/* eslint-disable no-new, import/first */
+/* eslint-disable no-new */
+/* global Flash */
 /**
  * Renders a deploy board.
  *
@@ -17,13 +18,13 @@
  * Please refer to this [comment](https://gitlab.com/gitlab-org/gitlab-ee/issues/1589#note_23630610)
  * for more information
  */
+import statusCodes from '~/lib/utils/http_status';
+import '~/flash';
+import '~/lib/utils/common_utils.js.es6';
+import deployBoardSvg from 'empty_states/icons/_deploy_board.svg';
+import instanceComponent from './deploy_board_instance_component.js.es6';
 
-const instanceComponent = require('./deploy_board_instance_component.js.es6');
-const statusCodes = require('~/lib/utils/http_status');
-const Flash = require('~/flash');
-require('~/lib/utils/common_utils.js.es6');
-
-module.exports = {
+export default {
 
   components: {
     instanceComponent,
@@ -61,6 +62,7 @@ module.exports = {
       isLoading: false,
       hasError: false,
       backOffRequestCounter: 0,
+      deployBoardSvg,
     };
   },
 
@@ -187,7 +189,7 @@ module.exports = {
 
       <div v-if="canRenderEmptyState">
         <section class="deploy-board-empty-state-svg">
-          <svg width="55" height="44" viewBox="0 0 55 44" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g transform="translate(1.488 .803)"><rect stroke="#E5E5E5" stroke-width="1.6" fill="#FFF" width="42" height="42" rx="4"/><rect stroke="#E7E7E7" stroke-width="1.6" fill="#FFF" x="6" y="12" width="7.171" height="24" rx="2"/><rect stroke="#B5A7DD" stroke-width="1.6" fill="#FFF" x="6" y="5" width="32.17" height="3.5" rx="1.75"/><rect stroke="#FDE5D8" stroke-width="1.6" fill="#FFF" x="17" y="12" width="21.17" height="24" rx="2"/><rect fill="#E52C5A" x="19.74" y="14.197" width="7.171" height="2.408" rx="1.204"/><rect fill="#E5E5E5" x="28.35" y="18.272" width="7.171" height="2.408" rx="1.204"/><rect fill="#E5E5E5" x="19.74" y="26.697" width="15.943" height="2.408" rx="1.204"/><rect fill="#E5E5E5" x="19.74" y="30.697" width="15.943" height="2.408" rx="1.204"/><rect fill="#E52C5A" x="21.911" y="21.272" width="4.78" height="2.408" rx="1.204"/><rect fill="#FC8A51" x="28.472" y="22.429" width="7.171" height="2.408" rx="1.204"/><rect fill="#FDE5D8" x="26.691" y="8.429" width="2.39" height="2.408" rx="1.195"/><rect fill="#FF8340" x="8.512" y="14.85" width="2.39" height="2.408" rx="1.195"/><rect fill="#E52C5A" x="8.512" y="19.197" width="2.39" height="2.408" rx="1.195"/><rect fill="#FF8340" x="8.512" y="31.197" width="2.39" height="2.408" rx="1.195"/><rect fill="#E7E7E7" x="8.512" y="27.197" width="2.39" height="2.408" rx="1.195"/><rect fill="#B5A7DD" x="8.512" y="23.197" width="2.39" height="2.408" rx="1.195"/></g><g transform="rotate(-45 33.371 -12.99)"><ellipse stroke="#6B4FBB" stroke-width="3.2" fill-opacity=".1" fill="#FFF" cx="11.951" cy="12.041" rx="11.951" ry="12.041"/><path d="M5.536 22.29c5.716 3.3 13.046 1.307 16.37-4.452 3.326-5.759 1.387-13.103-4.329-16.403" stroke="#6B4FBB" stroke-width="3.2" fill-opacity=".3" fill="#FFF"/><rect fill="#6B4FBB" x="9.561" y="23.279" width="4.78" height="13.646" rx="2.39"/></g></g></svg>
+          ${deployBoardSvg}
         </section>
 
         <section class="deploy-board-empty-state-text">

app/assets/javascripts/environments/components/deploy_board_instance_component.js.es6

@@ -4,14 +4,13 @@
  *
  * Each instance has a state and a tooltip.
  * The state needs to be represented in different colors,
- * see more information about this in https://gitlab.com/gitlab-org/gitlab-ee/uploads/5fff049fd88336d9ee0c6ef77b1ba7e3/monitoring__deployboard--key.png
+ * see more information about this in
+ * https://gitlab.com/gitlab-org/gitlab-ee/uploads/5fff049fd88336d9ee0c6ef77b1ba7e3/monitoring__deployboard--key.png
  *
  */
 
-module.exports = {
-
+export default {
   props: {
-
     /**
      * Represents the status of the pod. Each state is represented with a different
      * color.

app/assets/javascripts/environments/components/environments_table.js.es6

@@ -6,7 +6,7 @@
  */
 const Vue = require('vue');
 const EnvironmentItem = require('./environment_item');
-const DeployBoard = require('./deploy_board_component');
+const DeployBoard = require('./deploy_board_component').default;
 
 module.exports = Vue.component('environment-table-component', {
 

config/webpack.config.js

@@ -91,6 +91,7 @@ var config = {
       '~':              path.join(ROOT_PATH, 'app/assets/javascripts'),
       'bootstrap/js':   'bootstrap-sass/assets/javascripts/bootstrap',
       'emoji-aliases$': path.join(ROOT_PATH, 'fixtures/emojis/aliases.json'),
+      'empty_states':   path.join(ROOT_PATH, 'app/views/shared/empty_states'),
       'icons':          path.join(ROOT_PATH, 'app/views/shared/icons'),
       'vendor':         path.join(ROOT_PATH, 'vendor/assets/javascripts'),
       'vue$':           'vue/dist/vue.common.js',