@sumcode/svgifyjs
v1.0.0
Published
<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
139
Readme
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 cssfont-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. 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" |