Next.js + Raster Images + SVG Images as React Component
Import raster images and SVG as React Component in Next.js.
Table of Contents
- Table of Contents
- Features
- Quick Start
- Options
- Recipes
- Contributing to next-component-images
- License
Features
import photoImage from "./photo.jpg";import LogoImage from "./logo.svg"; <div> <img = /> <LogoImage ="230" ="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
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.jsconst withComponentImages = ; moduleexports = ;
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"); <div> <img = /> </div>;
SVG Images
Also, you can import SVG images as React Component.
import LogoImage from "./logo.svg";// or: const LogoImage = require("./logo.svg"); <div> <LogoImage ="230" ="140" /> </div>;
Options
You can set options in next.config.js
file.
// next.config.jsconst withComponentImages = ; moduleexports = ;
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.jsconst withTypescript = ;const withComponentImages = ; moduleexports =
Styling SVG
Imported SVG is React SVGFactory, so you can specify width
, height
, and fill
attributes.
import LogoImage from "./logo.svg"; <div> <LogoImage ="#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.