In your Icon.js (line 14) file you are using a <svg>
. This is causing your issue:
// @flow strict
import React from 'react';
import styles from './Icon.module.scss';
type Props = {
name: string,
icon: {
viewBox?: string,
path?: string
}
};
const Icon = ({ name, icon }: Props) => (
<svg className={styles['icon']} viewBox={icon.viewBox}>
<title>{name}</title>
<path d={icon.path} />
</svg>
);
export default Icon;
When dealing with SVG I would recommend using gatsby-plugin-react-svg
or using a React built-in usage.
With gatsby-plugin-react-svg
you just to isolate the SVG in a separate folder that must only contain SVGs):
{
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
include: /assets/
}
}
}
Then import it as a React component:
import Icon from "./path/assets/icon.svg";
// ...
<Icon />;
React built-in usage (only available with [email protected]
or higher, and [email protected]
or higher, more details in https://create-react-app.dev/docs/adding-images-fonts-and-files/):
import { ReactComponent as FacebookIcon } from '../images/svg/facebookF.svg';
import { ReactComponent as Email } from '../images/svg/email.svg';
...
<FacebookIcon />
<Email />
Since you are extending from a starter theme, remove that component and it's using from your project and add it on-demand if needed.
You can read this StackOverflow answer for further details about dealing SVG in Gatsby.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…