Svgify

1. 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.

2. Updates

1. Fix caching issues override existing data in cache.
2. Control icon saving path
3. Now you can customize fetching method
4. Handle multiple fetching for same icon
5. Exhaustive testing of 10K icon randomly generated from 70 icon is now available in (sec 3.0)

3. Testing

For Exhaustive 10K icon is being randomly generated from 70 icon click here

4. Basic 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)

5. 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;

6. For version controlling ( optional - recommended for icon changing with the same name )

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) | | base_path | string? | /assets/icons/ | Path of icon's folder starting from public folder | | FetchIcon | (Icon_Path: string) => Promise<AxiosResponse<unknown, unknown>>? | axios.get(Icon_Path) | Custom function to fetch the icon (Head to section 7.0 for example) |

7. Custom fetching function

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

/*
 * for this example:
 *      icon_path = "/assets/iconization/YOUR_ICON_NAME"
 */
const FetchIcon = async (icon_path: string) => {
    return axios.get(`http://YOUR_SERVER_PUBLIC_URI.com/${icon_path}`);
};

createRoot(document.getElementById("root")!).render(
    <StrictMode>
        <Svgifier
            base_path="/assets/iconization" // Changing public icon folder path
            version={2}
            FetchIcon={FetchIcon}
            clearForOldVersion>
            <App />
        </Svgifier>
    </StrictMode>
);

7. 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 |

8. Author

• LinkedIn
• Github