assetize

Assetify 🎨

A versatile assets class builder for your project!

Introduction

Tired of manually importing assets like public/icons/myicon.ico in your project? Say goodbye to the hassle with Assetify! This handy tool automates asset imports, making your workflow smoother and more efficient.

To generate the assets file, you need to run the assetize:build command. Remember to do this each time you make changes to files in the root assets folder.

Example

// Import Assetify
import MyAssets from "./assetize.gen";

export default function Home() {
  return (
    <Image
      src={MyAssets.icons.vercel.path} // Access assets
      alt="Vercel Logo"
      width={202}
      height={206}
    />
  );
}

Install

npm install assetize

@antfu - use ni instead of package mangers, ni

npx assetize generate

Generates a default config file in your project's root directory. you can generate yourself by importing defineAssetizeConfig from assetize and passing it your config. Config file name must be assetize.config.{js,ts,mts,mjs}.

import { defineAssetizeConfig } from "assetize";

export default defineAssetizeConfig({
  codebase: "remix",
});

It will create the assets directory in your project's root directory.

npx assetize init

Build

npx assetize build

Builds your assets according to your config file.

Issues

Submit your issues to the assetize repository. 🤖

Support

• [x] Remix
• [x] Next JS
• [x] Svelte
• [ ] Vue
• [x] Vite
• [x] Nuxt
• [x] Astro
• [ ] Solid
• [x] Preact
• [ ] Solid

Pubic Requested Assets folder

• Currently

  • icons
  • images
  • videos
  • svgs
  • fonts

• Todo add here

  • upcoming

License

MIT

Contributing

See contributing guide

Star me on GitHub 🌟