Source assets - Kimi UI

Asset Management

Learn how to manage and use assets like images, icons, and other static resources in your application

Directory Structure

Assets are organized in a specific structure to maintain consistency across the project

public/
├── assets/
│   ├── background/     # Background images
│   ├── icons/          # Common icons
│   ├── illustrations/  # Illustrations and graphics
│   └── images/         # General images
├── fonts/              # Custom fonts
└── logo/               # Logo variations

src/assets/
├── icons/              # JSX/TSX icon components
├── illustrations/      # Importable illustration components
└── images/             # Dynamic/processed images

Using Static Assets

How to reference static assets from your public directory

In Next.js projects

import Image from 'next/image';

// Example for Next.js Image component
function HeroSection() {
  return (
    <Box>
      <Image
        src="/assets/illustrations/hero.svg"
        alt="Hero Illustration"
        width={600}
        height={400}
        priority
      />
      
      {/* For background images in CSS */}
      <Box
        sx={{
          backgroundImage: 'url(/assets/background/overlay.jpg)',
          backgroundSize: 'cover',
          height: 400,
        }}
      />
    </Box>
  );
}

In Vite.js projects

import heroIllustration from '/assets/illustrations/hero.svg';

function HeroSection() {
  return (
    <Box>
      <img src={heroIllustration} alt="Hero Illustration" />
      
      {/* For background images in CSS */}
      <Box
        sx={{
          backgroundImage: 'url(/assets/background/overlay.jpg)',
          backgroundSize: 'cover',
          height: 400,
        }}
      />
    </Box>
  );
}

Imported Assets

Assets can be imported directly in your components

// Importing images directly in components
import logoImage from 'src/assets/images/logo.png';
import { SuccessIllustration } from 'src/assets/illustrations';

function BrandLogo() {
  return (
    <Stack spacing={2}>
      <img src={logoImage} alt="Logo" width={120} />
      <SuccessIllustration sx={{ width: 200, height: 200 }} />
    </Stack>
  );
}

Iconify Component

Use the Iconify component to access thousands of icons

import { Iconify } from 'src/components/iconify';

function IconExample() {
  return (
    <Stack direction="row" spacing={2}>
      {/* Basic usage */}
      <Iconify icon="eva:heart-fill" />
      
      {/* With custom size and color */}
      <Iconify 
        icon="eva:shopping-cart-outline" 
        width={32} 
        sx={{ color: 'primary.main' }} 
      />
      
      {/* Icon with styling */}
      <Iconify 
        icon="eva:clock-fill" 
        sx={{ 
          width: 24, 
          height: 24,
          color: 'warning.main',
          filter: 'drop-shadow(2px 2px 2px rgba(0,0,0,0.2))'
        }} 
      />
    </Stack>
  );
}

Best Practices

Guidelines for managing assets efficiently

Optimize images before adding them to your project (compress, resize to appropriate dimensions)
Use SVG for icons and simple illustrations whenever possible
Prefer Iconify over importing Material UI icons to reduce bundle size
Lazy load non-critical images to improve initial page load performance
Use WebP format for photos when supported by browser targets

References

Useful resources for asset management