Могу ли я динамически изменить / использовать SVG для favicon в приложении React? - PullRequest
0 голосов
/ 21 апреля 2020

У меня есть веб-приложение, в котором пользователи могут выбирать значки для различных компонентов приложения. Я хочу иметь возможность динамически изменять значок избранного на основе выбранных пользователем значков / компонентов.

Я использую значки MDI SVG ... и я нашел этот пост, в котором показано, как можно использовать путь SVG для значок: Dynami c svg favicon? Это пример формата:

   <link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 
   viewBox='0 0 512 512'%3E%3Cpath d='M224 387.814V512L32 320l192-192v126.912C447.375 260.152 437.794 
    103.016 380.93 0 521.287 151.707 491.48 394.785 224 387.814z'/%3E%3C/svg%3E">

Я также использую React-Helmet, так что я могу изменить эти настройки в данной component.

Однако я не могу изменить значок сайта по умолчанию с помощью React-Helmet. Это фрагмент, который я использую в компоненте

  <Helmet>
    <title>{tabname}</title>
    <meta name="ABC" content="ABC" />
    <link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 
    viewBox='0 0 512 512'%3E%3Cpath d='M224 387.814V512L32 320l192-192v126.912C447.375 260.152 
    437.794 103.016 380.93 0 521.287 151.707 491.48 394.785 224 387.814z'/%3E%3C/svg%3E"/>
  </Helmet>

Он правильно меняет заголовок в браузере вкладок, но Favicon по умолчанию не обновляется.

Есть ли способ Принудительно / сменить значок с помощью реактивного шлема и формата SVG?

...