README
💀 This package has been deprecated. This package has been deprecated and recommend to use @svgr/webpack instead.
react-image-element-loader
🖼️ The webpack loader to import React element and file path from images. 📦
import { element as LogoSVG } from "./logo.svg";
import photoImagePath from "./photo.jpg";
export default () => (
<div>
<LogoSVG width="230" height="140" fill="black" />
<img src={photoImagePath} alt="flower" />
</div>
);
Table of Contents
- Table of Contents
- Features
- Quick Start
- Usage
- Options
- Recipes
- Contributing to react-image-element-loader
- License
Features
FEATURES | WHAT YOU CAN DO |
---|---|
⚛️ Designed for JSX | Import images as React element like <MySVG fill={color} /> |
✨ Exported as plain image | Import image paths or as inline image (Base64) |
🎩 Type Safe | You can use with TypeScript |
Quick Start
Requirements
- npm or Yarn
- webpack 4.0.0 or higher
Installation
$ npm install -D react-image-element-loader
If you are using Yarn, use the following command.
$ yarn add -D react-image-element-loader
Setup
Firstly setup your webpack settings.
// webpack.config.js
module.exports = {
entry: path.join(__dirname, "src", "index.jsx"),
...
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: "react-image-element-loader",
exclude: /node_modules/,
},
...
],
},
...
};
Also you can pass a module to "loader" property instead.
// webpack.config.js
const reactImageElementLoader = require("react-image-element-loader");
...
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: reactImageElementLoader,
exclude: /node_modules/,
},
Usage
Gets image path
You can import image paths (URI).
import logoImagePath from "./logo.svg";
// or: const logoImagePath = require("./logo.svg").default;
import photoImagePath from "./photo.jpg";
export default () => (
<div>
<img src={logoImagePath} alt="logo" />
<img src={photoImagePath} alt="photo" />
</div>
);
Generally, the path is an actual image URL (through file-loader). When you
use sizeLimit
option and the image is smaller than sizeLimit
, the path will be converted to inline image (Base64 encoded URL).
For more detail, see sizeLimit
option.
Gets React element
You can import images as React elements like <img />
. It's possible to pass props such as HTMLAttributes, but src
will be ignored.
import { element as LogoSVG } from "./logo.svg";
// or: const LogoSVG = require("./logo.svg").element;
import { element as PhotoImage } from "./photo.jpg";
export default () => (
<div>
<LogoSVG fill="black" />
<PhotoImage />
<PhotoImage width="100" alt="flower" />
{/* overwriting `src` will be ignored. */}
<PhotoImage src="other-image.jpg" />
</div>
);
react-image-element-loader supports PNG (.png), JPEG (.jpg), GIF (.gif), and SVG (.svg).
Options
sizeLimit
Type: Number
Default: undefined
A number specifying the maximum size of an image file in bytes.
If the image is greater than the limit or sizeLimit
option specified undefined
, path
will be an actual URL. In that case,
file-loader is used by default and all query parameters are passed to it.
Using an alternative to file-loader is enabled via the fallback
option.
If the image is smaller than the limit, path
will be a Base64 encoded URL.
// webpack.config.js
{
loader: "react-image-element-loader",
options: {
sizeLimit: 10240,
},
}
The limit can be specified via loader options and defaults to no limit.
jsx
Type: Boolean
Default: false
Specifies to enable to output JSX codes instead of React.createElement
function.
// webpack.config.js
{
loader: "react-image-element-loader",
options: {
jsx: true,
},
}
fallback
Type: String
Default: file-loader
Specifies an alternative loader to use when a target image file's size exceeds sizeLimit
option.
// webpack.config.js
{
loader: "react-image-element-loader",
options: {
fallback: "responsive-loader",
},
}
The fallback loader will receive the same configuration options as url-loader.
For example, to set the quality option of a responsive-loader above use:
{
loader: "react-image-element-loader",
options: {
fallback: {
loader: "responsive-loader",
options: {
quality: 85,
},
},
},
}
Recipes
Styling SVG
If you import SVG images as React element, you can specify width
, height
, and fill
attributes. So you can give styles
for SVG using variables.
import { element as LogoSVG } from "./logo.svg";
export default (props) => (
<div>
<LogoSVG fill={props.color} />
</div>
);
In this case, the SVG should not include child elements have fill
.
<svg xmlns="http://www.w3.org/2000/svg" width="62" height="58">
<path fill="#000" d="M31 3.708L4.093 23.258l10.277 31.63h33.26l10.277-31.63L31 3.707z"/>
</svg>
Enables type definitions for TypeScript
If you want to enable type definitions for TypeScript, you should add "react-image-element-loader"
to your tsconfig.json
file.
{
"compilerOptions": {
"types": [
"react-image-element-loader"
]
}
}
Contributing to react-image-element-loader
Bug reports and pull requests are welcome on GitHub at https://github.com/jagaapple/react-image-element-loader. 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 2021 Jaga Apple. All rights reserved.