{"_id":"rollup-plugin-svg-hyperscript","_rev":"3-aef16a76510ce6367fa129976b08fe68","name":"rollup-plugin-svg-hyperscript","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"rollup-plugin-svg-hyperscript","version":"0.1.0","description":"Rollup plugin to import .svg files as React functional component","main":"dist/rollup-plugin-svg-hyperscript.cjs.js","module":"dist/rollup-plugin-svg-hyperscript.es.js","jsnext:main":"dist/rollup-plugin-svg-hyperscript.es.js","scripts":{"lint":"eslint --fix src/**","prebuild":"npm run lint","build":"rollup -c","pretest":"npm run build","test":"node tests/index.js","prepare":"npm test"},"repository":{"type":"git","url":"git+https://github.com/mohdovais/rollup-plugin-svg-hyperscript.git"},"keywords":["Rollup","SVG"],"author":{"name":"Mohd Ovais"},"license":"MIT","bugs":{"url":"https://github.com/mohdovais/rollup-plugin-svg-hyperscript/issues"},"homepage":"https://github.com/mohdovais/rollup-plugin-svg-hyperscript#readme","peerDependencies":{"rollup":">=1.12.0"},"dependencies":{"rollup-pluginutils":"^2.8.2","svg-parser":"^2.0.2"},"devDependencies":{"eslint":"^6.7.2","preact":"^10.0.5","preact-render-to-string":"^5.1.2","react":"^16.12.0","react-dom":"^16.12.0","require-from-string":"^2.0.2","rollup":"^1.27.8"},"gitHead":"e1fccefae01bcd7119fd91c900b8f16123ac1dc4","_id":"rollup-plugin-svg-hyperscript@0.1.0","_nodeVersion":"11.8.0","_npmVersion":"6.13.2","dist":{"integrity":"sha512-myG229HhLcY6/4FvWTPGAfZ3p7wcM6dOLFPOrenemxmMwj8FEiFns8rNmdYM1yCjZ8BkseUJmqXoEoqw6QzVqw==","shasum":"7c7b267c40994acea152cd3db3bf6b32f0e746fc","tarball":"https://registry.npmjs.org/rollup-plugin-svg-hyperscript/-/rollup-plugin-svg-hyperscript-0.1.0.tgz","fileCount":9,"unpackedSize":14092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd7SVNCRA9TVsSAnZWagAAjCsP+gN0Q/m+GJbqLa9f1834\nPc4FkjkWlcO86Bg/TqP5cGMfWYUIeGu74NVKghWjMakQ1ftwu/4CIBi1X00E\nDLbEDZM2B0+s6KfaU/tu7hCB2P83fT6a6unGpD1+KmshksphIS3pq/jnT4my\nj6ulB/jVjILH8W676QdFYmieTmiHJgLWkeGXXT5O/pMtfpY5dhcWEk/b1aie\ni/UPm8CLJ6/IdZW3SKaCdY9G4esaJ3op2VRqdnPeGNpvt/axIPOuLrTVNx75\nqsRsuAD3FRqdVzpMcxlGStGvZQpH3AEtYHsSnAAczosrKttuzQiJqucyQHE6\ni0AWp8yhq1xmEPtIoUO+MZsLSjXbmUDQnGncezqXvGyXpvH2SzTfRFlHpefF\n1Q7iNepqxaWi+3Exkufs9q7v+BIasqpmMSF53AAJYVtj/vUaIrT6l0nowOHD\nUMu958yCK8xeT7cFr3mhk6+HxVCahvvWv0uqGhk5Ku8h0n6UgQ+mvtgaz4Ng\nw4nzYZnc4+Y67tCknxHAw5ZT6gW8dnrE5DYGUnMYc9pxplKhTPrx1X1VPjus\nl0t6+xsP6D6dZQxGoY/WxYufEqyHF4HcjE3zSmPHIGlxu74fxArgo1tFHx6C\n7bO6Rf1ixrkrGTZYAZ63e07tGgYy0OAnRdkSE7nWlRaVoQJE7CUhLCc22Rbm\nWLN4\r\n=i5nH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCY+DZyCk2igsAy/Kt+vyRM7t+jvHCYpxmBgQD4axAQQQIhAJoYt5rfsCXzJmf2nraGoYPfIPgB1mTzY9rqh0Jee1L2"}]},"maintainers":[{"name":"mohdovais","email":"ovais.m@gmail.com"}],"_npmUser":{"name":"mohdovais","email":"ovais.m@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rollup-plugin-svg-hyperscript_0.1.0_1575822668715_0.7343941001654857"},"_hasShrinkwrap":false},"0.1.1":{"name":"rollup-plugin-svg-hyperscript","version":"0.1.1","description":"Rollup plugin to import .svg files as React functional component","main":"dist/rollup-plugin-svg-hyperscript.cjs.js","module":"dist/rollup-plugin-svg-hyperscript.es.js","jsnext:main":"dist/rollup-plugin-svg-hyperscript.es.js","scripts":{"lint":"eslint --fix src/**","prebuild":"npm run lint","build":"rollup -c","pretest":"npm run build","test":"node tests/index.js","prepare":"npm test"},"repository":{"type":"git","url":"git+https://github.com/mohdovais/rollup-plugin-svg-hyperscript.git"},"keywords":["rollup","svg","react","preact"],"author":{"name":"Mohd Ovais"},"license":"MIT","bugs":{"url":"https://github.com/mohdovais/rollup-plugin-svg-hyperscript/issues"},"homepage":"https://github.com/mohdovais/rollup-plugin-svg-hyperscript#readme","peerDependencies":{"rollup":">=1.12.0"},"dependencies":{"rollup-pluginutils":"^2.8.2","svg-parser":"^2.0.2"},"devDependencies":{"eslint":"^6.7.2","preact":"^10.0.5","preact-render-to-string":"^5.1.2","react":"^16.12.0","react-dom":"^16.12.0","require-from-string":"^2.0.2","rollup":"^1.27.8"},"gitHead":"3e65eb1d6c2a4e63c7e377f1b10bc9ac0fa539d8","_id":"rollup-plugin-svg-hyperscript@0.1.1","_nodeVersion":"11.8.0","_npmVersion":"6.13.2","dist":{"integrity":"sha512-BRQes3wVBWauy+0CKa2d+xRSy0qIBDD+MihjWDNjLzwTjineZBR+TD88jHB84/bb5Zpi3wzls9gW5sB79tOFDA==","shasum":"adedcac516faef657d5cd3b024ec390cd4f8eac7","tarball":"https://registry.npmjs.org/rollup-plugin-svg-hyperscript/-/rollup-plugin-svg-hyperscript-0.1.1.tgz","fileCount":9,"unpackedSize":13151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd7VhGCRA9TVsSAnZWagAAdH0P/2HEezi7VPueKu53qCKh\nELylp42RYB9/gH7t9uOoQX+OuUMFDzrHA2pjsfbampAYSLjgHErrAD1m/qku\n6+VOv5g8fQB3fEHL+ZTSG03A2raYoHUu4XAXhbivlLbUsrgoe2uU1/cPqSM2\nanVgcGp0GneGCzbzaBVk6PiEzIJ6blpcUJgohSf7r8b84NYgPkl9N7IEarmX\na1Rvflh9PSbc+Xa3v8GkynArncetY1ImmSwxIIP85oPGFrvnqZGlz0qCDwu6\nm3pX7q3lyK92iP5J4UauTxQKw+x2IWI6Y7pfGA2x5rNlm7gdGXGqARaYebKM\n3S6b15gyB2+kLGbtfxjh6fnZcMU0XJxFafFcQYNW9UOArDYnkKuL2EATFWBI\nyX9Lu5zZhXCHZzPpgGWcezhLT4LyyaXVlAZ1F8lyoOKVFactAfXo1nFX0dfA\njReMadTgA2JW62B+fenhgBPDvUXPsLBjzyaMlVKDj3UiglXnqiQDEFTr7oZV\npoW857+M83x0zWGJYY4ZufA75iNOeChzwVOFFHjadHywxFnpdY5be8QMH8pM\nf7XrNh/tjwIziq5bvbzLnpA+mhq8YdnX5Ro1GCGRZm3rDIYze/ZnBNtpCh28\nh6K49NV2UseyUDhnHbE1oEEgaeAMfrjgj81/EqQogLwGDMdq6p45urCJ6Cxr\nbbAK\r\n=0jgB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFeQJ72JedKn2HrjR2qqFSKPoTuIFZj+Ish0/Ri7cpBTAiEA397T6OhFa7gFsIBS5AHjKY+k3AaOAVBIbXAXZICW5WM="}]},"maintainers":[{"name":"mohdovais","email":"ovais.m@gmail.com"}],"_npmUser":{"name":"mohdovais","email":"ovais.m@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rollup-plugin-svg-hyperscript_0.1.1_1575835717874_0.41720062725340523"},"_hasShrinkwrap":false},"0.1.2":{"name":"rollup-plugin-svg-hyperscript","version":"0.1.2","description":"Rollup plugin to import .svg files as React functional component","main":"dist/rollup-plugin-svg-hyperscript.cjs.js","module":"dist/rollup-plugin-svg-hyperscript.es.js","jsnext:main":"dist/rollup-plugin-svg-hyperscript.es.js","scripts":{"lint":"eslint --fix src/**","prebuild":"npm run lint","build":"rollup -c","pretest":"npm run build","test":"node tests/index.js","prepare":"npm test"},"repository":{"type":"git","url":"git+https://github.com/mohdovais/rollup-plugin-svg-hyperscript.git"},"keywords":["rollup","svg","react","preact"],"author":{"name":"Mohd Ovais"},"license":"MIT","bugs":{"url":"https://github.com/mohdovais/rollup-plugin-svg-hyperscript/issues"},"homepage":"https://github.com/mohdovais/rollup-plugin-svg-hyperscript#readme","peerDependencies":{"rollup":">=1.12.0"},"dependencies":{"rollup-pluginutils":"^2.8.2","svg-parser":"^2.0.2"},"devDependencies":{"eslint":"^6.8.0","preact":"^10.1.1","preact-render-to-string":"^5.1.3","react":"^16.12.0","react-dom":"^16.12.0","require-from-string":"^2.0.2","rollup":"^1.28.0"},"gitHead":"2e0906eb1f0e5f93bb9f5c776202da8f23bf231b","_id":"rollup-plugin-svg-hyperscript@0.1.2","_nodeVersion":"11.8.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-2kHIX17RRcdr32Q7JKJrDY10jWGkV2Ocvy7rX0+GTvWs0OzDLMWEZrt1fETylmnQtjz87JluClXpETgXOLFTaA==","shasum":"f54f7fd013afaa9f2f64cfb7e2f9a6088b221292","tarball":"https://registry.npmjs.org/rollup-plugin-svg-hyperscript/-/rollup-plugin-svg-hyperscript-0.1.2.tgz","fileCount":4,"unpackedSize":10137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE7odCRA9TVsSAnZWagAAMSEP/A6o3V8SftlywXu5wBI5\nJlI9WAsq/FMrnSU7Hsrlq1lqmbWuy2GyMWlR2zWNMA027vYvMJUfkStD9sD1\nuCYIKZwAoX9YWUAIYyli49f7fh4HmZuugGn95npAfDwPXLLwV4QrusN9gv7v\nQlNavTW6UKu9jnr0w4srcXAf7Ir5lyUzQ5xS7B5HiTAq8cdPKprjlLW43NQR\nStn5PmGNC68ZG4eiSjmQbZjuTF6WP0HsMS7CIm6k1OkvfB1Vlyy1yJ/knUFq\n7hr7//VXB3ndGpv4OmoqEFSg7z+8hgszjtStyqGEn+zI13kdtyOJKdi5dt2c\n47dFbAp15qtowtfGcj/hDx0q1ReiMT36Tkc+U3Hyy5UGIcBT/7gWs8P67CZ1\ntus+irLcvqcshLUZvMB1Q1GtVWgeT+BHP4irFXtEC+v0+WD0N2e3zQq0IlqS\nhqZFI3qfiPGH1UlOI/mYX276eZssIUbaVHLHQQc2LzwnttzhQ+L9tCUiFdrA\nIAKuCGjYngSKG70/JmXKnH5YJrQd68ckwZi066BvAZxEVPIfOsNqt/syf2yG\nVFoMgk70A9ySWgz3SVoCOpfsy737+n7AOiIRvIM9IYzp2VmTDC9xa8IcptIF\nzWUS/JGYwHssJpXJaOhBc/uzjMvvrff5DCAKVNneLwrhpDac7dMh5Tey1EVX\nkG3t\r\n=XXdc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDj+kxp7Yx6pd/gAiohJmK9uJK6ZyWs1ZbgYQnea/MjZQIgdGxERjX/cGVo1IG2xAcYH72hklgm5HGGp817qSeSGbM="}]},"maintainers":[{"name":"mohdovais","email":"ovais.m@gmail.com"}],"_npmUser":{"name":"mohdovais","email":"ovais.m@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rollup-plugin-svg-hyperscript_0.1.2_1578351132501_0.3557650375727772"},"_hasShrinkwrap":false}},"time":{"created":"2019-12-08T16:31:08.715Z","0.1.0":"2019-12-08T16:31:08.921Z","modified":"2022-05-16T04:40:09.236Z","0.1.1":"2019-12-08T20:08:38.002Z","0.1.2":"2020-01-06T22:52:12.735Z"},"maintainers":[{"name":"mohdovais","email":"ovais.m@gmail.com"}],"description":"Rollup plugin to import .svg files as React functional component","homepage":"https://github.com/mohdovais/rollup-plugin-svg-hyperscript#readme","keywords":["rollup","svg","react","preact"],"repository":{"type":"git","url":"git+https://github.com/mohdovais/rollup-plugin-svg-hyperscript.git"},"author":{"name":"Mohd Ovais"},"bugs":{"url":"https://github.com/mohdovais/rollup-plugin-svg-hyperscript/issues"},"license":"MIT","readme":"# rollup-plugin-svg-hyperscript\n\nRollup plugin to import `.svg` files as React(_like_) component. \n\nThe plugin transforms SVG content to hyperscript (React.createElement) based functional component __not JSX__\n\n```xml\n<!-- rainbow.svg -->\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-14 -14 28 28\">\n    <circle r=\"14\" fill=\"#f00\"/>\n    <circle r=\"12\" fill=\"#ff7f00\"/>\n    <circle r=\"10\" fill=\"#ff0\"/>\n    <circle r=\"8\" fill=\"#0f0\"/>\n    <circle r=\"6\" fill=\"#00f\"/>\n    <circle r=\"4\" fill=\"#2E2B5F\" />\n    <circle r=\"2\" fill=\"#8B00FF\" />\n</svg>\n```\n\n```javascript\n// transformed import\nimport React from \"react\";\n\nexport default function rainbow(props) {\n  return React.createElement(\n    \"svg\",\n    props,\n    React.createElement(\"circle\", { r: 14, fill: \"#f00\" }, null),\n    React.createElement(\"circle\", { r: 12, fill: \"#ff7f00\" }, null),\n    React.createElement(\"circle\", { r: 10, fill: \"#ff0\" }, null),\n    React.createElement(\"circle\", { r: 8, fill: \"#0f0\" }, null),\n    React.createElement(\"circle\", { r: 6, fill: \"#00f\" }, null),\n    React.createElement(\"circle\", { r: 4, fill: \"#2e2b5f\" }, null),\n    React.createElement(\"circle\", { r: 2, fill: \"#8b00ff\" }, null)\n  );\n}\nrainbow.defaultProps = {\n  xmlns: \"http://www.w3.org/2000/svg\",\n  viewBox: \"-14 -14 28 28\"\n}\n```\n\n## Installation\n\n```shell\nnpm install --save-dev rollup-plugin-svg-hyperscript\n```\n\n## Usage\n\nBy default plugin uses React.createElement and transform properties to camelCase.\n\n```javascript\n// rollup.config.js\nimport svgImport from \"rollup-plugin-svg-hyperscript\";\n\nexport default {\n  input: \"src/main.js\",\n  output: {\n    file: \"bundle.js\",\n    format: \"esm\"\n  },\n  plugins: [svgImport()]\n};\n```\n\n```javascript\n// components/header.jsx\nimport React from 'react';\nimport Logo from './company-logo.svg';\n\nexport function(props){\n  return (\n    <header>\n      <Logo width={32} height={32} />\n      <h1>{props.compnayName}</h1>\n    </header>\n  );\n}\n```\n\n## Configurations\n\n```javascript\n// rollup.config.js\nimport svgImport from \"rollup-plugin-svg-hyperscript\";\n\nexport default {\n  input: \"src/main.js\",\n  output: {\n    file: \"bundle.js\",\n    format: \"esm\"\n  },\n  plugins: [\n    svgImport({\n      // import declaration for element renderer\n      importDeclaration: \"import { h } from 'preact'\", // Default: \"import React from 'react'\"\n\n      // Pragma to create element, by default it uses React.createElement\n      pragma: \"h\", // Default: \"React.createElement\",\n\n      // React requires all properties and attributes in camelCase, e.g. \n      // xmlns:xlink should be provided as xmlnsXlink \n      // and enable-background as enabelBackground.\n      // Whereas Preact has raw HTML attribute/property names support and \n      // transformation is not needed.\n      // https://preactjs.com/guide/v10/differences-to-react/#raw-html-attributeproperty-names\n      transformPropNames: false // Default: true\n    })\n  ]\n};\n```\n","readmeFilename":"README.md"}