3 files changed, 23 insertions, 9 deletions
diff --git a/app/assets/javascripts/pipelines/components/empty_state.vue b/app/assets/javascripts/pipelines/components/empty_state.vue
index 3db64339a62..0eaac8dd64f 100644
--- a/app/assets/javascripts/pipelines/components/empty_state.vue
+++ b/app/assets/javascripts/pipelines/components/empty_state.vue
@@ -1,21 +1,24 @@
 <script>
-import pipelinesEmptyStateSVG from 'empty_states/icons/_pipelines_empty.svg';
-
 export default {
   props: {
     helpPagePath: {
       type: String,
       required: true,
     },
+    emptyStateSvgPath: {
+      type: String,
+      required: true,
+    },
   },
-  data: () => ({ pipelinesEmptyStateSVG }),
 };
 </script>
 
 <template>
   <div class="row empty-state js-empty-state">
     <div class="col-xs-12">
-      <div class="svg-content" v-html="pipelinesEmptyStateSVG" />
+      <div class="svg-content">
+        <img :src="emptyStateSvgPath"/>
+      </div>
     </div>
 
     <div class="col-xs-12 text-center">
diff --git a/app/assets/javascripts/pipelines/components/error_state.vue b/app/assets/javascripts/pipelines/components/error_state.vue
index 90cee68163e..012853b201d 100644
--- a/app/assets/javascripts/pipelines/components/error_state.vue
+++ b/app/assets/javascripts/pipelines/components/error_state.vue
@@ -1,15 +1,20 @@
 <script>
-import pipelinesErrorStateSVG from 'empty_states/icons/_pipelines_failed.svg';
-
 export default {
-  data: () => ({ pipelinesErrorStateSVG }),
+  props: {
+    errorStateSvgPath: {
+      type: String,
+      required: true,
+    },
+  },
 };
 </script>
 
 <template>
   <div class="row empty-state js-pipelines-error-state">
     <div class="col-xs-12">
-      <div class="svg-content" v-html="pipelinesErrorStateSVG" />
+      <div class="svg-content">
+        <img :src="errorStateSvgPath"/>
+      </div>
     </div>
 
     <div class="col-xs-12 text-center">
diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue
index 4c53e2541fc..085bd20cefe 100644
--- a/app/assets/javascripts/pipelines/components/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines.vue
@@ -27,6 +27,8 @@
       return {
         endpoint: pipelinesData.endpoint,
         helpPagePath: pipelinesData.helpPagePath,
+        emptyStateSvgPath: pipelinesData.emptyStateSvgPath,
+        errorStateSvgPath: pipelinesData.errorStateSvgPath,
         autoDevopsPath: pipelinesData.helpAutoDevopsPath,
         newPipelinePath: pipelinesData.newPipelinePath,
         canCreatePipeline: pipelinesData.canCreatePipeline,
@@ -182,9 +184,13 @@
       <empty-state
         v-if="shouldRenderEmptyState"
         :help-page-path="helpPagePath"
+        :empty-state-svg-path="emptyStateSvgPath"
         />
 
-      <error-state v-if="shouldRenderErrorState" />
+      <error-state 
+        v-if="shouldRenderErrorState"
+        :error-state-svg-path="errorStateSvgPath"
+        />
 
       <div
         class="blank-state blank-state-no-icon"