使用 svg 文件到公共文件夹与作为 nextjs 中的组件

如何解决使用 svg 文件到公共文件夹与作为 nextjs 中的组件

我需要使用形状相同但大小和颜色不同的图标。

起初，我使用的是公共文件夹中的不同文件。

例如) public/same-icon_red.svg,public/same-icon_blue.svg

但我认为这样使用比这样使用更好

//icon.js

export const Icon = ({fill,width,height}) => {
  return (
    <svg height={height} width={width} fill={fill} viewBox="0 0 24     24">
    <path d="M0 0h24v24.../>
  </svg>
 );
}

//main.js

import Icon from "./icon"

...
return(
 <>
  ...
  <Icon width={24} height={24} fill={#000}/>
 </>  
)

但在这种情况下，我不使用公共文件夹让我感到困扰。

两者之间哪个更好？?