如何为React-Icons添加对应品牌的原始颜色图标？

我用React-Icons的BsGithub和BsGoogle图标做社交登录按钮，默认是灰色空白样式，想改成对应品牌的原始颜色（比如谷歌图标改成蓝红绿黄的彩色样式），现有代码如下：

<div className="mt-6 flex gap-2">
    <AuthSocialButton
        icon={BsGithub}
        onClick={() => socialAction('github')}
    />
    <AuthSocialButton
        icon={BsGoogle}
        onClick={() => socialAction('google')}
    />
</div>

一、单色品牌图标（如Github） #

如果你的AuthSocialButton组件支持给图标传递额外props（比如iconProps），直接给图标设置品牌色即可：

<AuthSocialButton
    icon={BsGithub}
    iconProps={{ style: { color: '#181717' } }} // Github官方品牌色
    onClick={() => socialAction('github')}
/>

如果用Tailwind CSS，也可以用className：

<AuthSocialButton
    icon={BsGithub}
    iconProps={{ className: 'text-[#181717]' }}
    onClick={() => socialAction('github')}
/>

如果组件没提供iconProps，可以给按钮加专属类名，用CSS控制图标颜色：

<AuthSocialButton
    className="github-login-btn"
    icon={BsGithub}
    onClick={() => socialAction('github')}
/>

对应的CSS：

.github-login-btn svg {
    color: #181717;
}

二、多色品牌图标（如谷歌） #

React-Icons提供的BsGoogle是单色SVG，要实现谷歌的彩色图标，最直接的方式是自定义多色SVG组件：

// 自定义谷歌彩色图标组件
const GoogleIcon = () => (
    <svg viewBox="0 0 24 24" width="24" height="24">
        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
        <path fill="#EA4335" d="M12 5.38c1.48 0 2.73.4 3.71 1.06l2.85-2.77C17.46 2.98 14.97 2 12 2 7.7 2 3.99 4.47 2.18 7.97l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
    </svg>
);

然后在按钮中使用这个自定义组件：

<AuthSocialButton
    icon={GoogleIcon}
    onClick={() => socialAction('google')}
/>

这样就能渲染出和品牌一致的彩色谷歌图标了。

内容的提问来源于stack exchange，提问作者LuminaNtb