[
  {
    "path": ".editorconfig",
    "content": "# editorconfig.org\nroot = true\n\n[*]\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\nindent_style = space\nindent_size = 2\n\n[*.md]\n# Allow <br/> from Markdown\ntrim_trailing_whitespace = false\n"
  },
  {
    "path": ".gitignore",
    "content": "node_modules\n\n# build\nlib\n"
  },
  {
    "path": ".travis.yml",
    "content": "language: node_js\n\nnode_js:\n  - 4\n  - 5\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# 2.1.1 - 2018-06-07\n\n- Fix accessibility\\* for svgs with newlines\n  by @cmrigney in [#26](https://github.com/MoOx/react-svg-inline/pull/26)\n\n# 2.1.0 - 2018-01-22\n\n- Add `accessibilityLabel` and `accessibilityDesc` props for a11y\n  by @filoxo in [#23](https://github.com/MoOx/react-svg-inline/pull/23)\n\n# 2.0.1 - 2017-10-12\n\n- Add React 16 support,\n  by @smashercosmo in [#18](https://github.com/MoOx/react-svg-inline/pull/18)\n\n# 2.0.0 - 2017-04-18\n\n- Fixed: Use `prop-types` package instead of react export to avoid warning with `react@^15.5.0`.\n  Released as a major version since react (specified as in “peerDependencies”) needs a stricter range.\n\n# 1.2.0 - 2016-07-06\n\n- Added: React ^15.2.0 support (no more warnings)\n  ([#4](https://github.com/MoOx/react-svg-inline/pull/4) - @nason)\n\n# 1.1.0 - 2016-03-14\n\n- Added: compat with react@15\n\n# 1.0.1 - 2015-12-08\n\n- Fixed: `main` prop in package.json\n\n# 1.0.0 - 2015-12-03\n\n💥\n"
  },
  {
    "path": "LICENSE",
    "content": "The MIT License (MIT)\n\nCopyright (c) 2015 Maxime Thirouin\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# DEPRECATED, I recommend you the tool [SVGR](https://github.com/smooth-code/svgr)\n\n---\n\n# react-svg-inline\n\n[![Travis (Unix) Build Badge](https://img.shields.io/travis/MoOx/react-svg-inline/master.svg?label=unix+build)](https://travis-ci.org/MoOx/react-svg-inline)\n\n> A react component to clean and display raw SVGs.\n\n## Install\n\n```console\n$ npm install react-svg-inline\n```\n\nYou might also need to `npm install raw-loader` if you want to use this with\nwebpack.\n\n## Usage\n\nHere is an example of a usage in a React stateless component:\n\n```js\nimport React from \"react\"\nimport SVGInline from \"react-svg-inline\"\n\nexport default () => (\n  <div>\n    <SVGInline svg={\"<svg....</svg>\"} />\n  </div>\n)\n```\n\n# Webpack to `require()` SVGs\n\nUse the raw-loader to require() raw SVGs files and pass them to\n`react-svg-inline`.\n\n```js\nmodule.exports = {\n  loaders: [\n    {\n      test: /\\.svg$/,\n      loader: 'raw-loader'\n    }\n  ]\n}\n\n```\n\n```js\nimport React from \"react\"\nimport SVGInline from \"react-svg-inline\"\nimport iconSVG from \"./myicon.svg\"\n\nexport default () => (\n  <div>\n    <SVGInline svg={ iconSVG } />\n  </div>\n)\n```\n\n## Options (props)\n\n### className\n\n``PropTypes.string``\n\nClass name used for the component that will wrap the SVG.\n\n### classSuffix\n\n``PropTypes.string``\n\nThe class suffix that will be added to the svg className (default: \"-svg\").\n\n### component\n\n``PropTypes.oneOfType([\n  PropTypes.string,\n  PropTypes.func,\n]),``\n\nThe component that will wrap the svg (default: `span`).\n\n### svg\n\n``PropTypes.string.isRequired``\n\n### fill\n\n``PropTypes.string``\n\nColor to use\n\n### cleanup\n\n``PropTypes.oneOfType([\n  PropTypes.bool,\n  PropTypes.array,\n])``\n\nThis allow you to cleanup (remove) some svg attributes.\nHere are the supported value that can be removed:\n\n- title\n- desc\n- comment\n- defs\n- width\n- height\n- fill\n- sketchMSShapeGroup\n- sketchMSPage\n- sketchMSLayerGroup\n\nIf cleanup === true, it will remove all the attributes above.\n\n### cleanupExceptions\n\n``PropTypes.array``\n\nThis allow you to whitelist some svg attributes to keep while cleaning some\nothers.\n\n### width\n\n``PropTypes.string``\n\n### height\n\n``PropTypes.string``\n\n### accessibilityLabel\n\n``PropTypes.string``\n\nThis value is added as an svg `<title>` element that is accessible to screen readers.\n(Note: when this option is used, an SVG `id` attribute will be automatically injected).\n\n### accessibilityDesc\n\n``PropTypes.string``\n\nThis value is added as an svg `<desc>` element that is accessible to screen readers.\n\n---\n\n## CONTRIBUTING\n\n* ⇄ Pull requests and ★ Stars are always welcome.\n* For bugs and feature requests, please create an issue.\n* Pull requests must be accompanied by passing automated tests (`$ npm test`).\n\n## [CHANGELOG](CHANGELOG.md)\n\n## [LICENSE](LICENSE)\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"react-svg-inline\",\n  \"version\": \"2.1.1\",\n  \"description\": \"A React component to inline your SVGs.\",\n  \"keywords\": [\n    \"react\",\n    \"svg\",\n    \"icon\",\n    \"inline\"\n  ],\n  \"author\": \"Maxime Thirouin\",\n  \"license\": \"MIT\",\n  \"repository\": \"https://github.com/MoOx/react-svg-inline.git\",\n  \"main\": \"lib/index.js\",\n  \"files\": [\n    \"lib\",\n    \"src\",\n    \"!**/__tests__\"\n  ],\n  \"dependencies\": {\n    \"classnames\": \"^2.2.1\",\n    \"prop-types\": \"^15.5.8\"\n  },\n  \"devDependencies\": {\n    \"ava\": \"^0.15.0\",\n    \"babel-cli\": \"^6.24.1\",\n    \"babel-core\": \"^6.24.1\",\n    \"babel-eslint\": \"^7.2.2\",\n    \"babel-preset-env\": \"^1.4.0\",\n    \"babel-preset-react\": \"^6.24.1\",\n    \"babel-preset-stage-3\": \"^6.24.1\",\n    \"eslint\": \"^4.19.1\",\n    \"eslint-config-i-am-meticulous\": \"^9.0.1\",\n    \"eslint-plugin-react\": \"^7.9.1\",\n    \"husky\": \"^0.14.3\",\n    \"npmpub\": \"^4.0.0\",\n    \"prettier\": \"^1.13.4\",\n    \"pretty-quick\": \"^1.6.0\",\n    \"react\": \"^16.0.0\",\n    \"react-dom\": \"^16.0.0\",\n    \"rimraf\": \"^2.4.4\"\n  },\n  \"peerDependencies\": {\n    \"react\": \"^0.14.9 || ^15.3.0 || ^16.0.0\"\n  },\n  \"scripts\": {\n    \"precommit\": \"pretty-quick --staged\",\n    \"prebabelify\": \"rimraf lib\",\n    \"babelify\": \"babel --copy-files src --out-dir lib\",\n    \"prepublish\": \"npm run babelify\",\n    \"lint\": \"eslint --fix src\",\n    \"ava\": \"ava\",\n    \"test\": \"npm run lint && npm run ava\",\n    \"release\": \"npmpub\"\n  },\n  \"babel\": {\n    \"presets\": [\n      \"babel-preset-env\",\n      \"babel-preset-stage-3\",\n      \"babel-preset-react\"\n    ]\n  },\n  \"eslintConfig\": {\n    \"extends\": \"eslint-config-i-am-meticulous/react\"\n  },\n  \"ava\": {\n    \"files\": [\n      \"src/**/__tests__/*.js\"\n    ],\n    \"failFast\": true,\n    \"verbose\": true,\n    \"require\": [\n      \"babel-core/register\"\n    ],\n    \"babel\": \"inherit\"\n  }\n}\n"
  },
  {
    "path": "src/__tests__/index.js",
    "content": "/* eslint-disable react/no-multi-comp, react/prop-types, react/jsx-no-bind */\n\nimport test from \"ava\";\nimport React from \"react\";\nimport ReactDOMServer from \"react-dom/server\";\n\nimport SVGInline from \"..\";\n\n// const result = ?\n// => https://github.com/sindresorhus/ava/issues/274\n\ntest(\"SVGInline: passes & merges className\", t => {\n  const result = ReactDOMServer.renderToStaticMarkup(\n    <SVGInline className=\"TestSVG\" svg=\"<svg><g></g></svg>\" />\n  );\n  t.is(\n    result,\n    '<span class=\"SVGInline TestSVG\"><svg class=\"SVGInline-svg ' +\n      'TestSVG-svg\"' +\n      \"><g></g></svg></span>\"\n  );\n});\n\ntest(\"SVGInline: parent component can be chosen by tagName\", t => {\n  const result = ReactDOMServer.renderToStaticMarkup(\n    <SVGInline component=\"div\" className=\"TestSVG\" svg=\"<svg><g></g></svg>\" />\n  );\n  t.is(\n    result,\n    '<div class=\"SVGInline TestSVG\"><svg class=\"SVGInline-svg TestSVG-svg\"' +\n      \"><g></g></svg></div>\"\n  );\n});\n\ntest(\"SVGInline: parent composite component can be chosen\", t => {\n  const TestComponent = props => {\n    return <div {...props} className=\"foo\" />;\n  };\n\n  const result = ReactDOMServer.renderToStaticMarkup(\n    <SVGInline\n      component={TestComponent}\n      className=\"TestSVG\"\n      svg=\"<svg><g></g></svg>\"\n    />\n  );\n  t.is(\n    result,\n    '<div class=\"foo\"><svg class=\"SVGInline-svg TestSVG-svg\"><g></g></svg>' +\n      \"</div>\"\n  );\n});\n\nconst svgPiece =\n  'width=\"24\" height=\"16px\"><g fill=\"none\"><path ' +\n  'fill=\"#ab234f\"></path></g></svg>';\nconst SVGInlineStart = '<span class=\"SVGInline\"><svg class=\"SVGInline-svg\"';\nconst SVGInlineCleanedStart =\n  '<span class=\"SVGInline SVGInline--cleaned\">' +\n  '<svg class=\"SVGInline-svg SVGInline--cleaned-svg\"';\n\ntest(\"SVGInline: doesn't cleanup the svg by default\", t => {\n  const result = ReactDOMServer.renderToStaticMarkup(\n    <SVGInline svg={`<svg ${svgPiece}`} />\n  );\n  t.is(result, `${SVGInlineStart} ${svgPiece}</span>`);\n});\n\ntest(\"SVGInline: can cleanup the svg\", t => {\n  const result = ReactDOMServer.renderToStaticMarkup(\n    <SVGInline cleanup svg={`<svg ${svgPiece}`} />\n  );\n  t.is(result, `${SVGInlineCleanedStart}><g><path></path></g></svg></span>`);\n});\n\ntest(\"SVGInline: cleanup the svg with exceptions\", t => {\n  const result = ReactDOMServer.renderToStaticMarkup(\n    <SVGInline cleanupExceptions={[\"fill\"]} svg={`<svg ${svgPiece}`} />\n  );\n  t.is(\n    result,\n    `${SVGInlineCleanedStart}><g fill=\"none\"><path fill=\"#ab234f\"></path>` +\n      \"</g></svg></span>\"\n  );\n});\n\ntest(\"SVGInline: should add width (and height automatically)\", t => {\n  const result = ReactDOMServer.renderToStaticMarkup(\n    <SVGInline svg={\"<svg><g></g></svg>\"} width=\"1rem\" />\n  );\n  t.is(\n    result,\n    `${SVGInlineStart} style=\"width: 1rem;height: 1rem;\"><g></g></svg></span>`\n  );\n});\n\ntest(\"SVGInline: should add width & height\", t => {\n  const result = ReactDOMServer.renderToStaticMarkup(\n    <SVGInline svg={\"<svg><g></g></svg>\"} width=\"1rem\" height=\"auto\" />\n  );\n  t.is(\n    result,\n    `${SVGInlineStart} style=\"width: 1rem;height: auto;\"><g></g></svg></span>`\n  );\n});\n\ntest(\"SVGInline: should add height\", t => {\n  const result = ReactDOMServer.renderToStaticMarkup(\n    <SVGInline svg={\"<svg><g></g></svg>\"} height=\"1rem\" />\n  );\n  t.is(result, `${SVGInlineStart} style=\"height: 1rem;\"><g></g></svg></span>`);\n});\n\ntest(\"SVGInline: does not pass internal props to component\", t => {\n  const TestComponent = props => {\n    t.not(props.className, undefined);\n    t.is(props.component, undefined);\n    t.is(props.classSuffix, undefined);\n    t.is(props.fill, undefined);\n    t.is(props.cleanup, undefined);\n    t.is(props.cleanupExceptions, undefined);\n\n    return <div className=\"foo\" />;\n  };\n\n  ReactDOMServer.renderToStaticMarkup(\n    <SVGInline\n      component={TestComponent}\n      className=\"TestSVG\"\n      classSuffix=\"-test\"\n      fill=\"#000000\"\n      svg=\"<svg><g></g></svg>\"\n      cleanupExceptions={[\"fake\"]}\n      cleanup\n    />\n  );\n});\n\ntest(\"SVGInline: includes title element if accessibilityLabel is provided\", t => {\n  const result = ReactDOMServer.renderToStaticMarkup(\n    <SVGInline svg={\"<svg><g></g></svg>\"} accessibilityLabel=\"My test title\" />\n  );\n  t.is(\n    result,\n    `${SVGInlineStart} role=\"img\" aria-labelledby=\"SVGInline-0-title\"><title id=\"SVGInline-0-title\">My test title</title><g></g></svg></span>`\n  );\n});\n\ntest(\"SVGInline: accessibilityLabel IDs are not the same\", t => {\n  const result1 = ReactDOMServer.renderToStaticMarkup(\n    <SVGInline\n      svg={\"<svg><g></g></svg>\"}\n      accessibilityLabel=\"First test title\"\n    />\n  );\n  const result2 = ReactDOMServer.renderToStaticMarkup(\n    <SVGInline\n      svg={\"<svg><g></g></svg>\"}\n      accessibilityLabel=\"Second test title\"\n    />\n  );\n  t.is(\n    result1,\n    `${SVGInlineStart} role=\"img\" aria-labelledby=\"SVGInline-1-title\"><title id=\"SVGInline-1-title\">First test title</title><g></g></svg></span>`\n  );\n  t.is(\n    result2,\n    `${SVGInlineStart} role=\"img\" aria-labelledby=\"SVGInline-2-title\"><title id=\"SVGInline-2-title\">Second test title</title><g></g></svg></span>`\n  );\n});\n\ntest(\"SVGInline: includes desc element if accessibilityDesc is provided\", t => {\n  const result = ReactDOMServer.renderToStaticMarkup(\n    <SVGInline\n      svg={\"<svg><g></g></svg>\"}\n      accessibilityDesc=\"Longer accessibility description of this svg image\"\n    />\n  );\n  t.is(\n    result,\n    `${SVGInlineStart}><desc>Longer accessibility description of this svg image</desc><g></g></svg></span>`\n  );\n});\n\ntest(\"SVGInline: accessibilityLabel doesn't crash on svg tag with newlines\", t => {\n  const result1 = ReactDOMServer.renderToStaticMarkup(\n    <SVGInline\n      svg={\"<svg \\n><g></g></svg>\"}\n      accessibilityLabel=\"Third test title\"\n    />\n  );\n  t.is(\n    result1,\n    `${SVGInlineStart} ${\"\\n\"} role=\"img\" aria-labelledby=\"SVGInline-3-title\"><title id=\"SVGInline-3-title\">Third test title</title><g></g></svg></span>`\n  );\n});\n"
  },
  {
    "path": "src/index.css",
    "content": ".SVGInline {\n  transform: translate3d(0, 0, 0); /* fix webkit/blink poor rendering issues */\n\n  /* it's better defined directly because of the cascade shit\n  width: inherit;\n  height: inherit;\n  line-height: inherit;\n  */\n\n  vertical-align: middle;\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.SVGInline-svg {\n  width: inherit;\n  height: inherit;\n  line-height: inherit;\n\n  color: inherit;\n  fill: currentColor;\n}\n"
  },
  {
    "path": "src/index.js",
    "content": "import React, { Component } from \"react\";\nimport PropTypes from \"prop-types\";\nimport cx from \"classnames\";\n\n// import styles from \"./styles\"\n\nconst cleanups = {\n  // some useless stuff for us\n  // that svgo doesn't remove\n  title: /<title>.*<\\/title>/gi,\n  desc: /<desc>.*<\\/desc>/gi,\n  comment: /<!--.*-->/gi,\n  defs: /<defs>.*<\\/defs>/gi,\n\n  // remove hardcoded dimensions\n  width: / +width=\"\\d+(\\.\\d+)?(px)?\"/gi,\n  height: / +height=\"\\d+(\\.\\d+)?(px)?\"/gi,\n\n  // remove fill\n  fill: / +fill=\"(none|#[0-9a-f]+)\"/gi,\n\n  // Sketch.app shit\n  sketchMSShapeGroup: / +sketch:type=\"MSShapeGroup\"/gi,\n  sketchMSPage: / +sketch:type=\"MSPage\"/gi,\n  sketchMSLayerGroup: / +sketch:type=\"MSLayerGroup\"/gi\n};\n\n// @styled(styles)\nclass SVGInline extends Component {\n  render() {\n    const {\n      className,\n      component,\n      svg,\n      fill,\n      width,\n      accessibilityLabel,\n      accessibilityDesc,\n      classSuffix,\n      cleanupExceptions,\n      ...componentProps\n    } = this.props;\n\n    let { cleanup, height } = this.props;\n\n    if (\n      // simple way to enable entire cleanup\n      cleanup === true ||\n      // passing cleanupExceptions enable cleanup as well\n      (cleanup.length === 0 && cleanupExceptions.length > 0)\n    ) {\n      cleanup = Object.keys(cleanups);\n    }\n    cleanup = cleanup.filter(key => {\n      return !(cleanupExceptions.indexOf(key) > -1);\n    });\n\n    if (width && height === undefined) {\n      height = width;\n    }\n\n    // remove useless props for wrapper\n    delete componentProps.cleanup;\n    delete componentProps.height;\n\n    const classes = cx({\n      SVGInline: true,\n      \"SVGInline--cleaned\": cleanup.length,\n      [className]: className\n    });\n    const svgClasses = classes.split(\" \").join(classSuffix + \" \") + classSuffix;\n    let svgStr = SVGInline.cleanupSvg(svg, cleanup).replace(\n      /<svg/,\n      `<svg class=\"${svgClasses}\"` +\n        (fill ? ` fill=\"${fill}\"` : \"\") +\n        (width || height\n          ? ' style=\"' +\n            (width ? `width: ${width};` : \"\") +\n            (height ? `height: ${height};` : \"\") +\n            '\"'\n          : \"\")\n    );\n    let match;\n    if (accessibilityDesc) {\n      match = /<svg(.|\\n|\\r\\n)*?>/.exec(svgStr);\n      const pos = match.index + match[0].length;\n      svgStr =\n        svgStr.substr(0, pos) +\n        `<desc>${accessibilityDesc}</desc>` +\n        svgStr.substr(pos);\n    }\n    if (accessibilityLabel) {\n      match = match || /<svg(.|\\n|\\r\\n)*?>/.exec(svgStr);\n      const pos = match.index + match[0].length - 1;\n      const id = `SVGInline-${SVGInline.idCount++}-title`;\n      svgStr =\n        svgStr.substr(0, pos) +\n        ` role=\"img\" aria-labelledby=\"${id}\"` +\n        svgStr.substr(pos, 1) +\n        `<title id=\"${id}\">${accessibilityLabel}</title>` +\n        svgStr.substr(pos + 1);\n    }\n    return React.createElement(component, {\n      ...componentProps, // take most props\n      className: classes,\n      dangerouslySetInnerHTML: {\n        __html: svgStr\n      }\n    });\n  }\n}\n\nSVGInline.propTypes = {\n  className: PropTypes.string,\n  classSuffix: PropTypes.string,\n  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n  svg: PropTypes.string.isRequired,\n  fill: PropTypes.string,\n  cleanup: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),\n  cleanupExceptions: PropTypes.array,\n  width: PropTypes.string,\n  height: PropTypes.string,\n  accessibilityLabel: PropTypes.string,\n  accessibilityDesc: PropTypes.string\n};\n\nSVGInline.defaultProps = {\n  component: \"span\",\n  classSuffix: \"-svg\",\n  cleanup: [],\n  cleanupExceptions: []\n};\n\nSVGInline.idCount = 0;\n\nSVGInline.cleanupSvg = (svg, cleanup = []) => {\n  return Object.keys(cleanups)\n    .filter(key => cleanup.indexOf(key) > -1)\n    .reduce((acc, key) => {\n      return acc.replace(cleanups[key], \"\");\n    }, svg)\n    .trim();\n};\n\nexport default SVGInline;\n"
  }
]