https://github.com/scriptedalchemy/webpack-vector-sprite-plugin

https://github.com/scriptedalchemy/webpack-vector-sprite-plugin

Last synced: 20 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/scriptedalchemy/webpack-vector-sprite-plugin
• Owner: ScriptedAlchemy
• Created: 2019-07-01T17:06:59.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T11:44:48.000Z (11 months ago)
• Last Synced: 2024-05-02T02:12:57.636Z (7 months ago)
• Language: JavaScript
• Size: 316 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# WEBPACK PLUGIN

```

███████╗██╗   ██╗ ██████╗     ███████╗████████╗ ██████╗ ██████╗ ███████╗

██╔════╝██║   ██║██╔════╝     ██╔════╝╚══██╔══╝██╔═══██╗██╔══██╗██╔════╝

███████╗██║   ██║██║  ███╗    ███████╗   ██║   ██║   ██║██████╔╝█████╗  

╚════██║╚██╗ ██╔╝██║   ██║    ╚════██║   ██║   ██║   ██║██╔══██╗██╔══╝  

███████║ ╚████╔╝ ╚██████╔╝    ███████║   ██║   ╚██████╔╝██║  ██║███████╗

╚══════╝  ╚═══╝   ╚═════╝     ╚══════╝   ╚═╝    ╚═════╝ ╚═╝  ╚═╝╚══════╝                                                                     

```

[![NPM](https://nodei.co/npm/webpack-vector-sprite-plugin.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/webpack-vector-sprite-plugin/)

## Package info

[![Build Status](https://travis-ci.org/ScriptedAlchemy/webpack-vector-sprite-plugin.svg?branch=master)](https://travis-ci.org/ScriptedAlchemy/webpack-vector-sprite-plugin)

[![NPM version](https://badge.fury.io/js/webpack-vector-sprite-plugin.svg)](https://badge.fury.io/js/webpack-vector-sprite-plugin)

## Installation

```bash

npm i webpack-vector-sprite-plugin --save-dev

```

## Webpack version support

Use [email protected] for Webpack 1.x.x  

Use [email protected] for Webpack 2.x.x,3.x.x,4.x.x. 

## Node.js version support

#### We do not maintain a version for node.js 0.12 anymore

  Tested to work with with node.js 4.x,6.x,7.x,8.x

## Webpack configuration

[EXAMPLE here](https://github.com/ScriptedAlchemy/webpack-vector-sprite-plugin/tree/master/example)

## Usage

#### 1) require plugin

```javascript

//webpack.config.js

var SvgStore = require('webpack-vector-sprite-plugin');

module.exports = {

  plugins: [

    // create svgStore instance object

    new SvgStore({

      // svgo options

      svgoOptions: {

        plugins: [

          { removeTitle: true }

        ]

      },

      prefix: 'icon'

    })

  ]

}

```

#### 2) Put function mark at your chunk

```javascript

// plugin will find marks and build sprite

var __svg__           = { path: './assets/svg/**/*.svg', name: 'assets/svg/[hash].logos.svg' };

// will overwrite to var __svg__ = { filename: "assets/svg/1466687804854.logos.svg" };

// also you can use next variables for sprite compile

// var __sprite__     = { path: './assets/svg/minify/*.svg', name: 'assets/svg/[hash].icons.svg' };

// var __svgstore__   = { path: './assets/svg/minify/*.svg', name: 'assets/svg/[hash].stuff.svg' };

// var __svgsprite__  = { path: './assets/svg/minify/*.svg', name: 'assets/svg/[hash].1logos.svg' };

// require basic or custom sprite loader

require('webpack-vector-sprite-plugin/src/helpers/svgxhr')(__svg__);

```

##### Dear friends...

As you know, last version has integrated ajax sprite loader.

Right now, you can override that.

Or create your own sprite ajax loader function.

#### 3) HTML code for happy using

HTML:

```html

  

    

  

```

React JSX:

```html

  

    

  

```

## Plugin settings

#### options

- `template` - add custom jade template layout (optional)

- `svgoOptions` - options for [svgo](https://github.com/svg/svgo) (optional, default: `{}`)

## License

NPM package available here: [webpack-vector-sprite-plugin](https://www.npmjs.com/package/webpack-vector-sprite-plugin)

MIT © [Chernobrov Mike](http://ScriptedAlchemy.ru), [Gordey Levchenko](https://github.com/lgordey) , [Nadav Sinai](https://github.com/nadavsinai) , [Zack Jackson](https://github.com/ScriptedAlchemy)