@sirajju/svg-mod

A lightweight React library for dynamically loading and customizing SVGs.

Installation

npm install @sirajju/svg-mod
# or
yarn add @sirajju/svg-mod

Features

• 🎨 Dynamic SVG customization
• 🎯 Selector-based modifications
• 💪 TypeScript support
• 🛡️ Protected elements preservation
• 🔄 Custom loading states

Usage

import SVG from 'svg-sculptor';

function App() {
  return (
    <SVG
      url="/path/to/your.svg"
      selector="#specific-element"
      style={{
        "#specific-element": {
          fill: "blue",
          stroke: "red",
          text: "New Text"
        }
      }}
      svgStyle={{
        width: "100px",
        height: "100px"
      }}
      protectedSelectors={["defs", "#gradients"]}
      loader={<div>Custom loader...</div>}
    />
  );
}

Props

| Prop | Type | Description | |------|------|-------------| | url | string | URL of the SVG file | | selector | string? | Optional CSS selector to target specific element | | style | object? | Styles to apply to selected elements | | svgStyle | object? | Styles to apply to the root SVG | | protectedSelectors | string[]? | Elements to preserve when using selector | | loader | ReactElement? | Custom loading component |

License

MIT