# @icoset/icoset-webpack-plugin

> Use Webpack + Icoset to build svg's dynamically into your outputed bundle.

Latest version **1.0.2** (published 2023-05-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @icoset/icoset-webpack-plugin
pnpm add @icoset/icoset-webpack-plugin
yarn add @icoset/icoset-webpack-plugin
bun add @icoset/icoset-webpack-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-05-18 |
| First published | 2018-10-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 6.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | @geoctrl |
| Maintainers | geoctrl |

## Links

- npm: https://www.npmjs.com/package/@icoset/icoset-webpack-plugin
- npm.io page: https://npm.io/package/@icoset/icoset-webpack-plugin

## Dependencies (1)

- [webpack-inject-plugin](https://npm.io/package/webpack-inject-plugin.md) ^1.5.5

## Recent versions

- 1.0.2 (latest) — 2023-05-18
- 1.0.1 — 2023-05-18
- 1.0.0 — 2022-03-11
- 0.0.13 — 2018-12-30
- 0.0.12 — 2018-12-29
- 0.0.11 — 2018-12-29
- 0.0.10 — 2018-12-29
- 0.0.9 — 2018-11-23
- 0.0.8 — 2018-11-10
- 0.0.7 — 2018-11-10
- 0.0.6 — 2018-10-23
- 0.0.5 — 2018-10-23
- 0.0.4 — 2018-10-22
- 0.0.3 — 2018-10-21
- 0.0.2 — 2018-10-17
- … 1 more at https://npm.io/package/@icoset/icoset-webpack-plugin/versions

## README

# Icoset Webpack Plugin

Use Webpack + Icoset to build svg's dynamically into your outputed bundle.

Learn more about icoset: [@icoset/icoset](https://github.com/icoset/icoset/tree/master/packages/icoset)

Check out the icoset presets: [@icoset/preset-*](https://github.com/icoset/icoset)

## What it does

Since [Icoset](https://github.com/icoset/icoset) is a build-time tool, we need a way to get
all these icons into our app during run-time.

Enter `icoset-webpack-plugin` - we can now use webpack to initiate Icoset with a custom
config, and dynamically inject it into our final bundle.

## Install

```bash
// yarn
$ yarn add @icoset/icoset @icoset/icoset-webpack-plugin
```

```bash
// npm
$ npm install -s @icoset/icoset @icoset/icoset-webpack-plugin
```

## Use

```javascript
// webpack.config.js
const IcosetWebpackPlugin = require('@icoset/icoset-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {...},
  plugins: [
    new IcosetWebpackPlugin({
      directory: path.resolve(__dirname, 'icons'),
    })
  ],
}
```

## Options

### `icosetOptions` object (Required)

Pass in icoset options here (like `directory` and `icons`).
Check out the [Icoset README](https://github.com/icoset/icoset/tree/master/packages/icoset) to learn more.

### `entryName` string (Optional)

Depending on the webpack configuration, you might have more then one entry file.

This option allows you to target a named entry file for injection:

```javascript
module.exports = {
  entry: {
    one: './src/one.js',
    two: './src/two.js',
  },
  plugins: [
    new IcosetWebpackPlugin({
      entryName: 'one', // the plugin will inject the icons into this entry file
      icosetOptions: {
        directory: path.resolve(__dirname, 'icons'),
      },
    })
  ],
}
```

### `injectionType` "onDocumentLoad" | "window" (optional)

Choose how you want your icons added to your app.

- `onDocumentLoad` **DEFAULT** - inject svgs directly into the `<body>` on document load.
- `window` - inject svgs into a window variable for later use (window variable name defaults to `window.__icoset`).

### `windowVariableName` string (optional)

If `injectionType === 'window'`, you can change that variable name here.

```javascript
module.exports = {
  plugins: [
    new IcosetWebpackPlugin({
      injectionType: 'window',
      windowVariableName: '__whatever_you_want__',
    })
  ],
}
// output: window.__whatever_you_want__ = "<svg>...</svg>";
```

## Special Thanks

I just want to give a big shout out to our friends behind the
[`webpack-inject-plugin`](https://github.com/adierkens/webpack-inject-plugin) project. This project
utilizes that plugin to be able to inject custom code into an entry file.

---
_Source: https://npm.io/package/@icoset/icoset-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._