react-svg-inliner

Inline SVG loader for React and Next.js, built with modern standards:

• Fully compatible with React 19 (Next.js 16 supported).
• Written in TypeScript for type safety.
• Declarative handling of active states.
• Supports modern CSS and accessibility best practices.

⚙️ Installation

npm install react-svg-inliner

🚀 Usage

"use client";

import { SvgInline } from "react-svg-inliner";

<SvgInline src="/icons/logo.svg" className="w-6 h-6" />

✨ Advanced Usage (Active State)

You can easily handle "active" states (like in navigation bars) by providing an alternative source:

<SvgInline
  src="/icons/home-outline.svg"      // Default icon
  activeSrc="/icons/home-filled.svg" // Active icon
  active={isActive}                  // Boolean to switch
  className="w-8 h-8 transition-colors"
  title="Go to Home"
  id="home-icon"
/>

📦 Props

Prop	Type	Description
src	string	Required. Relative URL to the default SVG.
activeSrc	string	URL to the "active" version of the SVG.
active	boolean	If true, the component renders activeSrc instead of src.
className	string	CSS class string applied to the wrapper element.
style	CSSProperties	Inline styles applied to the wrapper element.
title	string	Title attribute (tooltip) for accessibility.
onError	(err: Error) => void	Callback function if the SVG fails to load.
id	string	ID to assign to the SVG element. Overrides the ID in the file if present.

📝 Notes

• Client Component: This library uses fetch and useState internally, so it must be used in Client Components. In Next.js, ensure the parent file has "use client".
• Public Access: The src URLs must be publicly reachable by the browser (e.g., inside the public/ folder).

🤝 Contributing

We welcome contributions! Please see our CONTRIBUTING.md for details on how to get started.

Please note that this project is released with a Contributor Code of Conduct . By participating in this project you agree to abide by its terms.

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.