react-svg-inliner

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

Interactive Demo

Active State:

Color:

Click "Active" to toggle between outlined and filled versions. Change colors using CSS.

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)

Declarative handling of active states for navigation.

<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.
`style`	`CSSProperties`	Inline styles applied to the wrapper.
`title`	`string`	Title attribute for accessibility (tooltip).
`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.