{"_id":"@exodus/babel-plugin-react-inline-svg-unique-id","_rev":"203-924e75a2aa45062b79a88f400e584db5","name":"@exodus/babel-plugin-react-inline-svg-unique-id","dist-tags":{"latest":"1.3.1-exodus.0"},"versions":{"1.3.1-exodus.0":{"name":"@exodus/babel-plugin-react-inline-svg-unique-id","version":"1.3.1-exodus.0","keywords":["babel-plugin"],"author":{"name":"Laurynas Aleksiūnas","email":"laurynas.aleksiunas@gmail.com"},"license":"MIT","_id":"@exodus/babel-plugin-react-inline-svg-unique-id@1.3.1-exodus.0","maintainers":[{"name":"wcastr","email":"walter@exodus.io"},{"name":"alexxvazquezz","email":"alejandro.va@exodus.io"},{"name":"brandon-exodus","email":"brandon.ca@exodus.io"},{"name":"daniel.je","email":"daniel.je@exodus.io"},{"name":"rg911","email":"xian.f.liu@gmail.com"},{"name":"alex.alexandrius","email":"s.pataridze@gmail.com"},{"name":"filipexodus","email":"filip@exodus.io"},{"name":"jeremyex0j","email":"jeremy.eu@exodus.io"},{"name":"ryansquared-npm","email":"npm@ryansquared.pub"},{"name":"andrescarreon","email":"andres.di@exodus.io"},{"name":"florianmathieu","email":"florian.ma@exodus.io"},{"name":"dwolfgram","email":"daniel.j.wolfgram@gmail.com"},{"name":"eox42","email":"bojan.ko@exodus.io"},{"name":"iamsaikranthi","email":"iamsaikranthi@gmail.com"},{"name":"janwe","email":"jan.we@exodus.io"},{"name":"fosterdill","email":"fosterdill@gmail.com"},{"name":"eduardoexodus","email":"eduardo.ta@exodus.io"},{"name":"achal_exodus","email":"achal.si@exodus.io"},{"name":"luvette","email":"luvette.pe@exodus.io"},{"name":"fboucquez","email":"fboucquez@gmail.com"},{"name":"skapala","email":"szymon20000@gmail.com"},{"name":"nlavrex","email":"nikita.la@exodus.io"},{"name":"umito","email":"umitodabasi@gmail.com"},{"name":"lanahizzle","email":"tim.la@exodus.io"},{"name":"iaacek","email":"iaacek@gmail.com"},{"name":"nafisholeh","email":"rachmadnafisholeh@gmail.com"},{"name":"ariene-exodus","email":"ariene.ri@exodus.io"},{"name":"ps.mcnally","email":"patrick.mc@exodus.io"},{"name":"akinncar","email":"akinncar@hotmail.com"},{"name":"matias.la","email":"matias.la@exodus.io"},{"name":"gaganatexodus","email":"gagan.ra@exodus.io"},{"name":"voltagebots","email":"okpako.fr@exodus.io"},{"name":"jhony112","email":"femi.babs112@gmail.com"},{"name":"siva-ramnathan","email":"sivaramakrishnan.ra@exodus.io"},{"name":"kwwood","email":"kevin.w@exodus.io"},{"name":"sergii_bo","email":"sergii.bo@exodus.io"},{"name":"dimitrios.pa","email":"dimitrios.pa@exodus.io"},{"name":"mongkuen","email":"mongkuen.sun@gmail.com"},{"name":"philipcr","email":"philip.cr@exodus.io"},{"name":"jacobbr22","email":"jacob.br@exodus.io"},{"name":"kashifchoudhry","email":"mkclhr@hotmail.com"},{"name":"lekzd","email":"alexandr.ko@exodus.io"},{"name":"cdotta","email":"cdotta90@gmail.com"},{"name":"alexandrbbm","email":"alexandr.bbm@gmail.com"},{"name":"danm.exodus","email":"daniel.mu@exodus.io"},{"name":"danh.t.vo","email":"danh.vo@exodus.io"},{"name":"ezenwankwogabriel","email":"ezenwankwogabriel@gmail.com"},{"name":"meniem","email":"aly@exodus.io"},{"name":"mzndako","email":"mzndako@gmail.com"},{"name":"ianertson","email":"sebbekarlsson97@gmail.com"},{"name":"kevva","email":"kevinmartensson@gmail.com"},{"name":"jumokeolads","email":"jumoke.ol@exodus.io"},{"name":"aaronloexodus","email":"aaron.lo@exodus.io"},{"name":"vikgmdev","email":"vikgm.dev@gmail.com"},{"name":"iamcrazycoder","email":"iamcrazycoder@gmail.com"},{"name":"cassapula","email":"bruno.cassapula@outlook.com"},{"name":"wjbeau","email":"will@wjbeaumont.org"},{"name":"feri42","email":"feri@feridot.com"},{"name":"jprichardson","email":"jprichardson@gmail.com"},{"name":"farisissa","email":"farisissa8@gmail.com"},{"name":"dooglio","email":"doug@dooglio.net"},{"name":"ryanzim","email":"opensrc@ryanzim.com"},{"name":"headfire","email":"egorvodopyanov@gmail.com"},{"name":"gutenye","email":"ywzhaifei@gmail.com"},{"name":"mosesbot","email":"moses@exodus.io"},{"name":"roccomuso","email":"roccomusolino92@gmail.com"},{"name":"dcastagnoli","email":"daniel@exodus.io"},{"name":"sonaye","email":"ain@abcd.sa"},{"name":"nareg_exodus","email":"nareg@exodus.io"},{"name":"ves","email":"ves@exodus.io"},{"name":"tenaciousmv","email":"mark@tradle.io"},{"name":"asyakost","email":"asya@exodus.io"},{"name":"bulgakovk","email":"kbulgakov@yahoo.com"},{"name":"sekhmet","email":"wiktor.tkaczynski@gmail.com"},{"name":"chalker","email":"chalkerx@gmail.com"},{"name":"andrejb","email":"andrej-borstnik@hotmail.com"},{"name":"gordonel","email":"goraelec@protonmail.com"},{"name":"richayotte","email":"rich@ayottesoftware.com"},{"name":"jaydp17","email":"jaydp17@gmail.com"},{"name":"olistic","email":"moliverafreire@gmail.com"},{"name":"joepie91","email":"admin@cryto.net"},{"name":"merlz","email":"john.staker@ymail.com"},{"name":"jadechip","email":"jim.eric.skogman@gmail.com"},{"name":"vbonini","email":"victor@bonini.tech"},{"name":"cooncesean","email":"sean@exodus.io"},{"name":"devopsrobot","email":"devopsrobot@exodus.io"},{"name":"jenish-sojitra","email":"jenish@exodus.io"},{"name":"unidwell","email":"gregor.mirai@gmail.com"},{"name":"nachoalvarez","email":"ignacioalvarez92@gmail.com"},{"name":"giovannirco","email":"giovannirco@gmail.com"},{"name":"ilyavf","email":"fadeev.ilya@gmail.com"},{"name":"rec","email":"espinosacurbelo@gmail.com"},{"name":"dncabal","email":"dncabal@gmail.com"},{"name":"r1oga","email":"r1oga@tuta.io"},{"name":"diegomura","email":"diegomuracciole@gmail.com"},{"name":"danilsergeev","email":"danil@exodus.io"},{"name":"lanre-mark","email":"lanre.developer@gmail.com"},{"name":"sunilagrawal","email":"sunilagrawal@gmail.com"},{"name":"guillecura","email":"guille@cura.is"},{"name":"mariosvlad","email":"marios.vladimerou@protonmail.com"},{"name":"federico-po","email":"federico.po@exodus.io"},{"name":"pagan404","email":"saraspap@protonmail.com"}],"homepage":"https://github.com/laleksiunas/inline-svg-unique-id/","bugs":{"url":"https://github.com/laleksiunas/inline-svg-unique-id/issues"},"dist":{"shasum":"29670c08ed996c02c28bdf983a4bdf29373a163a","tarball":"https://registry.npmjs.org/@exodus/babel-plugin-react-inline-svg-unique-id/-/babel-plugin-react-inline-svg-unique-id-1.3.1-exodus.0.tgz","fileCount":6,"integrity":"sha512-soWPOovfYNlJCtgRN4HlS2AaBfz7YIQRJjJ9X+Th64b6axc7IT9XnP2CT9g5nVarwUC4nbAr/8Z0qY+ILGF1bw==","signatures":[{"sig":"MEQCIGwoTqXT6zYVKyyaWILCRH3u5tCtUCj5oahDCkFOZSzOAiBB68WLdkTK8basak6nz8MUkfph7V7epRQ8YsavPMTSPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJitdNlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbYw/9FY5KuRccWFaVZ6rnyojUeI0o/bNt+0Un3Wm8QQZdY1cwJH/I\r\n0FsS5hVSMKIph8AaMAXIjEvgqxFsmyLLrsJADIU7CrLyGKySFW7xaaDhcUFo\r\nViZdryn92VtpFuk198YMv9Oi5sLYk5yEAIfNGVrcpFr6W4a+/y1769WKARM4\r\nkm/ILx8I6YZ+ar4djYtWplrkvfBV7ZLbcRTDW6r1vK/s56x+HZBD0wj1hoC3\r\nlqXgkIAWm4N0iszT9I3UVBWccVlX+B8ZUqpXFB85Db/dBA8K/DSWPYRLZymT\r\npDd1RaskDfwqEaWJbKL0qcER5vkZgvbVYsbYx5Prm10Ecy4BDSUuJ45nK7jK\r\nKgGV59fenogUxHXTSJR5DgbDvHUu4AgpnSve5GUwtYp/NQ+QBfY7txbzRHHF\r\nYs323DgehnDa7nX1QubTUnqeKiM8+eEhtK7afnWVcPfo1zQG+v78fUmv7oek\r\ndIZ5wzoXBesJUJWsRnhTkJCrjBqtGX4GezbD6h7aUjjUztAvkgWkDK+LgGcx\r\nujvIjBWJglqf/rOvRj6lIZ2iP1ZkwyeFzQy1e1O//N5aM3NEvkzjBr/s51Xx\r\nltSuXM9jo//XJzH7per8zm3nc/8TK24rkHl2+XT5rNTw/z/6wPXd21RZhr0u\r\nEFUcjNajHXUWRsxELiT2GhC7i59s3qTyLzo=\r\n=vdu1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","scripts":{"test":"jest","build":"babel -d lib --ignore \"**/*.spec.js\" src","prebuild":"rm -rf lib/","prepublishOnly":"yarn run build"},"_npmUser":{"name":"headfire","email":"egorvodopyanov@gmail.com"},"repository":{"url":"git+https://github.com/laleksiunas/inline-svg-unique-id.git","type":"git"},"description":"Babel plugin for applying generated ids to inline React SVG components","directories":{},"dependencies":{"@babel/template":"7.15.4","@babel/plugin-syntax-jsx":"7.14.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/babel-plugin-react-inline-svg-unique-id_1.3.1-exodus.0_1656083301001_0.7556479856539207","host":"s3://npm-registry-packages"}}},"time":{"created":"2022-06-24T15:08:20.936Z","modified":"2026-09-25T18:28:49.540Z","1.3.1-exodus.0":"2022-06-24T15:08:21.164Z"},"bugs":{"url":"https://github.com/laleksiunas/inline-svg-unique-id/issues"},"author":{"name":"Laurynas Aleksiūnas","email":"laurynas.aleksiunas@gmail.com"},"license":"MIT","homepage":"https://github.com/laleksiunas/inline-svg-unique-id/","keywords":["babel-plugin"],"repository":{"url":"git+https://github.com/laleksiunas/inline-svg-unique-id.git","type":"git"},"description":"Babel plugin for applying generated ids to inline React SVG components","maintainers":[{"email":"julio.vi@exodus.io","name":"juraex"},{"email":"kevinmartensson@gmail.com","name":"kevva"},{"email":"doguhan.gu@exodus.io","name":"doguhan"},{"email":"jan.we@exodus.io","name":"janwe"},{"email":"jprichardson@gmail.com","name":"jprichardson"},{"email":"farisissa8@gmail.com","name":"farisissa"},{"email":"egorvodopyanov@gmail.com","name":"headfire"},{"email":"ywzhaifei@gmail.com","name":"gutenye"},{"email":"moses@exodus.io","name":"mosesbot"},{"email":"daniel@exodus.io","name":"dcastagnoli"},{"email":"ain@abcd.sa","name":"sonaye"},{"email":"mvayngrib@gmail.com","name":"tenaciousmv"},{"email":"asya@exodus.io","name":"asyakost"},{"email":"kbulgakov@yahoo.com","name":"bulgakovk"},{"email":"chalkerx@gmail.com","name":"chalker"},{"email":"andrej-borstnik@hotmail.com","name":"andrejb"},{"email":"jaydp17@gmail.com","name":"jaydp17"},{"email":"moliverafreire@gmail.com","name":"olistic"},{"email":"admin@cryto.net","name":"joepie91"},{"email":"john.staker@ymail.com","name":"merlz"},{"email":"victor@bonini.tech","name":"vbonini"},{"email":"devopsrobot@exodus.io","name":"devopsrobot"},{"email":"jenish@exodus.io","name":"jenish-sojitra"},{"email":"sagar@exodus.io","name":"cryptosgr"},{"email":"diegomuracciole@gmail.com","name":"diegomura"},{"email":"lanre.developer@gmail.com","name":"lanre-mark"},{"email":"federico.po@exodus.io","name":"federico-po"},{"email":"akinncar@hotmail.com","name":"akinncar"},{"email":"fboucquez@gmail.com","name":"fboucquez"},{"email":"tim.la@exodus.io","name":"lanahizzle"},{"email":"kevin.w@exodus.io","name":"kwwood"},{"email":"joshuabot@exodus.io","name":"joshuabot"},{"email":"aly@exodus.io","name":"meniem"},{"email":"alexandr.bbm@gmail.com","name":"alexandrbbm"},{"email":"scottloz@protonmail.com","name":"angelloz"},{"email":"nacho@exodus.io","name":"nacho-exodus"},{"email":"s.pataridze@gmail.com","name":"alex.alexandrius"},{"email":"espinosacurbelo@gmail.com","name":"rec"},{"email":"jamie@exodus.io","name":"jamiemaw"},{"email":"james.gre@exodus.io","name":"james-gre"},{"email":"shehryarshoukat6@gmail.com","name":"shehryar6"},{"email":"clark@exodus.io","name":"clarkexo"},{"email":"tunguyenuni@gmail.com","name":"tunguyennnnn"},{"email":"mikita.hr@exodus.io","name":"mikita-hr"},{"email":"jeremiah.sc@exodus.io","name":"jschopen"},{"email":"marcos.kichel@gmail.com","name":"marcos.kichel"},{"email":"andrew.to@exodus.io","name":"andrewtoth-exodus"},{"email":"julian@exodus.io","name":"kryptkeep"},{"email":"svolsky+npm@xn--zer-2na.net","name":"633kh4ck"},{"email":"mykhailo.ba@exodus.io","name":"mbaraniak-exodus"},{"email":"awesomeniko@pm.me","name":"awesomeniko"},{"email":"simon.schmell@gmail.com","name":"r4vn"},{"email":"ericarlos23@gmail.com","name":"muratso"},{"email":"clintyn.un@exodus.io","name":"clintyn"},{"email":"philip.wa@exodus.io","name":"phil-exodus"},{"email":"jason.yon@exodus.io","name":"exo-jason"},{"email":"agent-neo@exodus.io","name":"exodus-neo"},{"email":"richard.nw@exodus.io","name":"exorich"},{"email":"xian.f.liu@gmail.com","name":"rg911"},{"email":"peter.th@exodus.io","name":"jdmdreamer"},{"email":"tom@exodus.io","name":"thom-exodus"},{"email":"ruben@exodus.io","name":"uanl619"},{"email":"arlen.ca@exodus.io","name":"arlen-exodus"},{"email":"yalomist@gmail.com","name":"yalomist"},{"email":"joshua.ro@exodus.io","name":"joshua-rogers-exodus"},{"email":"me@sripwoud.xyz","name":"sripwoud"},{"email":"gdg@exodus.com","name":"xogdg"},{"email":"christopher.ri@exodus.io","name":"chrisrichexo"},{"email":"josue@exodus.io","name":"josuexo"},{"email":"yevhenii.mo@exodus.io","name":"yevhenii-mo-exodus"},{"email":"bear.hu@exodus.io","name":"bewarden"},{"email":"github@lemu.sh","name":"1emu"},{"email":"andyespagnolo@gmail.com","name":"andyesp"},{"email":"domagoj.je@exodus.io","name":"dj_exodus"}],"readme":"# inline-svg-unique-id\n\nEfficient and SSR friendly ID generator at the runtime for inline SVG components definitions.\n\n## Installation\n\n```shell\n$ npm install @exodus/inline-svg-unique-id-react\n$ npm install --save-dev babel-plugin-react-inline-svg-unique-id\n```\n\n## Why?\n\nInline SVG components have a duplicated definitions issue. Let's say you want to import such an icon twice in your page:\n\n```jsx\nconst Icon = () => (\n  <svg height=\"150\" width=\"400\">\n    <defs>\n      <linearGradient id=\"grad1\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n        <stop offset=\"0%\" style=\"stop-color:rgb(255,255,0);stop-opacity:1\" />\n        <stop offset=\"100%\" style=\"stop-color:rgb(255,0,0);stop-opacity:1\" />\n      </linearGradient>\n    </defs>\n    <ellipse cx=\"200\" cy=\"70\" rx=\"85\" ry=\"55\" fill=\"url(#grad1)\" />\n  </svg>\n);\n```\n\nThe ellipse element gets linear gradient fill which is referenced by id. Inlining two or more such icons in the same page\nwill cause id duplications issues, and the browser might fail to paint the gradient. This library will transform inline SVG components at\nthe build-time and add code that generates ids at the runtime. For example, the previous icon is transformed to:\n\n```jsx\nimport { useUniqueInlineId } from '@exodus/inline-svg-unique-id-react';\n\nconst Icon = () => {\n  const gradientId = useUniqueInlineId();\n  \n  return (\n    <svg height=\"150\" width=\"400\">\n      <defs>\n        <linearGradient id={gradientId} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n          <stop offset=\"0%\" style=\"stop-color:rgb(255,255,0);stop-opacity:1\" />\n          <stop offset=\"100%\" style=\"stop-color:rgb(255,0,0);stop-opacity:1\" />\n        </linearGradient>\n      </defs>\n      <ellipse cx=\"200\" cy=\"70\" rx=\"85\" ry=\"55\" fill={`url(#${gradientId})`}/>\n    </svg>\n  );\n};\n```\n\n## Usage\n\n**With SVGR:**\n\nCreate .svgrrc.js file in the project root:\n```js\nmodule.exports = {\n  jsx: {\n    babelConfig: {\n      plugins: ['react-inline-svg-unique-id']\n    }\n  }\n};\n```\nFor more information refer to SVGR transforms [documentation](https://react-svgr.com/docs/custom-transformations/).\n\n**With SSR:**\n\nWrap your application in the generation context provider:\n\n```jsx\nimport { Provider as UniqueIdGeneratorProvider } from '@exodus/inline-svg-unique-id-react';\n\nconst YourApp = () => (\n  <UniqueIdGeneratorProvider>\n    ...your app stuff...\n  </UniqueIdGeneratorProvider>\n);\n```\n\n**Customizing generated ID prefix:**\n\nWrap your application in the generation context provider and specify _idPrefix_ property. **Note:** Prefix property\nis evaluated once and will not change during sequential rerenders.\n\n```jsx\nimport { Provider as UniqueIdGeneratorProvider } from '@exodus/inline-svg-unique-id-react';\n\nconst YourApp = () => (\n  <UniqueIdGeneratorProvider idPrefix=\"custom-prefix\">\n    ...your app stuff...\n  </UniqueIdGeneratorProvider>\n);\n```\n\nIt is also possible to nest providers and have different prefixes for separate branches.\n\n```jsx\nimport { Provider as UniqueIdGeneratorProvider } from '@exodus/inline-svg-unique-id-react';\n\nconst YourApp = () => (\n  <UniqueIdGeneratorProvider idPrefix=\"id\">\n    <UniqueIdGeneratorProvider idPrefix=\"other-id\">\n      // prefix is \"other-id\"\n    </UniqueIdGeneratorProvider>\n    // prefix is \"id\"\n  </UniqueIdGeneratorProvider>\n);\n```\n","readmeFilename":"README.md"}