Merge pull request #123 from AppFlowy-IO/sprite_image

chore: use sprite image

Author: appflowy

.gitignore

@@ -43,3 +43,4 @@ cypress/videos
 
 .idea
 .claude
+.serena

components/shared/scroll-icons.tsx

@@ -49,35 +49,45 @@ function ScrollIcons() {
       <div className={'scroll-icons-title'}>Trusted by teams and individuals from</div>
       <div ref={scrollRef} className={'developers-logos'}>
         <div className={'logo-wrapper'}>
-          {logos.map((item, index) => (
-            <div
-              key={index}
-              style={{
-                display: 'flex',
-                width: '220px',
-                height: '100px',
-                padding: '30px 20px',
-                flexDirection: 'column',
-                justifyContent: 'center',
-                alignItems: 'center',
-                gap: '10px',
-                borderRadius: '79px',
-                background: 'rgba(245, 245, 250, 0.45)',
-                color: 'var(--color-text)',
-              }}
-              className={'logo opacity-100'}
-            >
-              <img
-                src={item.logo}
-                className='opacity-60'
-                alt={item.name}
+          {logos.map((item, index) => {
+            // Extract logo name from path (e.g., '/images/google.svg' -> 'google')
+            const logoName = item.logo.replace('/images/', '').replace('.svg', '');
+
+            return (
+              <div
+                key={index}
                 style={{
-                  filter:
-                    'brightness(0) saturate(100%) invert(7%) sepia(32%) saturate(2387%) hue-rotate(264deg) brightness(96%) contrast(104%)',
+                  display: 'flex',
+                  width: '220px',
+                  height: '100px',
+                  padding: '30px 20px',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  gap: '10px',
+                  borderRadius: '79px',
+                  background: 'rgba(245, 245, 250, 0.45)',
+                  color: 'var(--color-text)',
                 }}
-              />
-            </div>
-          ))}
+                className={'logo opacity-100'}
+              >
+                <svg
+                  className='opacity-60'
+                  style={{
+                    width: '100%',
+                    height: '100%',
+                    maxWidth: '160px',
+                    maxHeight: '50px',
+                    filter:
+                      'brightness(0) saturate(100%) invert(7%) sepia(32%) saturate(2387%) hue-rotate(264deg) brightness(96%) contrast(104%)',
+                  }}
+                  aria-label={item.name}
+                >
+                  <use href={`/images/company-logos-sprite.svg#logo-${logoName}`} />
+                </svg>
+              </div>
+            );
+          })}
         </div>
       </div>
     </div>

dev.env

@@ -0,0 +1,4 @@
+ENVIRONMENT=test
+NEXT_PUBLIC_API_KEY=REQUIRED
+NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
+NEXT_PUBLIC_SITE_BASE_URL=http://localhost:3000

next.config.mjs

@@ -121,6 +121,16 @@ const nextConfig = {
         source: '/(.*)',
         headers: securityHeaders,
       },
+      {
+        // Cache SVG sprite sheet for 1 year (immutable)
+        source: '/images/company-logos-sprite.svg',
+        headers: [
+          {
+            key: 'Cache-Control',
+            value: 'public, max-age=31536000, immutable',
+          },
+        ],
+      },
       {
         source: '/:all*(docx)',
         headers: [

package.json

@@ -11,7 +11,8 @@
     "format": "prettier \"**/*.{css,js,json,jsx,ts,tsx}\"",
     "test": "NODE_ENV=test cypress open",
     "test:headless": "NODE_ENV=test cypress run --browser chrome",
-    "generate-sitemap": "node scripts/generate-sitemap.js"
+    "generate-sitemap": "node scripts/generate-sitemap.js",
+    "generate-sprite": "node scripts/generate-sprite.js"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.8",