fix: load app logo svgs with ?url

kiva · May 29, 2024 · feba00d · feba00d
1 parent 9241689
commit feba00d
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 21 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -73,6 +73,8 @@ module.exports = {
 		'import/no-extraneous-dependencies': ['error', {
 			optionalDependencies: ['test/unit/index.js']
 		}],
+		// allow unresolved imports for svg files with a ?url suffix
+		'import/no-unresolved': ['error', { ignore: ['\\.svg\\?url$'] }],
 		// allow files with only one named export
 		'import/prefer-default-export': 'off',
 		// allow debugger during development

diff --git a/src/App.vue b/src/App.vue
@@ -17,10 +17,10 @@ import webmanifest from '#src/manifest.webmanifest';
 import unbounceEventMixin from '#src/plugins/unbounce-event-mixin';
 import { metaGlobReader } from '#src/util/importHelpers';
 
-const faviconsGlob = import.meta.glob('#src/assets/images/favicons/*.*', { eager: true });
-const favicons = metaGlobReader(faviconsGlob, '#src/assets/images/favicons/');
-const fontsGlob = import.meta.glob('#src/assets/fonts/*.*', { eager: true, query: '?url' });
-const fonts = metaGlobReader(fontsGlob, '#src/assets/fonts/');
+const faviconsGlob = import.meta.glob('./assets/images/favicons/*.*', { eager: true });
+const favicons = metaGlobReader(faviconsGlob, './assets/images/favicons/');
+const fontsGlob = import.meta.glob('./assets/fonts/*.*', { eager: true, query: '?url' });
+const fonts = metaGlobReader(fontsGlob, './assets/fonts/');
 
 export default {
 	name: 'App',

diff --git a/src/assets/scss/global/fonts.scss b/src/assets/scss/global/fonts.scss
@@ -3,29 +3,29 @@
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
-	src: url("#src/assets/fonts/PostGrotesk-Medium.woff2") format('woff2');
+	src: url("static/fonts/PostGrotesk-Medium.woff2") format('woff2');
 }
 
 @font-face {
 	font-family: PostGrotesk;
 	font-weight: 400;
 	font-style: italic;
 	font-display: swap;
-	src: url("#src/assets/fonts/PostGrotesk-MediumItalic.woff2") format('woff2');
+	src: url("static/fonts/PostGrotesk-MediumItalic.woff2") format('woff2');
 }
 
 @font-face {
 	font-family: PostGrotesk;
 	font-weight: 300;
 	font-style: normal;
 	font-display: swap;
-	src: url("#src/assets/fonts/PostGrotesk-Book.woff2") format('woff2');
+	src: url("static/fonts/PostGrotesk-Book.woff2") format('woff2');
 }
 
 @font-face {
 	font-family: PostGrotesk;
 	font-weight: 300;
 	font-style: italic;
 	font-display: swap;
-	src: url("#src/assets/fonts/PostGrotesk-BookItalic.woff2") format('woff2');
+	src: url("static/fonts/PostGrotesk-BookItalic.woff2") format('woff2');
 }
diff --git a/src/components/WwwFrame/TheFooter.vue b/src/components/WwwFrame/TheFooter.vue
@@ -329,7 +329,7 @@
 								<img
 									class="tw-h-5 tw-mr-1"
 									style="width: 7.5rem;"
-									src="#src/assets/icons/app-store.svg?url"
+									:src="appStoreLogoUrl"
 									loading="lazy"
 									alt="Check out our new app on the App Store"
 								>
@@ -345,7 +345,7 @@
 								<img
 									class="tw-h-5"
 									style="width: 8.4375rem;"
-									src="#src/assets/icons/play-store.svg?url"
+									:src="playStoreLogoUrl"
 									loading="lazy"
 									alt="Check out our new app on the Play Store"
 								>
@@ -686,7 +686,7 @@
 									>
 										<img
 											class="download-app-ios tw-h-5 tw-mr-1"
-											src="#src/assets/icons/app-store.svg?url"
+											:src="appStoreLogoUrl"
 											loading="lazy"
 											alt="Check out our new app on the App Store"
 										>
@@ -702,7 +702,7 @@
 									>
 										<img
 											class="download-app-android tw-h-5"
-											src="#src/assets/icons/play-store.svg?url"
+											:src="playStoreLogoUrl"
 											loading="lazy"
 											alt="Check out our new app on the Play Store"
 										>
@@ -842,6 +842,8 @@ import { mdiFacebook, mdiInstagram, mdiTwitter } from '@mdi/js';
 import KvGrid from '@kiva/kv-components/vue/KvGrid';
 import KvPageContainer from '@kiva/kv-components/vue/KvPageContainer';
 import KvMaterialIcon from '@kiva/kv-components/vue/KvMaterialIcon';
+import appStoreLogoUrl from '#src/assets/icons/app-store.svg?url';
+import playStoreLogoUrl from '#src/assets/icons/play-store.svg?url';
 
 export default {
 	name: 'TheFooter',
@@ -873,7 +875,9 @@ export default {
 			privacyUrl: '/legal/privacy',
 			termsUrl: '/legal/terms',
 			appStoreUrl: 'https://apps.apple.com/app/id1453093374',
+			appStoreLogoUrl,
 			playStoreUrl: 'https://play.google.com/store/apps/details?id=org.kiva.lending',
+			playStoreLogoUrl,
 			mdiFacebook,
 			mdiInstagram,
 			mdiTwitter

diff --git a/vite.config.js b/vite.config.js
@@ -24,22 +24,15 @@ const gitRevisionPlugin = new GitRevisionPlugin({
 const resolve = dir => path.resolve(path.dirname(fileURLToPath(import.meta.url)), dir);
 
 // asset regular expressions
-const binaryRegex = /binary\/.+\.bin/;
 const fontsRegex = /fonts\/.+\.(woff2?|eot|ttf|otf|svg)/;
-const iconsRegex = /icons\/(sprite\/.+|app-store|play-store)\.svg/;
 const imagesRegex = /images\/.+\.(png|jpe?g|gif|webp|avif|svg|ico)/;
 const mediaRegex = /media\/.+\.(mp4|webm|ogg|mp3|wav|flac|aac)/;
-const wasmRegex = /wasm\/.+\.wasm/;
 
 // https://vitejs.dev/config/
 export default defineConfig({
 	assetsInclude: [
-		binaryRegex,
-		fontsRegex,
-		iconsRegex,
-		imagesRegex,
-		mediaRegex,
-		wasmRegex,
+		'**/*.bin',
+		'**/*.wasm',
 	],
 	base: '/static/',
 	build: {
@@ -115,6 +108,8 @@ export default defineConfig({
 		alias: {
 			// alias src directory
 			'#src': resolve('src'),
+			// alias node_modules directory
+			'#node_modules': resolve('node_modules'),
 			// alias promise module to handle timesync calling require('promise')
 			promise: resolve('build/promise.js'),
 			// required for src/components/Contentful/DynamicRichText.vue