Webpack plugin helps to create PNG sprite image and coordinate mapping file (manifest.json
)
Suppose you want a manifest.json file in src/asset/manifest.json
. You can import it into any place without creating it, plugin will handle that
import React from "react";
...
import { getIcon } from ...; // outputDir + getIcon.js
const example = getIcon("example_example-small.png"); // iconName = parent folder + "_" + icon name
return (
<YourComponent>
)
webpack.config.js
const SpritePNG = require("sprite-png-plugin");
...
...
module.exports = {
...,
module: {
...,
plugins: [
...,
new SpritePNG({
...options
})
...
],
...
}
}
Option | Type | Required | Default | Description |
---|---|---|---|---|
outputDir | String |
No | ./ | Output directory for sprite sheet data |
excludes | RegExp | Array |
No | undefined |
Reg to filter the images for sprite |
entry | String | RegExp | Array<String |RegExp> |
No | [] | images entry |