next-component-images

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
  • Requirements
  • Installation
  • Usage
    • Raster Images
    • SVG Images
• Options
  • Specifying inline images size limit
  • Specifying path prefix
  • Configures SVGO
• Recipes
  • Use with other libraries for Next.js
  • Styling SVG
• Contributing to next-component-images
  • Git branch naming convention
• License

Features

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 or require )
  • 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.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 in next.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 specify width , 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.