Svgify

Features

• Dynamic SVG Rendering: Fetches and displays SVG icons based on the provided IconName.
• Customizable Styling: Supports inline styles, CSS classes, and different font weights (fill, stroke, or both).
• Scalable Icons: Adjust the size of your icons with the Scale factor that will be multiplied by css font-size property.
• Icons Caching: Icons is being cached in localstorage for better performance.

The project is still in its beta version so some errors may occur or some icons may not accept the changes .. so please be helpful and report us for any problems you face.

Updates

• Fix caching issues by provide icons version controlling through context provider.
  • All you need is to change current version through your provider and cached icons will change.

Testing

For Exhaustive click here

Installation

Install the package via npm:

npm install @sumcode/svgify

Add StyleSheet to your App.jsx file.

import "@sumcode/svgify/styles";

Initiate folder structure:

• Make folder public/assets/icons.
• Download your YOUR_ICON_NAME.svg in the folder.

.
└── my-project
    ├── node_modules
    ├── public
    │   └── assets
    │       └── icons (Add your svg icons here)
    │           └── YOUR_ICON_NAME.svg
    └── src
        └── app.jsx (Add stylesheet here)

Example

import "./App.css";
import Svgify from "@sumcode/svgify";

function App() {
    return (
        <>
            <Svgify IconName="YOUR_ICON_NAME" Scale={1.2} FontWeight="stroke" />
        </>
    );
}

export default App;

For version controlling (optional)

import React from "react";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import { Svgifier } from "@sumcode/svgify";

createRoot(document.getElementById("root")!).render(
    <StrictMode>
        {/* Add Svgify Provider around your routes */}
        <Svgifier version={1} clearForOldVersion>
            <App />
        </Svgifier>
    </StrictMode>
);

| Parameter | Type | Initial value | Usage | | :------------------- | :--------- | :------------ | :-------------------------------------------------------------------------------------------------------------------------------------------- | | version | Number* | 1 | Your current icon's version should be different from the old one | | clearForOldVersion | Boolean? | false | needs to be activated for upgrading from versions older than 2.0.0 (recommended to be disabled if starting with version >= 2.0.0) |

Parameters

| Parameter | Type | Initial value | Usage | | :---------------- | :----------------------- | :------------ | :--------------------------------------------------------------- | | IconName | string* | "" | The name of the icon in the mentioned path without its extension | | FontWeight | string? | fill | Specifies the type of the icon "stroke" , "fill" , "both" | | Scale | float? | 1 | The factor to be multiplied by the styled font-size | | className | string? | "" | Custom ClassName to be passed to the span element | | LoadingElement | "" \| React.ReactNode? | "" | The text or element to be displayed while fetching the svg | | NotFoundElement | "" \| React.ReactNode? | "" | The text or element to be displayed on fetch error |

Author

• LinkedIn
• Github