Importing svg path from another component using react.js - reactjs

Question

I have multiple icons stored in a component under switch statement. Based on a condition, I want to display that icon in render function of another component. If I manually add the svg and the path element, then the icon gets displayed correctly. But I would like to optimize my code such that when I call the function with correct parameters, it extracts the corresponding svg element along with its path element.
First Component(where icons reside):
export function getSymbolPlotly(symbol) { // eslint-disable-line
let elm;
const { color, shape } = symbol;
switch (shape) {
case 'x-dot':
elm = <path
className="point"
transform="translate(8,8)"
d="M0,3.39l3.39,3.39l3.39,-3.39l-3.39,-3.39l3.39,-3.39l-3.39,-3.39l-3.39,3.39l-3.39,-3.39l-3.39,3.39l3.39,3.39l-3.39,3.39l3.39,3.39ZM0,0.5L0.5,0L0,-0.5L-0.5,0Z"
style={{
opacity: 1,
strokeWidth: '0px',
fill: color,
fillOpacity: 1
}}></path>;
break;
case 'square':
elm = <path
className="point"
transform="translate(8,8)"
d="M6,6H-6V-6H6Z"
style={{
opacity: 1,
strokeWidth: '0px',
fill: color,
fillOpacity: 1
}}></path>;
break;
case 'hourglass':
elm = <path
className="point"
transform="translate(6,8)"
d="M6,6H-6L6,-6H-6Z"
style={{
opacity: 1,
strokeWidth: '0px',
fill: color,
fillOpacity: 1
}}></path>;
break;
default:
elm = <circle cx="6" cy="6" r="6" transform="translate(0,2)" fill={color}></circle>;
}````
Second component(render function where I need to display icons):
````switch (user.processState) {
case 'DENIED':
return <span><svg style={{ width: '15px', height: '15px' }}>
{getSymbolPlotly('hourglass')}
</svg></span>
case 'CANCELLED':
return <span><svg style={{ width: '15px', height: '15px' }}>
<path className="point"
transform="translate(8,8)"
d="M0,3.39l3.39,3.39l3.39,-3.39l-3.39,-3.39l3.39,-3.39l-3.39,-3.39l-3.39,3.39l-3.39,-3.39l-3.39,3.39l3.39,3.39l-3.39,3.39l3.39,3.39ZM0,0.5L0.5,0L0,-0.5L-0.5,0Z"
style={{
opacity: 1,
strokeWidth: '0px',
fill: '#e5004c',
fillOpacity: 1
}}></path>
</svg>{this.state.message}</span>;
}
In the above code, case CANCELLED displays the icon perfectly as I am manually adding the path element. But I would like to optimize the code as I would need to display the icons at multiple locations and adding path element at every position would make the code tedious. If I call the getSymbol function and pass the name of the icon as parameter, it doesn't display anything. Even when the parameter doesn't match any case, it won't even display the default circle element.
Is there a way to extract the svg and path element in cleaner way from another component ?

Answer 1

In your getSymbolPlotly function you destructure an object called symbol const { color, shape } = symbol;. When you call that function you pass a string called getSymbolPlotly('hourglass'), there is the first error.
I don't know if you pasted the entire code for the getSymbolPlotly function but you must also return the element. To extract in a more "clean" way you can to like this.
import React from "react";
export function getSymbolPlotly(symbol) {
// eslint-disable-line
const { color, shape } = symbol;
switch (shape) {
case "x-dot":
return (
<path
className="point"
transform="translate(8,8)"
d="M0,3.39l3.39,3.39l3.39,-3.39l-3.39,-3.39l3.39,-3.39l-3.39,-3.39l-3.39,3.39l-3.39,-3.39l-3.39,3.39l3.39,3.39l-3.39,3.39l3.39,3.39ZM0,0.5L0.5,0L0,-0.5L-0.5,0Z"
style={{
opacity: 1,
strokeWidth: "0px",
fill: color,
fillOpacity: 1
}}
/>
);
case "square":
return (
<path
className="point"
transform="translate(8,8)"
d="M6,6H-6V-6H6Z"
style={{
opacity: 1,
strokeWidth: "0px",
fill: color,
fillOpacity: 1
}}
/>
);
case "hourglass":
return (
<path
className="point"
transform="translate(6,8)"
d="M6,6H-6L6,-6H-6Z"
style={{
opacity: 1,
strokeWidth: "0px",
fill: color,
fillOpacity: 1
}}
/>
);
default:
return (
<circle cx="6" cy="6" r="6" transform="translate(0,2)" fill={color} />
);
}
}
And in some other component you can call it like this.
return (
<div className="App">
<div>
<svg style={{ width: "15px", height: "15px" }}>
{getSymbolPlotly({ shape: "hourglass", color: "red" })}
</svg>
</div>
<div>
<svg style={{ width: "15px", height: "15px" }}>
{getSymbolPlotly({ shape: "x-dot", color: "purple" })}
</svg>
</div>
</div>
);
I've created a Codesandbox with a working demo here.