Refactoring for Scalability: Organizing Asset Libraries in Svelte Projects

As projects grow, the initial simplicity of a file structure often becomes a bottleneck. In the EstreFlores/svgl project, we recently reached a turning point where managing icons alongside our component logic was becoming cumbersome. To maintain long-term scalability, we initiated a structural refactor to decouple our assets from the core application logic.

The Problem: The 'Everything Folder'

At the start of the project, icons and UI components lived in the same directory. It seemed convenient at first, but as the icon library grew, the source tree became cluttered. Navigating to a specific component meant scrolling through dozens of SVG files, increasing the cognitive load for the team and complicating our build imports.

The Shift to Modular Organization

To improve clarity, we moved all iconography into a dedicated /icons directory. This pattern treats icons as a specialized asset library rather than generic source code. By isolating these resources, we achieve a cleaner separation of concerns:

• Components: Focus on state, logic, and layout.
• Icons: Focus on visual assets and raw vector markup.

Implementation Pattern

By moving icons to a standalone folder, we can create a more predictable import pattern. Instead of relative paths that drill deep into the project tree, we can now structure our access like this:

// Before: import Icon from '../../../../assets/icons/UserIcon.svelte'
// After: 
import UserIcon from '$lib/icons/UserIcon.svelte';

// Usage within a component
<button>
  <UserIcon size="24" />
  Profile
</button>

This refactor makes it trivial to add new icons without bloating our primary component logic folders. It also prepares the project for potential automation, such as generating an index file that exports all icons from a single entry point.

Scaling for the Future

Think of your file structure like a toolbox. When you have five tools, keeping them in one pile is fine. When you have fifty, you need trays and compartments. By introducing the /icons folder, we are simply adding the right compartment to our toolbox.

The Takeaway

Don't wait for your file system to become a bottleneck. If your assets are living alongside your business logic, consider moving them to a dedicated folder. Start by isolating one category of assets and updating your import paths—your future self will thank you for the extra breathing room.

Generated with Gitvlg.com