How can I change the fill of an SVG component with props and tailwindcss

Question

So I've been cracking at this and I can't seem to figure it out. I have a logo here in a component and I can't for the life of me get the className fill options to pass correctly. I'm in a NextJS environment using NextUI and tailwind css.

const UserLogo = (props: SVGProps<SVGSVGElement>) => (
  <svg
  {...props}
  xmlns="http://www.w3.org/2000/svg"
  xmlSpace="preserve"
  viewBox="0 0 1087 780"
  className="fill-white"
>
  ...
</svg>
)
export default UserLogo

I'm using SVGR playground to get the initial setup going but it's not seeming to want to pass any fill. I know that it's passing the className string just fine, it's able to add a border when I put in border border-white into the component's signature.

<UserLogo width={48} height={48} className="border border-white fill-white"/>

Is it because maybe NextJS is messing with the tailwind arguments since it's derived from tailwind? Is it just a usage problem?

Answer 1

You should consider {...props} as the last property, because with the way you wrote it, the className you sent will be overridden, so you should write it like this:

const UserLogo = (props: SVGProps<SVGSVGElement>) => (
  <svg
  xmlns="http://www.w3.org/2000/svg"
  xmlSpace="preserve"
  viewBox="0 0 1087 780"
  {...props}
>
  ...
</svg>
)
export default UserLogo

also if you need a className in the svg itself, you should merge it with the className sent:

import { twMerge } from 'tailwind-merge';

const UserLogo = (props: SVGProps<SVGSVGElement>) => {
    const {className,...rest} = props
    return (
      <svg
        xmlns='http://www.w3.org/2000/svg'
        xmlSpace='preserve'
        viewBox='0 0 1087 780'
        className= { twMerge(
            'mr-4',
            className,
        )}
        {...rest}
      >
        ...
      </svg>
    )
};
export default UserLogo;