SVG 变成一个按钮 |打字稿和反应

Question

我想在按钮上放置一个 SVG 元素，当鼠标悬停在按钮上时，它会随着背景改变颜色。但是，我一直无法实现。你觉得你能帮我吗？我正在使用 Storybook 查看按钮的结果。 SVG 必须在项目文件中

非常感谢！

//socialMediaButton.component.tsx

import {FC} from 'react';
import {ButtonProps, StyledButton} from './socialMediaButton.styles';

export const Button: FC<ButtonProps> = ({ ...props}) => {
  return <StyledButton {...props}></StyledButton>;
};

//socialMediaButton.stories.tsx

import {ComponentStory, ComponentMeta} from '@storybook/react';

import {Button} from './socialMediaButton.component';

export default {
  title: 'Atoms/SocialMediaButton',
  component: Button,
} as ComponentMeta<typeof Button>;

const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;

export const InstagramButton = Template.bind({});
InstagramButton.args = {
  variant: 'light',
};

export const FacebookButton = Template.bind({});
FacebookButton.args = {
  variant: 'light',
};

export const TwitterButton = Template.bind({});
TwitterButton.args = {
  variant: 'light',
};

socialMediaButton.styles.jsx

import styled, {css} from 'styled-components';
import {ReactNode} from 'react';

export interface ButtonProps {
  variant?: 'light' | 'dark';
}

const variants = {
  light: css`
    background-color: ${({theme}) => theme.darkBackgroundColor};
    color: ${({theme}) => theme.lightIconColor};

    &:hover,
    &:active {
      background-color: ${({theme}) => theme.lightBackgroundColor};
      color: ${({theme}) => theme.darkBackgroundColor};
    }
  `,
  dark: css`
    background-color: ${({theme}) => theme.lightBackgroundColor};
    color: ${({theme}) => theme.darkBackgroundColor};
    &:hover,
    &:active {
      background-color: ${({theme}) => theme.darkBackgroundColor};
      color: ${({theme}) => theme.lightBackgroundColor};
    }
  `,
};

export const StyledButton = styled.button<ButtonProps>`
  ${({variant}) => variants[variant || 'light']}

  cursor: pointer;
  border-radius: 0.5em;
  border: none;
  padding: 2em 2em;
  position: relative;
  top: 0;
  left: 0;
  transition: All 300ms ease;

`;

我想发送不同社交网络的不同图标并准备好组件