Include icons/images in dist by importing them explicitly

arnellebalane · Sep 24, 2023 · 9499f3b · 9499f3b
1 parent 1c3b705
commit 9499f3b
Show file tree

Hide file tree

Showing 11 changed files with 91 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "start": "vite dev",
     "dev": "netlify dev",
     "build": "vite build",
+    "preview": "vite preview",
     "lhci": "lhci autorun",
     "prezip": "npm run build",
     "zip": "./scripts/zip.sh"

diff --git a/src/app/components/AppTopBar.svelte b/src/app/components/AppTopBar.svelte
@@ -2,6 +2,7 @@
 import { onMount, onDestroy } from 'svelte';
 
 import { APP_VERSION } from '@lib/constants';
+import { icons } from '@lib/icons';
 import { enableShortcut, disableShortcut } from '@features/shortcuts';
 import { settings } from '@features/settings/store';
 import { changelogs, version } from '@features/changelogs/store';
@@ -15,6 +16,8 @@ import WhatsNewButton from '@features/changelogs/components/WhatsNewButton.svelt
 import QuickLinks from '@features/quick-links/components/QuickLinks.svelte';
 import FrequentLinks from '@features/quick-links/components/FrequentLinks.svelte';
 
+import ChromeWebStoreImage from '@assets/images/chrome-webstore.png';
+
 let settingsUnsubscribe = null;
 let settingsFormData = {};
 let showSettingsForm = false;
@@ -74,8 +77,8 @@ onDestroy(() => disableShortcut('togglePrivacyMode'));
         <Button
             icon
             medium
-            iconLight="/src/assets/icons/settings-light.svg"
-            iconDark="/src/assets/icons/settings-dark.svg"
+            iconLight={icons.settingsLight}
+            iconDark={icons.settingsDark}
             on:click={() => toggleSettingsForm(true)}
         >
             Settings
@@ -87,7 +90,7 @@ onDestroy(() => disableShortcut('togglePrivacyMode'));
                 rel="noopener noreferrer"
                 class="umami--click--chrome-webstore-link"
             >
-                <img src="/src/assets/images/chrome-webstore.png" alt="Available in the Chrome Webstore" />
+                <img src={ChromeWebStoreImage} alt="Available in the Chrome Webstore" />
             </a>
         {/if}
     </div>

diff --git a/src/features/changelogs/components/WhatsNew.svelte b/src/features/changelogs/components/WhatsNew.svelte
@@ -1,17 +1,21 @@
 <script>
 import { createEventDispatcher } from 'svelte';
 import { changelogs, setVersionIfHigher } from '../store';
+import { icons } from '@lib/icons';
 
 import Button from '@components/Button.svelte';
 
+import WhatsNewImageLight from '@assets/images/whats-new-empty-light.jpg';
+import WhatsNewImageDark from '@assets/images/whats-new-empty-dark.jpg';
+
 const dispatch = createEventDispatcher();
 
 $: screens = [
     ...$changelogs,
     {
         title: `You're now up to date!`,
-        imageLight: '/src/assets/images/whats-new-empty-light.jpg',
-        imageDark: '/src/assets/images/whats-new-empty-dark.jpg',
+        imageLight: WhatsNewImageLight,
+        imageDark: WhatsNewImageDark,
     },
 ];
 
@@ -43,8 +47,8 @@ const handleNext = () => (index = Math.min(index + 1, screens.length - 1));
         <Button
             icon
             small
-            iconLight="/src/assets/icons/chevron-left-light.svg"
-            iconDark="/src/assets/icons/chevron-left-dark.svg"
+            iconLight={icons.chevronLeftLight}
+            iconDark={icons.chevronLeftDark}
             class="PreviousButton"
             on:click={handlePrevious}
         >
@@ -62,8 +66,8 @@ const handleNext = () => (index = Math.min(index + 1, screens.length - 1));
         <Button
             icon
             small
-            iconLight="/src/assets/icons/chevron-right-light.svg"
-            iconDark="/src/assets/icons/chevron-right-dark.svg"
+            iconLight={icons.chevronRightLight}
+            iconDark={icons.chevronRightDark}
             class="NextButton"
             on:click={handleNext}
         >

diff --git a/src/features/changelogs/components/WhatsNewButton.svelte b/src/features/changelogs/components/WhatsNewButton.svelte
@@ -1,4 +1,5 @@
 <script>
+import { icons } from '@lib/icons';
 import Button from '@components/Button.svelte';
 
 export let pulse = false;
@@ -8,8 +9,8 @@ export let pulse = false;
     <Button
         icon
         medium
-        iconLight="/src/assets/icons/launch-light.svg"
-        iconDark="/src/assets/icons/launch-dark.svg"
+        iconLight={icons.launchLight}
+        iconDark={icons.launchDark}
         class="WhatsNewButton {pulse ? 'pulse' : ''}"
         on:click
     >

diff --git a/src/features/quick-links/icons.js b/src/features/quick-links/icons.js
@@ -0,0 +1,13 @@
+import gmail from '@assets/images/gmail.png';
+import meet from '@assets/images/meet.png';
+import drive from '@assets/images/drive.png';
+import calendar from '@assets/images/calendar.png';
+import photos from '@assets/images/photos.png';
+
+export const icons = {
+    gmail,
+    meet,
+    drive,
+    calendar,
+    photos,
+};
diff --git a/src/features/quick-links/settings/CustomUrlItem.svelte b/src/features/quick-links/settings/CustomUrlItem.svelte
@@ -2,6 +2,7 @@
 import { createEventDispatcher } from 'svelte';
 import { SHADOW_ITEM_MARKER_PROPERTY_NAME } from 'svelte-dnd-action';
 
+import { icons } from '@lib/icons';
 import { confirmation } from '@app/stores/confirmation';
 import Button from '@components/Button.svelte';
 
@@ -30,8 +31,8 @@ const handleRemove = async () => {
         <Button
             small
             icon
-            iconLight="/src/assets/icons/drag.svg"
-            iconDark="/src/assets/icons/drag.svg"
+            iconLight={icons.drag}
+            iconDark={icons.drag}
             class="CustomUrl_Action CustomUrl_Action-drag"
             type="button"
             tabindex="-1"
@@ -41,8 +42,8 @@ const handleRemove = async () => {
         <Button
             small
             icon
-            iconLight="/src/assets/icons/delete.svg"
-            iconDark="/src/assets/icons/delete.svg"
+            iconLight={icons.remove}
+            iconDark={icons.remove}
             class="CustomUrl_Action"
             type="button"
             on:click={handleRemove}

diff --git a/src/features/quick-links/settings/QuickLinksSettings.svelte b/src/features/quick-links/settings/QuickLinksSettings.svelte
@@ -3,18 +3,19 @@ import { createEventDispatcher } from 'svelte';
 
 import { getDefaultSettings } from '.';
 import { frequentLinksSupported } from '../store';
+import { icons } from '../icons';
 
 import Switch from '@components/Switch.svelte';
 import QuickLinksField from './QuickLinksField.svelte';
 
 export let data = getDefaultSettings();
 
 const builtInQuickLinks = [
-    { title: 'Gmail', url: 'https://mail.google.com/', icon: '/src/assets/images/gmail.png' },
-    { title: 'Meet', url: 'https://meet.google.com/', icon: '/src/assets/images/meet.png' },
-    { title: 'Drive', url: 'https://drive.google.com/', icon: '/src/assets/images/drive.png' },
-    { title: 'Calendar', url: 'https://calendar.google.com/', icon: '/src/assets/images/calendar.png' },
-    { title: 'Photos', url: 'https://photos.google.com/', icon: '/src/assets/images/photos.png' },
+    { title: 'Gmail', url: 'https://mail.google.com/', icon: icons.gmail },
+    { title: 'Meet', url: 'https://meet.google.com/', icon: icons.meet },
+    { title: 'Drive', url: 'https://drive.google.com/', icon: icons.drive },
+    { title: 'Calendar', url: 'https://calendar.google.com/', icon: icons.calendar },
+    { title: 'Photos', url: 'https://photos.google.com/', icon: icons.photos },
 ];
 
 const dispatch = createEventDispatcher();

diff --git a/src/features/search/components/SearchForm.svelte b/src/features/search/components/SearchForm.svelte
@@ -3,6 +3,7 @@ import { onMount, onDestroy } from 'svelte';
 import isEmpty from 'lodash/isEmpty';
 import orderBy from 'lodash/orderBy';
 
+import { icons } from '@lib/icons';
 import { enableShortcut, disableShortcut } from '@features/shortcuts';
 import { settings } from '@features/settings/store';
 import { tags } from '@features/tags/store';
@@ -55,8 +56,8 @@ onDestroy(() => disableShortcut('focusSearch'));
             icon
             disabled={!hasSearchFilters}
             data-tooltip="Clear search filters"
-            iconLight="/src/assets/icons/close-light.svg"
-            iconDark="/src/assets/icons/close-dark.svg"
+            iconLight={icons.closeLight}
+            iconDark={icons.closeDark}
             type="button"
             class="SearchClear"
             on:click={search.clear}

diff --git a/src/features/tags/settings/TagsSettings.svelte b/src/features/tags/settings/TagsSettings.svelte
@@ -3,6 +3,7 @@ import isEmpty from 'lodash/isEmpty';
 import orderBy from 'lodash/orderBy';
 
 import { tags } from '../store';
+import { icons } from '@lib/icons';
 import Button from '@components/Button.svelte';
 
 export let data = {};
@@ -25,8 +26,8 @@ const restoreTag = (tag) => {
                 <Button
                     medium
                     icon
-                    iconLight={tag.removed ? '/src/assets/icons/restore.svg' : '/src/assets/icons/delete.svg'}
-                    iconDark={tag.removed ? '/src/assets/icons/restore.svg' : '/src/assets/icons/delete.svg'}
+                    iconLight={tag.removed ? icons.restore : icons.remove}
+                    iconDark={tag.removed ? icons.restore : icons.remove}
                     type="button"
                     class="Button"
                     on:click={() => (tag.removed ? restoreTag(tag) : removeTag(tag))}

diff --git a/src/lib/icons.js b/src/lib/icons.js
@@ -0,0 +1,37 @@
+import chevronLeftDark from '@assets/icons/chevron-left-dark.svg';
+import chevronLeftLight from '@assets/icons/chevron-left-light.svg';
+import chevronRightDark from '@assets/icons/chevron-right-dark.svg';
+import chevronRightLight from '@assets/icons/chevron-right-light.svg';
+import closeDark from '@assets/icons/close-dark.svg';
+import closeLight from '@assets/icons/close-light.svg';
+import remove from '@assets/icons/delete.svg';
+import dots from '@assets/icons/dots.svg';
+import drag from '@assets/icons/drag.svg';
+import edit from '@assets/icons/edit.svg';
+import launchDark from '@assets/icons/launch-dark.svg';
+import launchLight from '@assets/icons/launch-light.svg';
+import refreshDark from '@assets/icons/refresh-dark.svg';
+import refreshLight from '@assets/icons/refresh-light.svg';
+import restore from '@assets/icons/restore.svg';
+import settingsDark from '@assets/icons/settings-dark.svg';
+import settingsLight from '@assets/icons/settings-light.svg';
+
+export const icons = {
+    chevronLeftDark,
+    chevronLeftLight,
+    chevronRightDark,
+    chevronRightLight,
+    closeDark,
+    closeLight,
+    remove,
+    dots,
+    drag,
+    edit,
+    launchDark,
+    launchLight,
+    refreshDark,
+    refreshLight,
+    restore,
+    settingsDark,
+    settingsLight,
+};
diff --git a/vite.config.mts b/vite.config.mts
@@ -5,6 +5,10 @@ import { svelte } from '@sveltejs/vite-plugin-svelte';
 export default defineConfig({
     plugins: [svelte()],
 
+    build: {
+        assetsInlineLimit: 0,
+    },
+
     resolve: {
         alias: {
             '@app': path.resolve(__dirname, 'src/app'),