The question may be trivial but I am a bit confused. I imported to my React app some SVG files and I wonder what is the best place to keep them to have a clean file structure. I have two folders that I assume could be the best for them. The first is ./src/Assets/Icons folder and another one is the ./src/Components/Icons folder.
I am using SVG as a component like here so I am not sure if it will be better to have them in Assets or in Components. What are your best practices and how do you approach that?
return (
<svg
width="35"
height="36"
viewBox="0 0 35 36"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M30.8385 0.414062H4.16151C2.05801 0.414062 0.350006 2.26846 0.350006 4.55226V31.4487C0.350006 33.7325 2.05801 35.5869 4.16151 35.5869H30.8385C32.942 35.5869 34.65 33.7325 34.65 31.4487V4.55226C34.65 2.26846 32.942 0.414062 30.8385 0.414062ZM7.97301 2.48506C8.44901 2.48506 26.523 2.48506 27.027 2.48506V15.9333C27.027 16.5033 26.5965 16.9669 26.075 16.9669H8.92501C8.40001 16.9669 7.97301 16.5033 7.97301 15.9333V2.48506ZM32.746 31.4487C32.746 32.5925 31.8955 33.5159 30.842 33.5159H4.16151C3.10801 33.5159 2.25751 32.5925 2.25751 31.4487V4.55226C2.25751 3.40846 3.10801 2.48506 4.16151 2.48506H6.06551V16.9669C6.06551 18.1107 6.91601 19.0341 7.96951 19.0341H27.0235C28.077 19.0341 28.9275 18.1069 28.9275 16.9669V2.48506H30.8315C31.885 2.48506 32.7355 3.41226 32.7355 4.55226V31.4487H32.746Z"
fill="#11100E"
/>
<path
d="M22.2635 12.8284C22.7885 12.8284 23.2155 12.3648 23.2155 11.7948V7.65665C23.2155 7.08665 22.785 6.62305 22.2635 6.62305C21.742 6.62305 21.3115 7.08665 21.3115 7.65665V11.7948C21.3115 12.3648 21.7385 12.8284 22.2635 12.8284Z"
fill="#11100E"
/>
</svg>
);
};
export default SaveIcon;
