{"id":19134,"library":"babel-plugin-react-inline-svg-unique-id","title":"Inline SVG Unique ID","description":"A Babel plugin (v1.5.0) that transforms inline React SVG components at build time to replace hardcoded definition IDs with runtime-generated unique IDs, preventing ID collisions when the same SVG is used multiple times on a page. Requires the companion runtime package @inline-svg-unique-id/react. Stable, updated sporadically, maintained by a single contributor. Key differentiator: SSR-friendly with a context provider for custom ID prefixes, unlike alternatives that rely on random hashes without SSR support.","status":"active","version":"1.5.0","language":"javascript","source_language":"en","source_url":"https://github.com/laleksiunas/inline-svg-unique-id","tags":["javascript","babel-plugin"],"install":[{"cmd":"npm install babel-plugin-react-inline-svg-unique-id","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-react-inline-svg-unique-id","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-react-inline-svg-unique-id","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency provides useUniqueInlineId hook and Provider for SSR","package":"@inline-svg-unique-id/react","optional":false}],"imports":[{"note":"CommonJS only; no default ESM export. Use require in Babel config.","wrong":"import babelPluginReactInlineSvgUniqueId from 'babel-plugin-react-inline-svg-unique-id'","symbol":"default","correct":"module.exports = require('babel-plugin-react-inline-svg-unique-id')"},{"note":"Named export from the runtime package.","wrong":"import useUniqueInlineId from '@inline-svg-unique-id/react'","symbol":"useUniqueInlineId","correct":"import { useUniqueInlineId } from '@inline-svg-unique-id/react'"},{"note":"Named export; also available as UniqueIdGeneratorProvider alias for clarity.","wrong":"import { UniqueIdGeneratorProvider } from '@inline-svg-unique-id/react'","symbol":"Provider","correct":"import { Provider } from '@inline-svg-unique-id/react'"}],"quickstart":{"code":"// Install: npm install babel-plugin-react-inline-svg-unique-id @inline-svg-unique-id/react\n\n// .babelrc\n{\n  \"plugins\": [\"react-inline-svg-unique-id\"]\n}\n\n// App.jsx\nimport { Provider as UniqueIdGeneratorProvider } from '@inline-svg-unique-id/react';\n\nconst YourApp = () => (\n  <UniqueIdGeneratorProvider>\n    <Icon />\n    <Icon />\n  </UniqueIdGeneratorProvider>\n);\n\n// Icon.jsx\nimport { useUniqueInlineId } from '@inline-svg-unique-id/react';\n\nconst Icon = () => {\n  const gradientId = useUniqueInlineId();\n  return (\n    <svg>\n      <defs>\n        <linearGradient id={gradientId}>\n          <stop offset=\"0%\" stopColor=\"red\" />\n        </linearGradient>\n      </defs>\n      <ellipse fill={`url(#${gradientId})`} />\n    </svg>\n  );\n};","lang":"javascript","description":"Shows setup with Babel config, Provider wrapper, and hook usage to generate unique SVG definition IDs."},"warnings":[{"fix":"Consider alternatives if you need ongoing support.","message":"The plugin is not actively maintained; last update was in 2021.","severity":"deprecated","affected_versions":"<=1.5.0"},{"fix":"Run: npm install @inline-svg-unique-id/react","message":"The runtime package @inline-svg-unique-id/react is required and must be installed separately.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If you need dynamic prefixes, create a new Provider instance.","message":"Provider idPrefix prop is evaluated only once; changing it on rerenders has no effect.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install @inline-svg-unique-id/react","cause":"The runtime dependency is not installed.","error":"Error: Cannot find module '@inline-svg-unique-id/react'"},{"fix":"Wrap your app with <Provider> from '@inline-svg-unique-id/react'.","cause":"Missing Provider wrapper causing ID collision warning from browser.","error":"The id 'grad1' is already defined, skipping definition"},{"fix":"Use import { useUniqueInlineId } from '@inline-svg-unique-id/react'","cause":"Using incorrect import syntax (default import instead of named).","error":"Attempted import error: 'useUniqueInlineId' is not exported from '@inline-svg-unique-id/react'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}