Next.js + Raster Images + SVG Images as React Component
Import raster images and SVG as React Component in Next.js.
Table of Contents
- Requirements - Installation - Usage
- [Raster Images](#raster-images)
- [SVG Images](#svg-images)
- Specifying inline images size limit
- Specifying path prefix
- Configures SVGO
- Use with other libraries for Next.js
- Styling SVG
- Git branch naming conventionFeatures
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
)
- Import an image path when the image exceeds a specified size limit
- Import SVG images as React SVG Component
Quick Start
Requirements
- Next.js version 5.0.0 or higher
- npm or Yarn
Installation
$ npm install --save next-component-images
If you are using Yarn, use the following command.
$ yarn add next-component-images
Usage
At first, setup your Next.js settings.// next.config.js
const withComponentImages = require("next-component-images");
module.exports = withComponentImages();
Raster Images
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>
);
SVG Images
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>
);
Options
You can set options innext.config.js
file.// next.config.js
const withComponentImages = require("next-component-images");
module.exports = withComponentImages({
// Options are here.
});
Specifying inline images size limit
inlineSizeLimit
option is possible to specify inline images size limit. Images exceeding this size, imports only image paths.
A default value is 8192
.Specifying path prefix
pathPrefix
option is possible to specify path prefix. A default value is an empty string ""
.Configures SVGO
svgoOptions
option is possible to specify options for SVGO.Recipes
Use with other libraries for Next.js
// next.config.js
const withTypescript = require("@zeit/next-typescript");
const withComponentImages = require("next-component-images");
module.exports = withTypescript(withComponentImages({
// Options are here.
});
Styling SVG
Imported SVG is React SVGFactory, so you can specifywidth
, height
, and fill
attributes.import LogoImage from "./logo.svg";
export default () => (
<div>
<LogoImage fill="#f00" />
</div>
);
Contributing to next-component-images
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.
License
The library is available as open source under the terms of the MIT License.Copyright 2018 Jaga Apple. All rights reserved.