{"library":"react-inlinesvg","title":"React Inlinesvg","description":"react-inlinesvg is a React component and hook designed for loading and rendering SVG files directly inline within your application's DOM. It supports various `src` inputs including local paths, remote URLs, data URIs, and raw SVG strings, offering broad flexibility. The current stable version is 4.3.0. The package maintains an active release cadence, frequently publishing minor updates for bug fixes, dependency upgrades, and new features, such as the `useInlineSVG` hook introduced in v4.3.0. Key differentiators include robust caching mechanisms for remote SVGs (both in-memory and browser cache with `CacheProvider`), server-side rendering (SSR) compatibility, and extensive customization through props like `preProcessor` for SVG content manipulation, `loader` for loading states, and comprehensive error handling callbacks. This enables developers to dynamically style and interact with SVGs, addressing common challenges like external stylesheet coupling and inefficient image requests.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-inlinesvg"],"cli":null},"imports":["import SVG from 'react-inlinesvg';","import { useInlineSVG } from 'react-inlinesvg';","import CacheProvider from 'react-inlinesvg/provider';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport SVG from 'react-inlinesvg';\nimport CacheProvider from 'react-inlinesvg/provider';\n\nconst MySVGIcon = ({ src, title, description, width = 64, height = 64 }) => {\n  const [error, setError] = useState(null);\n  const [loading, setLoading] = useState(true);\n\n  return (\n    <SVG\n      src={src}\n      width={width}\n      height={height}\n      title={title}\n      description={description}\n      cacheRequests={true}\n      loader={loading && <div style={{ width, height, background: '#eee', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>Loading...</div>}\n      onError={(err) => {\n        console.error('SVG loading error:', err);\n        setError(err);\n        setLoading(false);\n      }}\n      onLoad={(loadedSrc, isCached) => {\n        console.log(`SVG loaded: ${loadedSrc} (cached: ${isCached})`);\n        setLoading(false);\n        setError(null);\n      }}\n      preProcessor={(code) => code.replace(/fill=\"(?!none).*?\"/g, 'fill=\"currentColor\"')}\n      // Any additional props are passed to the SVG element\n      style={{ color: '#007bff' }} // Example: Change SVG fill via currentColor\n    >\n      {error ? <div style={{ width, height, border: '1px solid red', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'red' }}>Error loading SVG</div> : null}\n    </SVG>\n  );\n};\n\nexport default function App() {\n  const remoteSvgSrc = 'https://cdn.svglogos.dev/logos/react.svg';\n  const localSvgPath = '/my-local-icon.svg'; // Ensure this file exists in your public directory\n\n  // In a real app, ensure your build system handles local SVG paths appropriately\n  // For CRA, localSvgPath can be a direct path to public/, or import from assets folder.\n  // For illustration purposes, assuming it's accessible.\n\n  return (\n    <CacheProvider>\n      <div style={{ fontFamily: 'sans-serif', padding: '20px' }}>\n        <h1>react-inlinesvg Demo</h1>\n        <p>Remote SVG (React logo):</p>\n        <MySVGIcon src={remoteSvgSrc} title=\"React Logo\" width={80} height=\"auto\" />\n        \n        <p style={{ marginTop: '20px' }}>Example of a missing local SVG (will show error fallback):</p>\n        <MySVGIcon src={localSvgPath} title=\"Local Icon\" width={50} height={50} />\n\n        <p style={{ marginTop: '20px' }}>Using useInlineSVG hook (from v4.3.0):</p>\n        <InlineSVGHookDemo />\n      </div>\n    </CacheProvider>\n  );\n}\n\n// Example using the useInlineSVG hook\nfunction InlineSVGHookDemo() {\n  const { SVG: SvgElement, loading, error } = useInlineSVG('https://cdn.svglogos.dev/logos/typescript.svg');\n\n  if (loading) return <div style={{ width: 80, height: 80, background: '#eee', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>Hook Loading...</div>;\n  if (error) return <div style={{ width: 80, height: 80, border: '1px solid red', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'red' }}>Hook Error: {error.message}</div>;\n  \n  return SvgElement ? <SvgElement title=\"TypeScript Logo\" width={80} height={80} style={{ color: '#007ACC' }} /> : null;\n}","lang":"typescript","description":"This quickstart demonstrates how to use the `SVG` component and `useInlineSVG` hook to load and display SVGs, including remote and local files, with loading indicators, error handling, caching via `CacheProvider`, and pre-processing for dynamic styling.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}