@usefull-react-blocks/icon-svg

A lightweight React component to safely load and render external SVGs with caching and sanitization.

Features:

• Dynamic SVG loading via fetch
• In-memory caching and request deduplication
• XSS-aware sanitization of SVG markup
• Simple size control and custom className
• TypeScript types included

Install

This package expects React as a peer dependency.

npm install @usefull-react-blocks/icon-svg
# or
yarn add @usefull-react-blocks/icon-svg

Usage

import React from 'react';
import { IconSVG, SvgCacheProvider } from '@usefull-react-blocks/icon-svg';

export default function App() {
  return (
    <SvgCacheProvider>
      <IconSVG path="/icons/heart.svg" size={24} className="my-icon" />
    </SvgCacheProvider>
  );
}

API

• IconSVG props:

  • path: string (required) — URL/path to the SVG file
  • size?: number | string — if number, applied to width/height on the ; string accepted but width/height edit prefers numbers
  • className?: string — optional classes for wrapper div

• Context helpers:

  • SvgCacheProvider: provider to enable cache and fetch deduplication
  • useSvgCache: access low-level cache/getCached/loadSvg if needed