# @dicebear/avatars-webpack-loader

> Webpack loader for DiceBear Avatars sprite collections

Latest version **2.1.0** (published 2018-04-10) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @dicebear/avatars-webpack-loader
pnpm add @dicebear/avatars-webpack-loader
yarn add @dicebear/avatars-webpack-loader
bun add @dicebear/avatars-webpack-loader
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2018-04-10 |
| First published | 2018-01-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 119.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | DiceBear |
| Maintainers | floriankoerner |

## Links

- npm: https://www.npmjs.com/package/@dicebear/avatars-webpack-loader
- Repository: https://github.com/DiceBear/avatars-webpack-loader
- Homepage: https://github.com/DiceBear/avatars-webpack-loader#readme
- Issues: https://github.com/DiceBear/avatars-webpack-loader/issues
- npm.io page: https://npm.io/package/@dicebear/avatars-webpack-loader

## Dependencies (1)

- [svgson](https://npm.io/package/svgson.md) ^2.1.1

## Recent versions

- 2.1.0 (latest) — 2018-04-10
- 1.0.0 — 2018-02-17
- 1.0.0-beta.2 — 2018-02-03
- 1.0.0-beta.1 — 2018-01-30

## README

[![Build Status](https://travis-ci.org/DiceBear/avatars-webpack-loader.svg?branch=master)](https://travis-ci.org/DiceBear/avatars-webpack-loader)
[![npm](https://img.shields.io/npm/v/@dicebear/avatars-webpack-loader.svg)](https://www.npmjs.com/package/@dicebear/avatars-webpack-loader)

This package provides a webpack loader for Avatars sprite collections.

## Installation

```
npm install --save-dev @dicebear/avatars-webpack-loader
```

## Usage

Create an SVG file with uniquely named groups on the first level. You can access these groups later with the Loader.
These groups represent a sprite group, such as the eyes of a character.

The uniquely named groups must contain other groups, which each display a variation.
(For example, a variation of the eyes.)

```js
// webpack.config.js

module.exports = {
  // ...
  resolve: {
    extensions: ['.js', '.svg']
  },
  module: {
    rules: [{ test: /\.svg$/, exclude: /node_modules/, loader: '@dicebear/avatars-webpack-loader' }]
  }
  // ...
};
```

Now you can load your sprite collection SVG files in your JS file.

```js
// sprites.js

import * as svg from 'sprites.svg';

export default new SpriteCollection([
  new Sprite(svg.eyes, colors)
  // ...
]);
```

## Related

* [@dicebear/avatars-webpack-config](https://github.com/DiceBear/avatars-webpack-config) Example webpack configuration for Avatars sprites SVG.

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