导入 SVG 以在反应中用作 favicon 的简洁方法

Posted 2023-02-22

【中文标题】导入 SVG 以在反应中用作 favicon 的简洁方法

【英文标题】：Clean way to import SVG to be used as favicon in react

【发布时间】：2021-03-15 12:17:24

【问题描述】：

我想知道导入 svg 图像以在反应中用作 favicon 的最佳方法

我有以下代码，它可以工作：

import  favicon  from './static/favicon'


<link href="$favicon" rel="shortcut icon" />

但在这里，favicon 图标是从 .ts 文件中导出的常量：

export const favicon = `
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...0Y/QTN1SKbITsFi0AAAAASUVORK5CYII=
`;

我想知道我是否可以以某种方式使用 .svg 文件并将其导出以供使用？

如果我尝试这样做：

import favicon2 from './static/favicon.svg'

<link href="$favicon2" rel="shortcut icon" />

我会在控制台中收到function%20SvgFavicon(props)%20%7B%20%20return%20/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[ 错误。

【问题讨论】：

它需要一个 webpack-loader 来支持 .svg 文件 - 看看这是否有帮助 - ***.com/questions/37671342/…。此外，如果您使用基于 CRA 的设置 - 看看阅读本节是否有帮助 - create-react-app.dev/docs/adding-images-fonts-and-files/…。

【参考方案1】：

您可以使用此库拥有可自定义的图标

https://github.com/oblador/react-native-vector-icons