Handling Assets

Assets are static resources that your application uses. In FSD, assets follow the same placement principles as code. Group them by use case, not by type, and keep them close to the components that use them.

警告

It’s a common practice to implement a custom assets segment for all static files, but this pattern is generally discouraged, as it violates FSD principles of high cohesion and locality of changes.

If you are interested in a more detailed explanation, you can check articles on Desegmentation and Slices and segments.

Slice-specific Assets

When an asset is only used by one page, widget, or feature, keep it inside that slice. This maintains encapsulation and makes it clear where the asset belongs:

• 文件夹pages/

  • 文件夹home/

    • 文件夹ui/

      • hero-image.jpg
      • HomePage.tsx
    • index.ts

If your UI has many static assets like images, you can create a subfolder in the ui segment:

• 文件夹pages/

  • 文件夹home/

    • 文件夹ui/

      • 文件夹previews/

        • cake.jpg
        • pizza.jpg
        • …
      • HomePage.tsx
    • index.ts

Non-UI Assets

Sometimes an asset is not part of the UI but is a crucial part of business logic. Consider this example:

• 文件夹features/

  • 文件夹billing/

    • 文件夹model/

      • invoice-template.pdf
      • create-invoice.ts
    • index.ts

Here, invoice-template.pdf is tightly coupled with the business logic in create-invoice.ts. In cases like this, it’s preferable to place the file in the model segment to maintain high cohesion and localize changes.

Shared Assets

If a static asset is used multiple times, you can move it to shared/ui, so it is accessible to every other part of the application.

• 文件夹shared/

  • 文件夹ui/

    • 文件夹placeholders/

      • cake.jpg
      • pizza.jpg
      • …

The same approach can be applied for static assets that are used by shared components:

• 文件夹shared/

  • 文件夹ui/

    • Dropdown.tsx
    • chevron.svg

Global Assets

Global assets include things like global stylesheets (such as a CSS reset) and fonts. The app layer is the right place for these files since they’re only used by the application entrypoint.

• 文件夹app/

  • 文件夹styles/

    • reset.css
    • global.css
  • main.ts

Public Folder

Most bundlers and frameworks provide a public folder at the root of your project. Files here are served as-is without processing.

Some build tools like Vite allow the public folder location to be changed, while others like Astro don’t have this option. If your build tool doesn’t support this change, that’s fine. The public folder is not part of the FSD structure and won’t cause naming collisions.

Summary

Asset Type	Location
Slice-specific assets	Inside the slice (e.g., pages/home/ui/)
Reusable icons and images	shared/ui/
Global styles	app/styles/
Fonts	app/fonts/, public/ or app/public
Static files, favicon	public/ or app/public

Follow the FSD principle: place assets where they are used, and move them to shared when there’s an actual need for reuse across slices.