SVG Utility Project On React

Project Aim

This project aims to simplify the use of SVGs. in React

Description

I'll create a library that assists in managing SVGs, utilizing different interfaces to implement best practices and to support different cases.

Developer Experience

As a developer, I want to make my development faster and easier.
As a developer, I would like to have a documentation that guides me in building my applications with SVGs.

Problem

Often, when using Tailwind, I need to resize SVGs from external websites and convert them into components. This process is time-consuming.

Existing Solutions

svg-to-react-cli: This package exists but lacks interfaces for various use cases, and is not updated, but still resolve manual adjustment.

Use Cases For svgestor

Square with SVG Inside: Includes sizing interface with animation for zooming in and out.

Moving SVG: An interface that allows for animated SVG movement. etc.. will be more examples in progress:

export interface clickableSvgInterface {
fill?: string;
style?: React.CSSProperties;
width?: string;
height?: string;
className?: string;
onClick?: () => void;
onMouseEnter?: () => void;
onMouseLeave?: () => void;
}

References

Adam Wathan has created a video tutorial on managing SVGs, but it still requires a lot of manual adjustments, which is time-consuming.

Tutorial Video

Objective and Idea example

svg from svgrepo component-gmail-svg.tsx

import React from "react";
import { SvgInterface } from "../../../interfaces/svgInterface";

const ItemGmailSvg: React.FC<SvgInterface> = ({ fill, width, height, style }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={width}
      height={height}
      viewBox="0 0 32 32"
      style={style}
    >
      <path
        d="M30.996 7.824v17.382a2.044 2.044 0 0 1-2.044 2.044H24.179V15.663L16 21.799l-8.179-6.136v11.588H3.049a2.044 2.044 0 0 1-2.044-2.044V7.824A3.067 3.067 0 0 1 5.92 5.376l-.008-.006L16 12.937 26.088 5.37a3.067 3.067 0 0 1 4.907 2.454z"
        fill={fill}
      />
    </svg>
  );
};

export default ItemGmailSvg;

svginterface.tsx

/**
 * interface that will define the props of the svg components
 */
export interface SvgInterface {
    width?: string;
    height?: string;
    fill?: string;
    style?: React.CSSProperties;
}

Index.tsx

    <Item
                  fill={hoveredCard === index ? "black" : "white"}
                  width={hoveredCard === index ? "45" : "40"}
                  height={hoveredCard === index ? "45" : "40"}
                  style={{
                    transition:
                      "width 0.3s ease, height 0.3s ease, fill 0.3s ease",
                  }}

This is just a prototype of course will be more feature on the interfaces!

Questions and Answers

Do I need to create multiple components for an SVG, or is one component sufficient?

Example SVG from SVGrepo.

<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 11.9556C2 8.47078 2 6.7284 2.67818 5.39739C3.27473 4.22661 4.22661 3.27473 5.39739 2.67818C6.7284 2 8.47078 2 11.9556 2H20.0444C23.5292 2 25.2716 2 26.6026 2.67818C27.7734 3.27473 28.7253 4.22661 29.3218 5.39739C30 6.7284 30 8.47078 30 11.9556V20.0444C30 23.5292 30 25.2716 29.3218 26.6026C28.7253 27.7734 27.7734 28.7253 26.6026 29.3218C25.2716 30 23.5292 30 20.0444 30H11.9556C8.47078 30 6.7284 30 5.39739 29.3218C4.22661 28.7253 3.27473 27.7734 2.67818 26.6026C2 25.2716 2 23.5292 2 20.0444V11.9556Z" fill="white"/>
<path d="M22.0515 8.52295L16.0644 13.1954L9.94043 8.52295V8.52421L9.94783 8.53053V15.0732L15.9954 19.8466L22.0515 15.2575V8.52295Z" fill="#EA4335"/>
<path d="M23.6231 7.38639L22.0508 8.52292V15.2575L26.9983 11.459V9.17074C26.9983 9.17074 26.3978 5.90258 23.6231 7.38639Z" fill="#FBBC05"/>
<path d="M22.0508 15.2575V23.9924H25.8428C25.8428 23.9924 26.9219 23.8813 26.9995 22.6513V11.459L22.0508 15.2575Z" fill="#34A853"/>
<path d="M9.94811 24.0001V15.0732L9.94043 15.0669L9.94811 24.0001Z" fill="#C5221F"/>
<path d="M9.94014 8.52404L8.37646 7.39382C5.60179 5.91001 5 9.17692 5 9.17692V11.4651L9.94014 15.0667V8.52404Z" fill="#C5221F"/>
<path d="M9.94043 8.52441V15.0671L9.94811 15.0734V8.53073L9.94043 8.52441Z" fill="#C5221F"/>
<path d="M5 11.4668V22.6591C5.07646 23.8904 6.15673 24.0003 6.15673 24.0003H9.94877L9.94014 15.0671L5 11.4668Z" fill="#4285F4"/>
</svg>

Thanks to SVGOMG, it becomes

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" fill="none" viewBox="0 0 32 32"><path fill="#fff" d="M2 11.956c0-3.485 0-5.228.678-6.559a6.222 6.222 0 0 1 2.72-2.719C6.727 2 8.47 2 11.955 2h8.088c3.485 0 5.228 0 6.559.678a6.222 6.222 0 0 1 2.719 2.72C30 6.727 30 8.47 30 11.955v8.088c0 3.485 0 5.228-.678 6.559a6.222 6.222 0 0 1-2.72 2.719C25.273 30 23.53 30 20.045 30h-8.088c-3.485 0-5.228 0-6.559-.678a6.222 6.222 0 0 1-2.719-2.72C2 25.273 2 23.53 2 20.045v-8.088Z"/><path fill="#EA4335" d="m22.052 8.523-5.988 4.672L9.94 8.523v.001l.008.007v6.542l6.047 4.774 6.057-4.59V8.524Z"/><path fill="#FBBC05" d="m23.623 7.386-1.572 1.137v6.735l4.947-3.799V9.171s-.6-3.268-3.375-1.785Z"/><path fill="#34A853" d="M22.05 15.258v8.734h3.793s1.079-.11 1.157-1.34V11.458l-4.95 3.799Z"/><path fill="#C5221F" d="M9.948 24v-8.927l-.008-.006L9.948 24ZM9.94 8.524l-1.564-1.13C5.602 5.91 5 9.177 5 9.177v2.288l4.94 3.602V8.524Z"/><path fill="#C5221F" d="M9.94 8.524v6.543l.008.006V8.531l-.008-.007Z"/><path fill="#4285F4" d="M5 11.467v11.192A1.35 1.35 0 0 0 6.157 24h3.792l-.009-8.933-4.94-3.6Z"/></svg>

Basic interface that will just change color and modify width and height.

/**
* interface that will define the props of the svg components
*/
export interface BasicSvgInterface {
width: string;
height: string;
fill: string;
}

Then the component will be:


import React from "react";
// insert interface

const ItemGmailSvg: React.FC = ({ interface... }) => { return ( // insert there svg code ); };

export default ItemGmailSvg;

---

- How can I transform an .svg into a component easily?
The idea is:
1. Drag the SVG into a folder
2. Then when I just import it, it will automatically perform all the previous steps
3. You can also add the type of interface you want to use.  // but how?

How to use: 
```tsx
import ItemSvg from /svgcomponents/gmail.svg
import svgestor from /svgestor

<ItemSvg
     interface= svggestorBasicSvgInterface
     // then i can use :

     fill=red
     width=45px
     height=45px
/>

So will give to the component an interface and also the Svg code.

Recap Logic

// 1. when importing it will pass to svg-to-react-component and it will take the svg code then do his stuff by removing redoundance. then generate-component name so as "GmailSvgComponent" and insert the transformed code in // insert there svg code 

// 2. when we import first time the svg component in the project it will yes generate the svg code in the component but it will not generate the interface so we need to define what kind of interface we want to use then it the svg component will have the interface

Possible library dependency

For converting the SVG i could use SVGO by just using needed plugin.

Consideration

maybe is just me adding too much complexity i just have to understand if what im thinking is viable or not!

MindfulLearner / svgestor

svgestor Overview #1