У меня есть пара тем для сайта.Каждая из этих тем имеет различный набор значков
Параметры программирования
- Для каждой темы предусмотрен отдельный компонент Шлем.Фавиконы вставляются как 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
Прочитайте значки в теме, затем вставьте их в
Шлем 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
??
Вопросы
- Есть ли вариант 3 значительно лучше, чем первые два?
- Если нет, какой из вариантов 1 и2 Вы бы выбрали?
- Облагает ли вариант 2 значительными штрафами за время выполнения из-за необходимости вставлять изображения из значка base64 favicon в шлем вместо выбора между одним подготовленным шлемом или другим?