0.1.0 • Published 4 years ago
webpack-sass-svg v0.1.0
SVGSpritePlugin
A webpack
/sass-loader
plugin that provides SASS functions to automatically generate SVG spritesheet.
How to use
You can install the package using npm
or you can also clone this package.
Install using npm
npm install --save-dev webpack-sass-svg
Add to webpack
Depending on your project setup, you can either add the following to your package.json
or webpack.config.js
.
This requires you to have installed and use sass-loader
.
const SVGSpriteSheetPlugin = require('webpack-sass-svg');
module.exports = {
// ... other config
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
'sass-loader' // sass-loader should be defined
],
},
],
},
plugins: [
// ... other plugins
new SVGSpriteSheetPlugin( '___PATH_TO_COMPILE_DIR___' )
],
};
Use in your project
After setting up webpack
, you can now use the SASS functions in your .sass
/.scss
files.
Example:
$spritesheet: SVGSpriteMap("../assets/svg-sprite/**/*.svg");
.svg-sprite {
background-image: $spritesheet;
background-size: SVGSpriteWidth($spritesheet) SVGSpriteHeight($spritesheet);
background-repeat: no-repeat;
}
.svg-circle {
width: SVGFileWidth($spritesheet, 'circle');
height: SVGFileHeight($spritesheet, 'circle');
background-position: SVGFilePosition($spritesheet, 'circle', 'relative');
}
Documentation
TODO
- Add tests
- Use Typescript
0.1.0
4 years ago