{"library":"react-svg","title":"React SVG Component","description":"react-svg is a React component designed to fetch SVG files from a given URL and inject their raw markup directly into the DOM, rather than rendering them as `<img>` tags. This approach, powered by the underlying `@tanem/svg-injector` library, enables full manipulation of the SVG's internal elements via CSS and JavaScript, unlocking possibilities like dynamic styling, animation, and interactivity that are not possible with traditional `<img>` elements. It also features client-side caching of fetched SVGs to reduce redundant network requests for repeated assets. The package is actively maintained, with its current stable version being 17.2.4, and exhibits a healthy release cadence, often seeing updates within a three-month window. It ships with TypeScript type definitions, enhancing development in TypeScript environments.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-svg"],"cli":null},"imports":["import { ReactSVG } from 'react-svg'","import type { ReactSVGProps } from 'react-svg'","import { SVGInjector } from '@tanem/svg-injector'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { createRoot } from 'react-dom/client';\nimport { ReactSVG } from 'react-svg';\n\nconst rootElement = document.getElementById('root');\n\nif (rootElement) {\n  const root = createRoot(rootElement);\n  root.render(\n    <div>\n      <h1>My Application</h1>\n      <p>Loading an external SVG using ReactSVG:</p>\n      <ReactSVG\n        src=\"/path/to/your/image.svg\"\n        beforeInjection={(svg) => {\n          console.log('SVG about to be injected:', svg.id);\n          svg.setAttribute('style', 'width: 100px; height: 100px;');\n        }}\n        afterInjection={(svg) => console.log('SVG injected:', svg.id)}\n        onError={(error) => console.error('Error loading SVG:', error.message)}\n        loading={() => <span style={{ color: 'blue' }}>Loading SVG...</span>}\n        fallback={() => <span style={{ color: 'red' }}>Could not load SVG</span>}\n      />\n      <p>Ensure 'image.svg' is accessible at the specified path.</p>\n    </div>\n  );\n} else {\n  console.error(\"Root element 'root' not found.\");\n}","lang":"typescript","description":"Demonstrates basic usage of `ReactSVG` to load an external SVG, including lifecycle callbacks, error handling, and a loading fallback. It highlights DOM manipulation before injection.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}