svg-inline-loader - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

CHANGELOG.md

 # Changelog
 
+## 0.3.0
+
+* Isolate transfomration functions and make tag removal optional, add README
+* Added React svg icon tag
+
 ## 0.2.3
 
-* Tag removal is fixed (`<defs />`, `<style />`, `<title />`, ...) and test
-  added
+* Tag removal is fixed (`<defs />`, `<style />`, `<title />`, ...) and test added
 
@@ -8,0 +12,0 @@ ## 0.2.2

index.js

 var simpleHTMLTokenizer = require('simple-html-tokenizer');
 var tokenize = simpleHTMLTokenizer.tokenize;
 var generate = simpleHTMLTokenizer.generate;
+var loaderUtils = require('loader-utils');
 
-function hasNoWidthHeight (attributeToken) {
-    return attributeToken[0] !== 'width' && attributeToken[0] !== 'height';
-}
+var conditions = require('./lib/conditions');
+var transformer = require('./lib/transformer');
 
-function isSVGToken (tag) {
-    return tag.type === 'StartTag' && tag.tagName === 'svg';
-}
-
 // TODO: find better parser/tokenizer
@@ -26,14 +22,3 @@ var regexSequences = [
 
-var removingTags = [
-    'title',
-    'desc',
-    'defs',
-    'style'
-];
-
-function isRemovingTag (tag) {
-    return removingTags.indexOf(tag.tagName) > -1;
-}
-
-function getExtractedSVG (svgStr) {
+function getExtractedSVG(svgStr, query) {
     // Clean-up XML crusts like comments and doctype, etc.
@@ -54,40 +39,19 @@ var tokens;
 
-    // FIXME: Due to limtation of parser, we need to implement our
-    // very own little state machine to express tree structure
-    var removingTag = null;
     // If the token is <svg> start-tag, then remove width and height attributes.
-    return generate(tokens.map(function(tag) {
-        if (removingTag == null) {
-            // Reached start tag of a removing tag
-            if (isRemovingTag(tag)) {
-                removingTag = tag.tagName;
-                tag = null;
-
-            // Other stuffs that needs to be modified
-            } else if (isSVGToken(tag)) {
-                tag.attributes = tag.attributes.filter(hasNoWidthHeight);
-            }
-        } else {
-            // Reached end tag of a removing tag
-            if (tag.tagName === removingTag && tag.type === 'EndTag') {
-                removingTag = null;
-            }
-            tag = null;
-        }
-        return tag;
-    })
-    .filter(function (nonNull) { return nonNull; }));
+    return generate(transformer.runTransform(tokens, query));
 }
 
-function SVGInlineLoader (content) {
+function SVGInlineLoader(content) {
     this.cacheable && this.cacheable();
     this.value = content;
-    return "module.exports = " + JSON.stringify(getExtractedSVG(content));
+    // Configuration
+    var query = loaderUtils.parseQuery(this.query);
+
+    return "module.exports = " + JSON.stringify(getExtractedSVG(content, query));
 }
 
-SVGInlineLoader.isSVGToken = isSVGToken;
-SVGInlineLoader.hasNoWidthHeight = hasNoWidthHeight;
 SVGInlineLoader.getExtractedSVG = getExtractedSVG;
+SVGInlineLoader.conditions = conditions;
 SVGInlineLoader.regexSequences = regexSequences;
 
 module.exports = SVGInlineLoader;

package.json

 {
   "name": "svg-inline-loader",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "Cleans up and inlines your SVG files into Webpack module.",
@@ -26,2 +26,4 @@ "main": "index.js",
   "dependencies": {
+    "loader-utils": "^0.2.11",
+    "object-assign": "^4.0.1",
     "simple-html-tokenizer": "^0.1.1"
@@ -28,0 +30,0 @@ },

README.md

 # SVG Inline Loader for Webpack
 
-This Webpack loader inlines SVG as module. ([inspired by](https://gist.github.com/MoOx/1eb30eac43b2114de73a)) If you use Adobe Illustrator or Sketch to export SVGs, you will get auto-generated, unneeded crusts. This loader removes it for you, too.
+This Webpack loader inlines SVG as module. If you use Adobe suite or Sketch to export SVGs, you will get auto-generated, unneeded crusts. This loader removes it for you, too.
 
 ## Config
 
-Simply add configuration object to module.loaders like this.
+Simply add configuration object to `module.loaders` like this.
 
@@ -16,28 +16,27 @@ ```javascript
 
-To use in React, make a svg-container component
+### query
 
-```jsx
-// Custom icon component for demonstration
-var Icon = React.createClass({
-    propTypes: {
-        svg: React.PropTypes.string.isRequired,
-    },
-    render () {
-        return (
-            <i {...this.props}
-               svg={null}
-               dangerouslySetInnerHTML={{__html: this.props.svg}}>
-            </i>
-        );
-    }
-});
+There are a few queries available: `removeTags` (default: false), `removeSVGTagAttrs` (default: true), etc. (See `config.js`)
 
-```
+#### `removeTags`
 
-and use like:
+Removes specified tags and its children. You can specify tags by setting `removingTags` query array. (i.e. `?removingTags[]=style`)
 
+#### `removeSVGTagAttrs`
+
+Removes `width` and `height` attributes from `<svg />`. Default is true.
+
+## `<IconSVG />` React Component
+
+To use this component in React, import/require from `svg-inline-loader/lib/component.jsx`.
+It is ES5-safe, no need to transpile, You will need `object-assign` and `react` as dependencies.
+
+Use like:
+
+```jsx
+<IconSVG src={require("svg-inline!icon.svg")} />
 ```
 
-<Icon svg={require('./icon.svg')} />
+## Notes
 
-```
+[inspired by](https://gist.github.com/MoOx/1eb30eac43b2114de73a)

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

Improved metrics

Total package byte prevSize

8079

increased by51.01%

Number of package files

9

increased by80%

Lines of code

146

increased by87.18%

Worsened metrics

Dependency count

3

increased by200%

Dependency changes

• + Addedloader-utils@^0.2.11

• + Addedobject-assign@^4.0.1

• + Addedbig.js@3.2.0(transitive)

• + Addedemojis-list@2.1.0(transitive)

• + Addedjson5@0.5.1(transitive)

• + Addedloader-utils@0.2.17(transitive)

• + Addedobject-assign@4.1.1(transitive)