nextjs + svgr + tailwind - Add global styles for all svg icons

So, I'm using nextjs + svgr + tailwind in my app.

I'm dynamically changing size and color of my svgs, but I also want to add "flex-shrink-0 fill-current" globally to all my icons.

I want to render my icon with:

<AlertIcon className="text-red size-5" /> 

and to be sure it would also have "flex-shrink-0 fill-current" applied to it.

Yup, I simply added Icon component and put all logic there

src/components/Icon.tsx

import { twMerge } from "tailwind-merge";

import * as icons from "@/icons";

export type IconType = keyof typeof icons;

type Props = {
  icon: IconType;
  className?: string;
};

export default function Icon(props: Props) {
  const { className, icon } = props;

  const IconComponent = icons[icon];

  return (
    <IconComponent
      className={twMerge("flex-shrink-0 fill-current", className)}
    />
  );
}

Icon.displayName = "Icon";

src/icons/index.ts

export { default as add } from "./add.svg";
export { default as alert } from "./alert.svg";
export { default as arrowLeft } from "./arrowLeft.svg";

Icon render

....
<Icon icon="add" className="size-6 text-blue" />
...