I Was Tired of Manually Managing Assets in React Native, So I Built assets-toolkit

Shaik Mukthahar — Fri, 24 Jul 2026 10:37:33 +0000

I Built `assets-toolkit` Because Asset Management Shouldn't Be Manual

Every frontend project starts small.

A logo, A few icons, some images, maybe a custom font or an animation. Managing assets manually doesn't feel like a problem, until the project grows.

What was once a handful of files becomes hundreds of assets spread across multiple folders.

assets/
├── images/
├── icons/
├── svg/
├── fonts/
├── audio/
├── video/
└── lottie/

Everything still looks organized.

But then the real work begins.

The Hidden Problem

Every time someone adds a new asset, someone also has to update the asset registry.

export const images = {
  logo: require("../assets/images/logo.png"),
  profile: require("../assets/images/profile.png"),
  home: require("../assets/images/home.png"),
};

At first, this isn't a big deal.

But as the project grows:

Someone forgets to add the new asset.
Someone renames a file and breaks imports.
Someone accidentally commits duplicate images.
Someone adds filenames with spaces or special characters.
Merge conflicts become common because everyone edits the same asset file.

None of these problems are difficult.

They're just repetitive.

And repetitive work should be automated.

Why I Built `assets-toolkit`

After running into these problems across multiple projects, I decided to build a tool that would handle asset management for me.

Instead of manually maintaining asset files, I wanted a single command that could scan my project and generate everything automatically.

npx assets-toolkit generate

That's exactly what assets-toolkit does.

It scans your assets, validates them, detects duplicates, and generates a clean, type-safe asset map that you can import throughout your application.

It works with:

React Native
Expo
React
Next.js
Vite

Before

Manually importing assets everywhere:

import logo from "../assets/images/logo.png";
import profile from "../assets/images/profile.png";
import searchIcon from "../assets/icons/search.svg";

Or maintaining large asset registry files by hand:

export const images = {
  logo: require("../assets/images/logo.png"),
  profile: require("../assets/images/profile.png"),
  // ...hundreds more
};

After

Generate everything automatically:

npx assets-toolkit generate

Then simply use:

import { Assets } from "./generated-assets";

const logo = Assets.images.logo;
const profile = Assets.images.profile;
const searchIcon = Assets.svg.icons.search;

No manual imports.

No handwritten asset registry.

No repetitive maintenance.

More Than Just Code Generation

While building the package, I realized asset management involves more than generating imports.

Projects also suffer from duplicate files, invalid filenames, oversized assets, and inconsistent folder structures.

That's why I added additional CLI commands.

Generate typed asset maps

npx assets-toolkit generate

Validate assets and detect common issues

npx assets-toolkit doctor

Automatically fix invalid filenames

npx assets-toolkit doctor --fix

View project asset reports

npx assets-toolkit reports

Clean generated files and cache

npx assets-toolkit clean

Features

🚀 Generate type-safe asset maps
📁 Preserve nested folder structures
🔍 Detect duplicate assets
🛡️ Validate filenames before they cause build issues
📊 Generate useful asset reports
♻️ Clean generated files with one command
📦 Supports images, SVGs, fonts, audio, video, and Lottie files
⚡ Works with React Native, Expo, React, Next.js, and Vite

Installation

npm install --save-dev assets-toolkit

Generate your asset map:

npx assets-toolkit generate

Why I Open-Sourced It

This package started as a tool I built to solve my own workflow problems.

After using it across multiple projects, I realized many developers deal with the same repetitive asset management tasks.

Instead of solving the same problem over and over again, I decided to publish it as my first npm package so others could benefit from it too.

It's still in its early stages, and I'm actively improving it based on real-world feedback.

I'd Love Your Feedback

If you work with React Native, Expo, React, Next.js, or Vite, I'd love for you to try it out.

If you have ideas, feature requests, or find a bug, please let me know.

Your feedback will help shape future releases.

📦 NPM Package: https://www.npmjs.com/package/assets-toolkit

⭐ GitHub Repository: (Add your GitHub repository link here.)

Thanks for reading, and happy coding! 🚀

DEV Community: Shaik Mukthahar