This package has been deprecated and recommend to use next-image-element instead.
Import raster images and SVG as React Component in Next.js.
- Table of Contents
- Features
- Quick Start
- Options
- Recipes
- Contributing to next-component-images
- License
import photoImage from "./photo.jpg";
import LogoImage from "./logo.svg";
export default () => (
<div>
<img src={photoImage} />
<LogoImage width="230" height="140" />
</div>
);
- Import raster images as inline images using JavaScript Module syntax (
import
orrequire
)- Supports PNG (.png), JPEG (.jpg/.jpeg), and GIF (.gif) images
- Import an image path when the image exceeds a specified size limit
- Import SVG images as React SVG Component
- You can implement styling with CSS or others
- Next.js version 5.0.0 or higher
- npm or Yarn
$ npm install --save next-component-images
If you are using Yarn, use the following command.
$ yarn add next-component-images
At first, setup your Next.js settings.
// next.config.js
const withComponentImages = require("next-component-images");
module.exports = withComponentImages();
You can import raster images as inline images or get image paths.
import photo from "./photo.jpg";
// or: const photo = require("./photo.jpg");
export default () => (
<div>
<img src={photo} />
</div>
);
Also, you can import SVG images as React Component.
import LogoImage from "./logo.svg";
// or: const LogoImage = require("./logo.svg");
export default () => (
<div>
<LogoImage width="230" height="140" />
</div>
);
You can set options in next.config.js
file.
// next.config.js
const withComponentImages = require("next-component-images");
module.exports = withComponentImages({
// Options are here.
});
inlineSizeLimit
option is possible to specify inline images size limit. Images exceeding this size, imports only image paths.
A default value is 8192
.
pathPrefix
option is possible to specify path prefix. A default value is an empty string ""
.
svgoOptions
option is possible to specify options for SVGO.
// next.config.js
const withTypescript = require("@zeit/next-typescript");
const withComponentImages = require("next-component-images");
module.exports = withTypescript(withComponentImages({
// Options are here.
});
Imported SVG is React SVGFactory, so you can specify width
, height
, and fill
attributes.
import LogoImage from "./logo.svg";
export default () => (
<div>
<LogoImage fill="#f00" />
</div>
);
Bug reports and pull requests are welcome on GitHub at https://github.com/jagaapple/next-component-images. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.
Please read Contributing Guidelines before development and contributing.
The library is available as open source under the terms of the MIT License.
Copyright 2018 Jaga Apple. All rights reserved.