# @neodx/svg-sprite

> Build optimized SVG sprites without pain

Latest version **0.0.1** (published 2022-10-23) · 0 weekly downloads

## Install

```sh
npm install @neodx/svg-sprite
pnpm add @neodx/svg-sprite
yarn add @neodx/svg-sprite
bun add @neodx/svg-sprite
```

Provides the command `sprite`.

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2022-10-23 |
| First published | 2022-10-23 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 78.5 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | secundant |

## Links

- npm: https://www.npmjs.com/package/@neodx/svg-sprite
- npm.io page: https://npm.io/package/@neodx/svg-sprite

## Dependencies (8)

- [ora](https://npm.io/package/ora.md) 6.1.2
- [sade](https://npm.io/package/sade.md) 1.8.1
- [svgo](https://npm.io/package/svgo.md) 2.8.0
- [react](https://npm.io/package/react.md) 18.2.0
- [svgson](https://npm.io/package/svgson.md) 5.2.1
- [react-dom](https://npm.io/package/react-dom.md) 18.2.0
- [tiny-glob](https://npm.io/package/tiny-glob.md) 0.2.9
- [cosmiconfig](https://npm.io/package/cosmiconfig.md) 7.0.1

## Recent versions

- 0.0.1 (latest) — 2022-10-23

## README

<h1 align="center">
  <a aria-label="SVG sprite" href="https://github.com/secundant/neodx/libs/svg-sprite">
    🗃@neodx/svg-sprite - SVG sprites generator
  </a>
</h1>
<p align="center">
  Flexible SVG sprites generator
</p>

- Optimizes output with svgo
- Creates TypeScript`s interface with generated sprites info
- Creates meta information about sprites
- Provides plugins system for specific extensions

## Installation

- Yarn: `yarn add -D @neodx/svg-sprite`
- NPM: `npm i -D @neodx/svg-sprite`

## Getting started

```shell
# Run our CLI when configuration is ready
yarn sprite build
```

We use [cosmiconfig](https://github.com/davidtheclark/cosmiconfig) under the hood,
you need create `.spriterc.js`:

```javascript
/**
 * Example of minimal configuration
 * @type {import('@neodx/svg-sprite').Configuration}
 */
module.exports = {
  input: 'assets/svg/*.svg',
  outputRoot: 'public'
};
```

## Advanced configuration

```javascript
const { plugins } = require('@neodx/svg-sprite');

/**
 * @type {import('@neodx/svg-sprite').Configuration}
 */
module.exports = {
  /**
   * Input can also be an array and take base url in "inputRoot" option.
   * In this example we will scan all files in [assets/static/..., assets/tmp/...]
   */
  input: ['static/**/*.svg', 'tmp/*.svg'],
  inputRoot: 'assets',
  /**
   * You can set multiple outputs
   */
  outputRoot: ['public/sprites', '.build/assets/sprites'],
  /**
   * {name} will be replaced with sprite name ("sprite" by default)
   */
  fileName: '{name}.svg',
  /**
   * Override plugins. By default enabled svgo, setId and resetColors
   */
  plugins: [
    // Enable default plugins
    plugins.svgo(),
    plugins.setId(),
    plugins.resetColors(),
    /**
     * Plugin for grouping inputs to multiple sprites, will be useful for large icon sets.
     * Group inputs by relative directory name by default
     * @example Look at files structure below:
     * - actions/
     * - - add.svg
     * - - close.svg
     * - - subfolder/
     * - - - submit.svg
     * - alerts/
     * - - info.svg
     * - hello.svg
     * This will group sprites as {
     *   actions: ['add', 'close'],
     *   'actions/subfolder': ['submit'],
     *   alerts: ['info'],
     *   __root: ['hello']
     * }
     */
    plugins.group({
      defaultName: '__root'
    }),
    /**
     * This plugin will generate "shared/types/sprite.ts" with:
     * - export interface SpriteMap { modals: 'add' | 'close'; ... }
     * - export const spriteMap = { modals: ['add', 'close'] }
     */
    plugins.typescript({
      output: 'shared/types/sprite.ts',
      metaName: 'spriteMap',
      typeName: 'SpriteMap'
    })
  ]
};
```

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