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 `YOURICON_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>
);

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

8. Author

Mohammed Atef

• LinkedIn
• Github