Support illustrations.svg in Vite

What does this MR do and why?

This MR adds support for illustration.svg from gitlab-svgs project, which is now directly imported in GitLab UI.

This change uses the same hack that's used from the sprites_icon (icons.svg), which points the URL at the Rails asset pipeline, instead of Webpack/Vite.

Addresses Support SVG imports in dev mode (#569526 - closed).

How to set up and validate locally

  1. Open any merge request
  2. Apply this patch:
diff --git a/app/assets/javascripts/diffs/components/diffs_file_tree.vue b/app/assets/javascripts/diffs/components/diffs_file_tree.vue
--- a/app/assets/javascripts/diffs/components/diffs_file_tree.vue	(revision b614dd26d67ad3148e4abb16b68c364da37f27e1)
+++ b/app/assets/javascripts/diffs/components/diffs_file_tree.vue	(date 1757593105791)
@@ -1,5 +1,6 @@
 <script>
 import { debounce } from 'lodash';
+import { GlEmptyState } from '@gitlab/ui';
 import { mapActions } from 'pinia';
 import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
 import { getCookie, setCookie } from '~/lib/utils/common_utils';
@@ -16,7 +17,7 @@
 
 export default {
   name: 'DiffsFileTree',
-  components: { FileBrowserHeight, TreeList, PanelResizer },
+  components: { FileBrowserHeight, TreeList, PanelResizer, GlEmptyState },
   minTreeWidth: MIN_TREE_WIDTH,
   maxTreeWidth: window.innerWidth / 2,
   props: {
@@ -134,6 +135,7 @@
     class="rd-app-sidebar diff-tree-list"
     :class="{ 'diff-tree-list-floating': floating }"
   >
+    <gl-empty-state title="Empty" illustration-name="empty-search-md" />
     <div
       data-testid="file-browser-floating-wrapper"
       class="diff-tree-list-floating-wrapper"
  1. Observe the empty state icon in the file browser

Merge request reports

Loading