react-svg-inline - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1

CHANGELOG.md

@@ -0,1 +1,6 @@
+# 2.1.1 - 2018-06-07
+
+- Fix accessibility\* for svgs with newlines
+  by @cmrigney in [#26](https://github.com/MoOx/react-svg-inline/pull/26)
+
 # 2.1.0 - 2018-01-22
@@ -15,3 +20,3 @@
   Released as a major version since react (specified as in “peerDependencies”) needs a stricter range.
- 
+
 # 1.2.0 - 2016-07-06
@@ -18,0 +23,0 @@

lib/index.js

@@ -50,11 +50,12 @@ "use strict";
   // remove fill
-  fill: / +fill=\"(none|#[0-9a-f]+)\"/gi,
+  fill: / +fill="(none|#[0-9a-f]+)"/gi,
 
   // Sketch.app shit
-  sketchMSShapeGroup: / +sketch:type=\"MSShapeGroup\"/gi,
-  sketchMSPage: / +sketch:type=\"MSPage\"/gi,
-  sketchMSLayerGroup: / +sketch:type=\"MSLayerGroup\"/gi
+  sketchMSShapeGroup: / +sketch:type="MSShapeGroup"/gi,
+  sketchMSPage: / +sketch:type="MSPage"/gi,
+  sketchMSLayerGroup: / +sketch:type="MSLayerGroup"/gi
+};
 
-  // @styled(styles)
-};
+// @styled(styles)
+
 var SVGInline = function (_Component) {
@@ -109,10 +110,10 @@ _inherits(SVGInline, _Component);
       var classes = (0, _classnames2.default)(_defineProperty({
-        "SVGInline": true,
+        SVGInline: true,
         "SVGInline--cleaned": cleanup.length
       }, className, className));
       var svgClasses = classes.split(" ").join(classSuffix + " ") + classSuffix;
-      var svgStr = SVGInline.cleanupSvg(svg, cleanup).replace(/<svg/, "<svg class=\"" + svgClasses + "\"" + (fill ? " fill=\"" + fill + "\"" : "") + (width || height ? " style=\"" + (width ? "width: " + width + ";" : "") + (height ? "height: " + height + ";" : "") + "\"" : ""));
+      var svgStr = SVGInline.cleanupSvg(svg, cleanup).replace(/<svg/, "<svg class=\"" + svgClasses + "\"" + (fill ? " fill=\"" + fill + "\"" : "") + (width || height ? ' style="' + (width ? "width: " + width + ";" : "") + (height ? "height: " + height + ";" : "") + '"' : ""));
       var match = void 0;
       if (accessibilityDesc) {
-        match = /<svg.*?>/.exec(svgStr);
+        match = /<svg(.|\n|\r\n)*?>/.exec(svgStr);
         var pos = match.index + match[0].length;
@@ -122,3 +123,3 @@ svgStr = svgStr.substr(0, pos) + ("<desc>" + accessibilityDesc + "</desc>") + svgStr.substr(pos);
       if (accessibilityLabel) {
-        match = match || /<svg.*?>/.exec(svgStr);
+        match = match || /<svg(.|\n|\r\n)*?>/.exec(svgStr);
         var _pos = match.index + match[0].length - 1;
@@ -125,0 +126,0 @@ var id = "SVGInline-" + SVGInline.idCount++ + "-title";

package.json

 {
   "name": "react-svg-inline",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "A React component to inline your SVGs.",
@@ -32,7 +32,9 @@ "keywords": [
     "babel-preset-stage-3": "^6.24.1",
-    "eslint": "^3.19.0",
-    "eslint-config-i-am-meticulous": "^6.0.0",
-    "eslint-plugin-import": "^2.0.0",
-    "eslint-plugin-react": "^6.0.0",
-    "npmpub": "^3.1.0",
+    "eslint": "^4.19.1",
+    "eslint-config-i-am-meticulous": "^9.0.1",
+    "eslint-plugin-react": "^7.9.1",
+    "husky": "^0.14.3",
+    "npmpub": "^4.0.0",
+    "prettier": "^1.13.4",
+    "pretty-quick": "^1.6.0",
     "react": "^16.0.0",
@@ -46,2 +48,3 @@ "react-dom": "^16.0.0",
   "scripts": {
+    "precommit": "pretty-quick --staged",
     "prebabelify": "rimraf lib",
@@ -48,0 +51,0 @@ "babelify": "babel --copy-files src --out-dir lib",

src/index.js

@@ -1,4 +0,4 @@
-import React, { Component } from "react"
-import PropTypes from "prop-types"
-import cx from "classnames"
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import cx from "classnames";
 
@@ -20,9 +20,9 @@ // import styles from "./styles"
   // remove fill
-  fill: / +fill=\"(none|#[0-9a-f]+)\"/gi,
+  fill: / +fill="(none|#[0-9a-f]+)"/gi,
 
   // Sketch.app shit
-  sketchMSShapeGroup: / +sketch:type=\"MSShapeGroup\"/gi,
-  sketchMSPage: / +sketch:type=\"MSPage\"/gi,
-  sketchMSLayerGroup: / +sketch:type=\"MSLayerGroup\"/gi,
-}
+  sketchMSShapeGroup: / +sketch:type="MSShapeGroup"/gi,
+  sketchMSPage: / +sketch:type="MSPage"/gi,
+  sketchMSLayerGroup: / +sketch:type="MSLayerGroup"/gi
+};
 
@@ -42,9 +42,6 @@ // @styled(styles)
       cleanupExceptions,
-      ...componentProps,
-    } = this.props
+      ...componentProps
+    } = this.props;
 
-    let {
-      cleanup,
-      height,
-    } = this.props
+    let { cleanup, height } = this.props;
 
@@ -55,78 +52,62 @@ if (
       // passing cleanupExceptions enable cleanup as well
-      (
-        cleanup.length === 0 &&
-        cleanupExceptions.length > 0
-      )
+      (cleanup.length === 0 && cleanupExceptions.length > 0)
     ) {
-      cleanup = Object.keys(cleanups)
+      cleanup = Object.keys(cleanups);
     }
-    cleanup = cleanup.filter(
-      key => {
-        return !(cleanupExceptions.indexOf(key) > -1)
-      }
-    )
+    cleanup = cleanup.filter(key => {
+      return !(cleanupExceptions.indexOf(key) > -1);
+    });
 
     if (width && height === undefined) {
-      height = width
+      height = width;
     }
 
     // remove useless props for wrapper
-    delete componentProps.cleanup
-    delete componentProps.height
+    delete componentProps.cleanup;
+    delete componentProps.height;
 
     const classes = cx({
-      "SVGInline": true,
+      SVGInline: true,
       "SVGInline--cleaned": cleanup.length,
-      [className]: className,
-    })
-    const svgClasses = classes
-      .split(" ")
-      .join(classSuffix + " ") + classSuffix
+      [className]: className
+    });
+    const svgClasses = classes.split(" ").join(classSuffix + " ") + classSuffix;
     let svgStr = SVGInline.cleanupSvg(svg, cleanup).replace(
       /<svg/,
-      `<svg class="${ svgClasses }"` +
-      (
-        fill
-        ? ` fill="${ fill }"`
-        : ""
-      ) +
-      (
-        width || height
-        ? " style=\"" +
+      `<svg class="${svgClasses}"` +
+        (fill ? ` fill="${fill}"` : "") +
+        (width || height
+          ? ' style="' +
             (width ? `width: ${width};` : "") +
             (height ? `height: ${height};` : "") +
-          "\""
-        : ""
-      )
-    )
-    let match
-    if(accessibilityDesc) {
-      match = /<svg.*?>/.exec(svgStr)
-      const pos = match.index + match[0].length
-      svgStr = svgStr.substr(0, pos)
-      + `<desc>${accessibilityDesc}</desc>`
-      + svgStr.substr(pos)
+            '"'
+          : "")
+    );
+    let match;
+    if (accessibilityDesc) {
+      match = /<svg(.|\n|\r\n)*?>/.exec(svgStr);
+      const pos = match.index + match[0].length;
+      svgStr =
+        svgStr.substr(0, pos) +
+        `<desc>${accessibilityDesc}</desc>` +
+        svgStr.substr(pos);
     }
-    if(accessibilityLabel) {
-      match = match || /<svg.*?>/.exec(svgStr)
-      const pos = match.index + match[0].length - 1
-      const id = `SVGInline-${SVGInline.idCount++}-title`
-      svgStr = svgStr.substr(0, pos)
-        + ` role="img" aria-labelledby="${id}"`
-        + svgStr.substr(pos, 1)
-        + `<title id="${id}">${accessibilityLabel}</title>`
-        + svgStr.substr(pos + 1)
+    if (accessibilityLabel) {
+      match = match || /<svg(.|\n|\r\n)*?>/.exec(svgStr);
+      const pos = match.index + match[0].length - 1;
+      const id = `SVGInline-${SVGInline.idCount++}-title`;
+      svgStr =
+        svgStr.substr(0, pos) +
+        ` role="img" aria-labelledby="${id}"` +
+        svgStr.substr(pos, 1) +
+        `<title id="${id}">${accessibilityLabel}</title>` +
+        svgStr.substr(pos + 1);
     }
-    return (
-      React.createElement(
-        component,
-        {
-          ...componentProps, // take most props
-          className: classes,
-          dangerouslySetInnerHTML: {
-            __html: svgStr,
-          },
-        }
-      )
-    )
+    return React.createElement(component, {
+      ...componentProps, // take most props
+      className: classes,
+      dangerouslySetInnerHTML: {
+        __html: svgStr
+      }
+    });
   }
@@ -138,12 +119,6 @@ }
   classSuffix: PropTypes.string,
-  component: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.func,
-  ]),
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   svg: PropTypes.string.isRequired,
   fill: PropTypes.string,
-  cleanup: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.array,
-  ]),
+  cleanup: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
   cleanupExceptions: PropTypes.array,
@@ -153,4 +128,4 @@ width: PropTypes.string,
   accessibilityLabel: PropTypes.string,
-  accessibilityDesc: PropTypes.string,
-}
+  accessibilityDesc: PropTypes.string
+};
 
@@ -161,4 +136,4 @@ SVGInline.defaultProps = {
   cleanup: [],
-  cleanupExceptions: [],
-}
+  cleanupExceptions: []
+};
 
@@ -171,7 +146,7 @@ SVGInline.idCount = 0;
     .reduce((acc, key) => {
-      return acc.replace(cleanups[key], "")
+      return acc.replace(cleanups[key], "");
     }, svg)
-    .trim()
-}
+    .trim();
+};
 
-export default SVGInline
+export default SVGInline;

No alert changes

Improved metrics

Total package byte prevSize

18636

increased by0.33%

Worsened metrics

Dev dependency count

17

increased by13.33%

Lines of code

299

decreased by-7.72%

No dependency changes