@sumcode/svgifyjs

v1.0.0

Published

a month ago

<div style="display:flex; justify-content:center; margin-inline: auto; margin-block: 3rem 1rem; width: 100%;"> <img src="https://res.cloudinary.com/dclbtusww/image/upload/v1725670993/Sumcode/Svgify/spkctkwkydsmnvki85di.png" alt="Svgify Logo" style="width:

Downloads

0High
0Medium
0Low

m7mmedatef

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

6. HTML Tag Attributes

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme