0

Im wondering about the best way to import svg image to be used as favicon in react

i have following code, which works:

import { favicon } from './static/favicon'


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

But here, favicon icon is exported const from .ts file:

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

I was wondering if i can somehow just use .svg file and export that to be used?

if i try to do:

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

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

i will get function%20SvgFavicon(props)%20%7B%20%20return%20/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[ error in the console.

Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
Clomez
  • 1,410
  • 3
  • 21
  • 41
  • 1
    It would need a webpack-loader to support .svg files - see if this helps - https://stackoverflow.com/questions/37671342/how-to-load-image-files-with-webpack-file-loader. Also if you are using CRA based setup - see if reading this section helps - https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs/. – H S Dec 03 '20 at 13:27

1 Answers1

1

you can have a customizable icon with this library

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

azza
  • 84
  • 8