react_asset_gen
v1.0.8
Published
Best Way to Import Assets in ReactJS ๐
Downloads
6
Maintainers
Readme
react_asset_gen
Inspired by flutter_gen
import { IMAGES } from "../assets/react_asset_gen";
return <img src={IMAGES.example_svg} alt="Example" />;
react_asset_gen
is a command-line interface (CLI) tool designed to streamline the process of managing and importing static image assets in React projects. It automatically scans your src/assets
folder, identifies all image files, and generates a JavaScript module that exports these images in an easily accessible object format.
Table of Contents
๐ Features
- Automated Image Exports: Automatically generates an export file for image assets found in your project's
src/assets
directory. - Support for Multiple Formats: Handles
.png
,.jpg
,.jpeg
,.gif
, and.svg
files. - Simplified Image Importing: Allows you to import all your images from a single file, reducing the boilerplate code in your React components.
๐ฆ Installation
You can install react_asset_gen
via npm or use it directly with npx:
npm install -g react_asset_gen
Alternatively:
npx react_asset_gen
โ๏ธ Example & Usage
Initial Setup
Before running react_asset_gen
, ensure you have created an assets
folder inside your src
directory (src/assets
) and placed your static image files there. This setup is necessary for the tool to locate and process the images.
To use react_asset_gen
, navigate to the root of your React project and run:
npx react_asset_gen
This command will generate a react_asset_gen.js
file within your src/assets
directory that might look like this:
// react_asset_gen.js
import example_svg from "./example.svg";
export const IMAGES = {
example_svg,
};
You can now import and use your images directly in your React components with ease:
import React from "react";
import { IMAGES } from "../assets/react_asset_gen";
function MyComponent() {
return <img src={IMAGES.example_svg} alt="Example" />;
}
export default MyComponent;
๐ License
Distributed under the MIT License. See LICENSE
file for more information.
๐ง Contact
- Project Home: https://github.com/yahyaparvar/react_asset_gen
- Developer: Yahya Parvar - [email protected]
Feel free to reach out with questions, issues, or feature requests. Thank you for exploring react_asset_gen
!