svg-sprite-loader - npm Package Compare versions

Comparing version 0.0.3 to 0.0.5

index.js

 var path = require('path');
 var loaderUtils = require('loader-utils');
 var extend = require('extend');
+var defaultConfig = require('./config');
 var SVGDoc = require('./lib/svg-document');
@@ -8,23 +9,2 @@ var procs = require('./lib/processings');
 
-/**
- * Default loader config
- *
- * @typedef {{
-    name: String,
-    svgo: Boolean|SVGOConfig,
-    spriteModule: String,
- * }} loaderConfig
- */
-var defaultConfig = {
-   // Sprite image naming pattern. Supported patterns: `[name]`, `[pathhash]`.
-  name: '[name]',
-
-  // Use SVGO for optimization. Boolean or SVGO config supported.
-  // See https://github.com/svg/svgo/blob/master/docs/how-it-works/en.md#1-config.
-  svgo: true,
-
-  // Sprite module name. You can define your own sprite module (based on `./lib/web/sprite` or not).
-  spriteModule: path.resolve(__dirname, 'lib/web/global-sprite')
-};
-
 module.exports = function (content) {
@@ -34,3 +14,3 @@ this.cacheable && this.cacheable();
   var query = loaderUtils.parseQuery(this.query);
-  /** @type {loaderConfig} */
+  /** @type {SVGSpriteLoaderConfig} */
   var config = extend({}, defaultConfig, query);
@@ -46,10 +26,16 @@ var resourcePath = this.resourcePath;
 
-  if (config.svgo)
-    content = procs.svgo(content, typeof config.svgo === 'boolean' ? null : config.svgo);
-
   var doc = new SVGDoc(content);
-  var id = utils.generateIdFromFilepath(resourcePath, config.name);
-  procs.prefixize(doc, id + '_');
 
-  // Check raster image pixel ratio based on file name (e.g. [e-mail])
+  // Calculate sprite symbol id
+  var id = loaderUtils.interpolateName(this, config.name, {
+    context: this.options.context,
+    content: content
+  });
+  if (config.name.indexOf('[pathhash]') !== -1)
+    id = utils.generateHashFromPath(resourcePath);
+
+  if (config.prefixize)
+    procs.prefixize(doc, id + '_');
+
+  // Check raster image pixel ratio from file name (e.g. [e-mail])
   if (isRasterImage) {
@@ -56,0 +42,0 @@ var pixelRatio = utils.getPixelRatioFromFilename(basename);

lib/processings/index.js

 module.exports = {
   prefixize: require('./prefixize'),
-  rasterImageToSVG: require('./raster-image-to-svg'),
-  svgo: require('./svgo')
+  rasterImageToSVG: require('./raster-image-to-svg')
 };

lib/utils.js

@@ -25,25 +25,4 @@ var path = require('path');
 
-/**
- * @param {String} filepath
- * @param {String} [pattern="name"] Naming pattern. Patterns `[name]` and `[pathhash]` supported
- * @returns {String}
- */
-exports.generateIdFromFilepath = function (filepath, pattern) {
-  var pattern = pattern || '[name]';
-  var basename = path.basename(filepath);
-  var basenameWithoutExt = basename.substr(0, basename.lastIndexOf('.'));
-  var id;
-
-  switch (pattern) {
-    default:
-    case '[name]':
-      id = basenameWithoutExt;
-      break;
-
-    case '[pathhash]':
-      id = crypto.createHash('md5').update(filepath).digest("hex");
-      break;
-  }
-
-  return id;
+exports.generateHashFromPath = function (path_) {
+  return crypto.createHash('md5').update(path_).digest("hex");
 };

lib/web/sprite.js

@@ -72,8 +72,2 @@ /**
 
-Sprite.prototype.destroy = function () {
-  this.elem.parentNode.removeChild(this.elem);
-  this.elem = null;
-  this.content = null;
-};
-
 module.exports = Sprite;

package.json

 {
   "name": "svg-sprite-loader",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "SVG sprite webpack loader",
@@ -21,2 +21,3 @@ "main": "index.js",
     "index.js",
+    "config.js",
     "README.md",
@@ -35,5 +36,4 @@ "LICENSE"
     "image-size": "^0.3.5",
-    "loader-utils": "^0.2.11",
-    "svgo": "^0.5.5"
+    "loader-utils": "^0.2.11"
   }
 }

README.md

 # Webpack SVG sprite loader
 
+It's like [style-loader](https://github.com/webpack/style-loader) but for SVG:
+
+- Creates a single SVG sprite from a set of images.
+- Raster images support (PNG, JPG and GIF).
+- Custom sprite implementation support.
+
+## How it works
+
+When you require an image, loader transforms it to SVG symbol and add it to the array in special [sprite](lib/web/sprite.js) class.
+When browser event `DOMContentLoaded` fires sprite will be rendered and injected as first child of `document.body`.
+Require statement e.g. `require('svg-sprite!./image.svg')` returns a symbol id, so you can reference it later
+in `<svg><use xlink:href="#id"/></svg>`. Raster images  will be inlined (base64) and wrapped with an `<image>` tag.
+Files like `[e-mail]` will be transformed with proper scale.
+
+### Custom sprite implementation
+
+By default sprite renders when `DOMContentLoaded` event fires and injects as first child in `document.body`.
+If you need custom behavior, use `spriteModule` config option to specify module path of your sprite implementation.
+You can extend a default [`lib/web/sprite.js`](lib/web/sprite.js), or create your own.
+In the latter case you only need to implement the `add` method that accepts the symbol data as a string.
+
+## Installation
+
+```bash
+npm install svg-sprite-loader --save-dev
+```
+
+## Example config
 ```js
-// Add single image to the sprite
-require('svg-sprite!images/logos/logo.svg');
+module.exports = {
+  module: {
+    loaders: [{
+      test: /\.svg$/,
+      loader: 'svg-sprite?' + JSON.stringify({
+        name: '[name]_[hash]',
+        prefixize: true,
+        spriteModule: 'utils/my-custom-sprite'
+      })
+    }]
+  }
+};
+```
 
-// ...or bunch of them
-var files = require.context('svg-sprite!images/logos', false, /\.svg$/);
+## Configuration
+
+* `name` configures a custom symbol id naming. Default is `[name]`. Following name patterns are supported:
+  * `[ext]` the extension of the image.
+  * `[name]` the basename of the image.
+  * `[path]` the path of the image.
+  * `[hash]` the hash or the image content.
+  * `[pathhash]` the hash or the image path.
+* `prefixize` isolates an image content by prefixing its `id`, `xlink:href` and `url(#id)` elements. Default is `true`.
+* `spriteModule` defines [custom sprite implementation](#custom-sprite-implementation) module path.
+
+## Examples
+
+Single image
+```js
+var id = require('svg-sprite!./image.svg');
+// => 'image'
+```
+
+Set of images
+```js
+var files = require.context('svg-sprite!images/logos', false, /(twitter|facebook|youtube)\.svg$/);
 files.keys().forEach(files);
+```
 
-// Use it somewhere on the page
-<svg><use xlink:href="#logo"></use></svg>
+Custom sprite behavior
+```js
+// my-sprite.js
+var Sprite = require('node_modules/svg-sprite-loader/lib/web/sprite');
+module.exports = new Sprite();
 
-// PROFIT!
-```
+// my-app.jsx
+var sprite = require('my-sprite');
+
+class MyApplication extends React.Component {
+  componentWillMount() {
+    sprite.elem = sprite.render(document.body);
+  }
+
+  componentWillUnmount() {
+    sprite.elem.parentNode.removeChild(sprite.elem);
+  }
+}
+```
+
+Using with React
+```js
+// icon.jsx
+var GLYPHS = {
+  PONY: require('img/pony.svg'),
+  UNICORN: require('img/unicorn.svg')
+};
+
+class Icon extends React.Component {
+  render() {
+    var glyph = this.props.glyph;
+    return (
+      <svg className="icon" dangerouslySetInnerHTML={{__html: '<use xlink:href="#' + glyph + '"></use>'}}/>
+    )
+  }
+}
+
+module.exports = Icon;
+module.exports.GLYPHS = GLYPHS;
+
+// some-component.jsx
+var Icon = require('components/icon');
+<Icon glyph={Icon.GLYPHS.UNICORN}>
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14068

increased by15.23%

Dependency count

4

decreased by-20%

Number of lines in readme file

115

increased by666.67%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

261

decreased by-13.86%

Dependency changes

• - Removedsvgo@^0.5.5

• - Removedargparse@1.0.10(transitive)

• - Removedcoa@1.0.4(transitive)

• - Removedcolors@1.1.2(transitive)

• - Removedesprima@2.2.0(transitive)

• - Removedjs-yaml@3.3.1(transitive)

• - Removedminimist@1.2.8(transitive)

• - Removedmkdirp@0.5.6(transitive)

• - Removedq@1.5.1(transitive)

• - Removedsax@1.1.6(transitive)

• - Removedsprintf-js@1.0.3(transitive)

• - Removedsvgo@0.5.6(transitive)

• - Removedwhet.extend@0.9.9(transitive)