在React头盔上使用样式化组件主题-好主意

Question

我有一个网站主题。每个主题都有不同的图标集

编程选项

1. 每个主题都有一个不同的头盔组件。图标被插入为Helmet组件中的base64 hrefs

    import favicon from 'assets/favicon.ico';
    import android192 from 'assets/android192.png';
    import android512 from 'assets/android512.png';
    // ... repeat for other icon alternatives

    export const Helmet1 = ({ children }) => (
    <Helmet>
    <link rel="shortcut icon" type="image/x-icon" href={default1} />
    <link sizes="192x192" href={android192} />
    <link sizes="512x512" href={android512} />
    <link rel="apple-touch-icon" href={appleTouch} />
    <link sizes="16x16" href={favicon16} />
    <link sizes="32x32" href={favicon32} />
    <link sizes="150x150" href={mstile150} />
    {children}
    </Helmet>
    );

    // repeat for Helmet 2

    // choose either Helmet1 or Helmet2 in code

1. 将收藏夹图标读入主题，然后将其插入头盔

    const MyHelmet = ({ theme, children }) => (
    <Helmet>
    <link rel="shortcut icon" type="image/x-icon" href={theme.default} />
    <link sizes="192x192" href={theme.android192} />
    <link sizes="512x512" href={theme.android512} />
    <link rel="apple-touch-icon" href={theme.appleTouch} />
    <link sizes="16x16" href={theme.icon16} />
    <link sizes="32x32" href={theme.icon32} />
    <link sizes="150x150" href={theme.msTile150} />
    <link rel="mask-icon" href={theme.pinnedTab} />
    {children}
    </Helmet>
    );

    // supply either theme1 or theme2 to this component

1. ??

问题

1. 选项3是否比前两个更好？
2. 否则，您会选择选项1和2中的哪个？
3. 选项2是否由于必须将base64图标图标插入头盔中而不是在一个准备好的头盔或另一个头盔之间进行选择而导致可观的运行时间损失？