UNPKG

@sirajju/svg-mod

Version:

React library for SVG customizing

63 lines (50 loc) 1.38 kB
# @sirajju/svg-mod A lightweight React library for dynamically loading and customizing SVGs. ## Installation ```bash 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 ```tsx 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