svg-sprite-loader - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

index.js

 var path = require('path');
 var loaderUtils = require('loader-utils');
 var extend = require('extend');
-var convertToSymbol = require('./lib/convertToSymbol');
-var optimize = require('./lib/optimize');
+var SVGDoc = require('./lib/svg-document');
+var procs = require('./lib/processings');
+var utils = require('./lib/utils');
 
-var defaults = {
-  prefix: null,
-  optimize: true
-};
+/**
+ * Default loader config
+ *
+ * @typedef {{
+    name: String,
+    svgo: Boolean|SVGOConfig,
+    spriteModule: String,
+ * }} loaderConfig
+ */
+var defaultConfig = {
+   // Sprite image naming pattern. Supported patterns: `[name]`, `[pathhash]`.
+  name: '[name]',
 
-var getIdFromFilepath = function(filepath) {
-  var basename = path.basename(filepath);
-  var nameParts = basename.split('.');
-  nameParts.splice(-1);
-  return nameParts.join('.');
+  // 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')
 };
@@ -21,14 +31,40 @@
   this.cacheable && this.cacheable();
-  var options = extend({}, defaults, loaderUtils.parseQuery(this.query));
-  var filepath = this.resourcePath;
-  this.addDependency(filepath);
 
-  var symbolId = (options.prefix ? options.prefix + '_' : '') + getIdFromFilepath(filepath);
+  var query = loaderUtils.parseQuery(this.query);
+  /** @type {loaderConfig} */
+  var config = extend({}, defaultConfig, query);
+  var resourcePath = this.resourcePath;
+  var basename = path.basename(resourcePath);
+  var isRasterImage = utils.isRasterImage(resourcePath);
 
-  if (options.optimize)
-    content = optimize(content);
+  this.addDependency(resourcePath);
 
-  content = convertToSymbol(content, symbolId);
+  if (isRasterImage)
+    content = procs.rasterImageToSVG(resourcePath);
 
-  return 'module.exports = ' + JSON.stringify(content);
+  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])
+  if (isRasterImage) {
+    var pixelRatio = utils.getPixelRatioFromFilename(basename);
+    var scale = Number((1 / pixelRatio).toFixed(1));
+    if (scale !== 1)
+      doc.$('image').attr('transform', 'scale('+ scale +')');
+  }
+
+  doc.$svg.attr('id', id);
+
+  content = doc.toString(SVGDoc.OUTPUT_FORMAT.SYMBOL);
+
+  return [
+    'var sprite = require("' + config.spriteModule.replace(/\\/g, "/") + '")',
+    'var image = ' + JSON.stringify(content),
+    'sprite.add(image)',
+    'module.exports = ' + JSON.stringify(id) + ';'
+  ].join(';\n');
 };

package.json

 {
   "name": "svg-sprite-loader",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "SVG sprite webpack loader",
@@ -20,3 +20,2 @@ "main": "index.js",
     "lib/",
-    "web/",
     "index.js",
@@ -35,2 +34,3 @@ "README.md",
     "extend": "^3.0.0",
+    "image-size": "^0.3.5",
     "loader-utils": "^0.2.11",
@@ -37,0 +37,0 @@ "svgo": "^0.5.5"

README.md

 # Webpack SVG sprite loader
 
 ```js
-// Create sprite instance
-var SvgSprite = require('node_modules/svg-sprite-loader/web/svg-sprite');
-var sprite = new SvgSprite();
-
 // Add single image to the sprite
-sprite.add(require('svg-sprite!images/logos/logo.svg'));
+require('svg-sprite!images/logos/logo.svg');
 
 // ...or bunch of them
-sprite.add(require.context('svg-sprite!images/logos', false, /\.svg$/));
+var files = require.context('svg-sprite!images/logos', false, /\.svg$/);
+files.keys().forEach(files);
 
-// Render the sprite
-sprite.render(document.body);
+// Use it somewhere on the page
+<svg><use xlink:href="#logo"></use></svg>
 
 // PROFIT!
 ```

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

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

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

Improved metrics

Total package byte prevSize

12209

increased by90.17%

Number of package files

12

increased by71.43%

Lines of code

303

increased by136.72%

Worsened metrics

Dependency count

5

increased by25%

Number of lines in readme file

15

decreased by-16.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedimage-size@^0.3.5

• + Addedimage-size@0.3.5(transitive)