Refactoring SVG

How would you guys refactor this, considering the logic will repeat over every icon?

Also, what about having something like Icon.Star maybe? I'm using React as well.

Just trying to find a nice way for this. Idealy though, this would be the goal:

<SVG icon="star" type="solid" />
<SVG icon="star" type="regular" />

How would you guys go about doing the above?

And what do ya think about the below? And how would you refactor this considering this code is going to be re-used in every single icon, the logic should repeat, so perhaps custom hook or something i think?

function IconStar({icon, type, stroke, width, height, className}:any) {
    if(type === "solid") {
        return <svg
            className={className}
            viewBox="0 0 24 24"
            width={width}
            height={height}
            stroke={stroke}
            strokeWidth="2"
            fill="none"
            strokeLinecap="round"
            strokeLinejoin="round"
        >
            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
            <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
        </svg>
    } else if(type === "regular") {
        return <svg
            className={className}
            viewBox="0 0 24 24"
            width={width}
            height={height}
            stroke={stroke}
            strokeWidth="2"
            fill="none"
            strokeLinecap="round"
            strokeLinejoin="round"
        >
            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
            <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
        </svg>
    } else if(type === "light") {
        return <svg
            className={className}
            viewBox="0 0 24 24"
            width={width}
            height={height}
            stroke={stroke}
            strokeWidth="2"
            fill="none"
            strokeLinecap="round"
            strokeLinejoin="round"
        >
            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
            <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
        </svg>
    }
}

Havent' tested it, but this is my idea, what I'm thinking now:

const icons = [
    {
        "icon": "star",
        "types": {
            "solid": <Test />,
            "regular": "d" 
        }
    }
]

function Svg({icon, type}:{icon:string, type?:any}) {
    return (
        <>
        { icons.map(filteredIcon => {
            if(filteredIcon.icon === icon) {
                return filteredIcon.types[type];
            } else {
                return filteredIcon.types['solid'];
            }
        })}
        </>
    );
}

}

aurelianspodarec

3 years ago

Level 7

I'll just go with this solution for now I guess, seems to be alright, not exactly what I wanted, but then, icon names never change so.... I'm just trying to overengeener something that doesn't have to be xd

import { CloseSolid, PaletteSolid } from "../svg/solid";
const icons = [  
    {
        "icon": "close",
        "types": {
            "solid": <CloseSolid />,
            "regular": "" 
        }
    },
    {
        "icon": "eye",
        "types": {
            "solid": <PaletteSolid />,
            "regular": "" 
        }
    },
    {
        "icon": "file",
        "types": {
            "solid": <PaletteSolid />,
            "regular": "" 
        }
    },
    {
        "icon": "floppy-disk",
        "types": {
            "solid": <PaletteSolid />,
            "regular": "" 
        }
    },
]


function Svg({icon, type}:{icon:string, type?:any}) {
   
    return (
        <>
        { icons.map(filteredIcon => {
            if(filteredIcon.icon === icon) {
                // return filteredIcon.types[type];
                return filteredIcon.types['solid'];
            } else {
                // return filteredIcon.types['solid'];
            }
        })}
        </>
    );
}

Please or to participate in this conversation.