我有这个SVG文件

<svg preserveAspectRatio="xMidYMid meet"
     focusable="false"
     width="0"
     height="0"
     visibility="hidden"
     style="
        visibility: hidden;
        position: absolute;
        pointer-events: none;
    "
     xmlns="http://www.w3.org/2000/svg"
>
   
    <symbol id='instagram' viewBox="0 0 40 40" fill="none">
        <path d="M13.6 5.60001C9.18238 5.60001 5.59998 9.18241 5.59998 13.6V26.4C5.59998 30.8176 9.18238 34.4 13.6 34.4H26.4C30.8176 34.4 34.4 30.8176 34.4 26.4V13.6C34.4 9.18241 30.8176 5.60001 26.4 5.60001H13.6ZM29.6 8.80001C30.4832 8.80001 31.2 9.51681 31.2 10.4C31.2 11.2832 30.4832 12 29.6 12C28.7168 12 28 11.2832 28 10.4C28 9.51681 28.7168 8.80001 29.6 8.80001ZM20 12C24.4176 12 28 15.5824 28 20C28 24.4176 24.4176 28 20 28C15.5824 28 12 24.4176 12 20C12 15.5824 15.5824 12 20 12ZM20 15.2C18.7269 15.2 17.506 15.7057 16.6059 16.6059C15.7057 17.5061 15.2 18.727 15.2 20C15.2 21.273 15.7057 22.4939 16.6059 23.3941C17.506 24.2943 18.7269 24.8 20 24.8C21.273 24.8 22.4939 24.2943 23.3941 23.3941C24.2943 22.4939 24.8 21.273 24.8 20C24.8 18.727 24.2943 17.5061 23.3941 16.6059C22.4939 15.7057 21.273 15.2 20 15.2Z" fill="currentColor"/> 
    </symbol>

    <symbol id='instagram-gradient' viewBox="0 0 40 40" fill="none">
        <path d="M13.6 5.60001C9.18238 5.60001 5.59998 9.18241 5.59998 13.6V26.4C5.59998 30.8176 9.18238 34.4 13.6 34.4H26.4C30.8176 34.4 34.4 30.8176 34.4 26.4V13.6C34.4 9.18241 30.8176 5.60001 26.4 5.60001H13.6ZM29.6 8.80001C30.4832 8.80001 31.2 9.51681 31.2 10.4C31.2 11.2832 30.4832 12 29.6 12C28.7168 12 28 11.2832 28 10.4C28 9.51681 28.7168 8.80001 29.6 8.80001ZM20 12C24.4176 12 28 15.5824 28 20C28 24.4176 24.4176 28 20 28C15.5824 28 12 24.4176 12 20C12 15.5824 15.5824 12 20 12ZM20 15.2C18.7269 15.2 17.506 15.7057 16.6059 16.6059C15.7057 17.5061 15.2 18.727 15.2 20C15.2 21.273 15.7057 22.4939 16.6059 23.3941C17.506 24.2943 18.7269 24.8 20 24.8C21.273 24.8 22.4939 24.2943 23.3941 23.3941C24.2943 22.4939 24.8 21.273 24.8 20C24.8 18.727 24.2943 17.5061 23.3941 16.6059C22.4939 15.7057 21.273 15.2 20 15.2Z" fill="url(#paint0_linear_1689_215)"/>
        <defs>
            <linearGradient id="paint0_linear_1689_215" x1="6.09064" y1="23.727" x2="33.9093" y2="16.273" gradientUnits="userSpaceOnUse">
                <stop stop-color="#45B8FB"/>
                <stop offset="0.53" stop-color="#4B85F0"/>
                <stop offset="0.9" stop-color="#5151E5"/>
            </linearGradient>
        </defs>
    </symbol>
</svg>

Instagram的logo有两个不同的svg，一个有linearGradient，一个没有。
我把它们呈现在这里：

const sizeVariants = {
  // 32px
  '2xl': 'w-8 h-8',
  // 24px
  xl: 'w-6 h-6',
  // 20px
  lg: 'w-5 h-5',
  // 16px
  md: 'w-4 h-4',
  // 14px
  sm: 'w-3.5 h-3.5',
  // 12px
  xs: 'w-3 h-3',
} as const;

type Props = {
  title?: string;
  name: string;
  size?: keyof typeof sizeVariants;
  category: SpritesCategories;
  className?: string;
  rotateWhenRtl?: boolean;
  onClick?: () => void;
};

export const SpriteIcon = ({
  title,
  name,
  size,
  className = '',
  rotateWhenRtl = false,
  category,
  onClick,
  ...props
}: Props) => {
  const spritePath = `/assets/icons/${category}-sprite.svg`;

  const svgStyle =
    !size && !className
      ? sizeVariants['md']
      : `${className} ${size ? sizeVariants[size] : ''} ${
          rotateWhenRtl ? 'rtl:-scale-x-100' : ''
        }`;

  return (
    <svg className={svgStyle} onClick={onClick} {...props}>
      {title ? <title>{title}</title> : null}
      <use href={`${spritePath}#${name}`}></use>
    </svg>
  );
};

当我像这样调用<SpriteIcon />组件时，'normal'会正常呈现：

<SpriteIcon
    category={SpritesCategories.SOCIAL}
    name={socialMedia.name}
    size="2xl"
    title={socialMedia.title}
    className="mr-2"
 />

svg文件名为social-sprite.svg，传入的名称和标题分别为instagram和instagram-gradient
但是，带有linearGradient的那个不会渲染。我正在使用NextJS（v.13.4.6）与Tailwind，任何人都可以帮助？
我的最终目标是在悬停svg时应用渐变，我已经尝试过css，但没有运气，因此我想我可以添加一个带有渐变的svg，但似乎比这更复杂。