Assets Documentation

Overview

The assets directory (src/assets/) contains static files used throughout the application including fonts, images, and other media assets.

Directory Structure

src/assets/
├── fonts/          # Custom font files
├── images/         # Image assets (PNG, JPG, SVG, etc.)
└── index.ts        # Asset exports barrel file

Fonts (assets/fonts/)

Custom font files for the application.

Current Fonts

Implementation: Fonts are loaded via CSS in src/styles/globals.css using @font-face declarations or imported through Next.js font optimization.

Usage Pattern:

// Tailwind config reference
tailwind.config.ts
{
  theme: {
    fontFamily: {
      sans: ['HowdenFont', 'system-ui', 'sans-serif'],
    }
  }
}

Images (assets/images/)

Image assets for the application.

Organization

Images should be organized by purpose:

images/
├── logos/          # Company and provider logos
├── icons/          # Custom icon images
├── backgrounds/    # Background images
└── illustrations/  # Empty state and decorative images

Current State: Empty directory - images may be loaded from external sources or CDN.

Usage Patterns:

1. Static Import (Recommended):

import companyLogo from '@/assets/images/logos/company.png';
 
<Image src={companyLogo} alt="Company Logo" />

2. Public Directory (for static files):

// Files in public/ directory
<Image src="/images/logo.png" alt="Logo" width={200} height={50} />

3. External URLs:

<Image 
  src="https://cdn.example.com/image.png" 
  alt="External Image"
  width={200}
  height={50}
/>

Barrel Export (assets/index.ts)

Centralized exports for clean imports:

// src/assets/index.ts
export { default as HowdenLogo } from './images/logos/howden.png';
// Export other assets as needed

Usage:

import { HowdenLogo } from '@/assets';

Best Practices

Font Optimization

1. Use Next.js Font Optimization:

import localFont from 'next/font/local';
 
const howdenFont = localFont({
  src: [
    {
      path: './fonts/Howden-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: './fonts/Howden-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
  ],
  variable: '--font-howden',
});

2. Font Loading Strategy:
   • Use font-display: swap to prevent FOIT (Flash of Invisible Text)
   • Preload critical fonts in _document.tsx
   • Use subset fonts when possible

Image Optimization

1. Format Selection:

   • Use WebP for photos (better compression)
   • Use SVG for logos and icons
   • Use PNG for images requiring transparency

2. Next.js Image Component:

import Image from 'next/image';
 
<Image
  src="/images/photo.jpg"
  alt="Description"
  width={800}
  height={600}
  priority  // For above-the-fold images
  placeholder="blur"  // Show blur placeholder while loading
/>

3. Responsive Images:

<Image
  src="/images/photo.jpg"
  alt="Description"
  fill  // Fill container
  sizes="(max-width: 768px) 100vw, 50vw"
/>

Asset Management

1. Naming Convention:

   • Use kebab-case: company-logo.png
   • Include dimensions if relevant: banner-1920x1080.jpg
   • Version assets when updating: logo-v2.png

2. Directory Organization:

   assets/
   ├── fonts/
   │   ├── Howden-Regular.woff2
   │   └── Howden-Bold.woff2
   └── images/
       ├── logos/
       │   ├── howden-logo.svg
       │   └── partner-logo.png
       ├── icons/
       │   └── custom-icon.svg
       └── backgrounds/
           └── hero-bg.jpg

3. Size Optimization:

   • Compress images before adding (use tools like ImageOptim, TinyPNG)
   • Use appropriate dimensions (don’t use 4000px images for 400px displays)
   • Consider using a CDN for large media files

Adding New Assets

Fonts

1. Add font files to assets/fonts/
2. Update src/styles/globals.css:

@font-face {
  font-family: 'NewFont';
  src: url('/assets/fonts/NewFont-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

3. Update tailwind.config.ts:

fontFamily: {
  sans: ['NewFont', 'system-ui', 'sans-serif'],
}

Images

1. Add image to appropriate subdirectory
2. Export from index.ts if using barrel pattern:

export { default as NewImage } from './images/category/new-image.png';

3. Use in components:

import { NewImage } from '@/assets';
// or
import NewImage from '@/assets/images/category/new-image.png';

Related Documentation

• Next.js Images 
• Next.js Font Optimization 
• Web Font Loading