@sumcode/svgifyjs NPM

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.

npm version npm downloads bundle size license dependencies TypeScript issues

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

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

3. Example

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>SvgifyJS</title>
        <link rel="stylesheet" href="./your_style.css" />
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/@sumcode/svgifyjs@latest/dist/style.css" />
    </head>
    <body>
        <i
            class="svgify"
            data-icon="i1"
            data-scale="10"
            data-font-weight="fill"></i>

        <script src="https://cdn.jsdelivr.net/npm/@sumcode/svgifyjs@latest/dist/index.js"></script>
        <script>
            const svgifyInstance = new Svgify();
        </script>
    </body>
</html>

4. How To Use

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>SvgifyJS</title>
        <link rel="stylesheet" href="./your_style.css" />
        <!-- Import Style from CDN -->
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/@sumcode/svgifyjs@latest/dist/style.css" />
    </head>
    <body>
        <i
            class="svgify"
            data-icon="i1"
            data-scale="10"
            data-font-weight="fill"></i>
        <!-- Import Library from CDN -->
        <script src="https://cdn.jsdelivr.net/npm/@sumcode/svgifyjs@latest/dist/index.js"></script>
        <script>
            const svgifyInstance = new Svgify({
                path: "assets/icons", // Specify the path to the svg icon (optional).
                version: 1, // add different version to clear all old cached svg icons (default = 1).
                FetchIcon: (Icon_Path) => {
                    return fetch(Icon_Path, {
                        method: "GET",
                        headers: {
                            "Content-Type": "application/json",
                        },
                    });
                }, // customize fetching methods (optional).
                loadingMSG: `<p>fetching svg<p>`, // Message or html element to be printed while waiting to fetch icon (optional).
                errorMSG: `<p>Error fetching svg<p>`, // Message or html element to be printed if error occurs (optional).
            });
        </script>
    </body>
</html>

5. Class Settings

Parameter	Type	Initial value	Usage
`path`	`string`?	`""`	Specify the path to the svg icon
`version`	`number`?	`1`	Add different version to clear all old cached svg icons
`FetchIcon`	`(Icon_path: string) => Promise<Response>`?	Sec 4	Customize fetching methods
`loadingMSG`	`string \\| html element`?	`""`	Message or html element to be printed while waiting to fetch icon
`errorMSG`	`string \\| html element`?	`""`	Message or html element to be printed if error occurs

6. HTML Tag Attributes

Parameter	Type	Initial value	Usage
`data-icon`	`string`?	`""`	The name of the icon in the mentioned path without its extension
`data-scale`	`number`?	`1`	The factor to be multiplied by the styled font-sizeicons
`data-font-weight`	`(Icon_path: string) => Promise<Response>`?	`fill`	Specifies the type of the icon "stroke" , "fill" , "both"

@sumcode/svgifyjs v1.0.0