在 GatsbyJs 模板中设置原始徽标

Question

我正在研究 GatsbyJS。我用这个很酷的模板

https://www.gatsbyjs.com/starters/LekoArts/gatsby-starter-portfolio-jodie

我一直在尝试更改我原来的徽标，我在下面写了。好像第二行没问题。但徽标不会出现。在此徽标更改期间的另一件事以某种方式停止了 datsby develop 命令。当我在编辑句子时，它很好。但是当我开始更改徽标时，gatsby develop 经常停止。可以教教我吗？

更新

当前错误

ValidationError：无效的配置对象。 Webpack 已使用 con 初始化与 API 架构不匹配的图形对象。

configuration.module.rules[10].exclude: 提供的值"src/@lekoarts/gatsby-the me-jodie/icons/svg/" 不是绝对路径！

gatsby-config.js

  {
    resolve: "gatsby-plugin-react-svg",
    options: {
      rule: {
        include: "src/@lekoarts/gatsby-theme-jodie/icons/svg/"
      },
    },
  },

logo.jsx

import * as React from "react"

const Logo = () => (
  <svg viewBox="0 0 150 150">
    <title>home</title>
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="..."
    />
  </svg>
)

export default Logo

Answer 1

您声明的组件 (Logo) 与导入资产（import {ReactComponent as Logo} from './logo.svg'，名为 as Logo）同名。

首先，尝试像这样更改名称：

import * as React from "react"
import {ReactComponent as Logo} from './logo.svg'

const LogoComponent = () => (
  <svg viewBox="0 0 150 150">
    <title>newlogo</title>
    <path
      fillRule="evenodd"
      clipRule="evenodd"      
    />
    <Logo />
  </svg>
)

export default LogoComponent

还有其他方法可以使用插件在 Gatsby 项目 (Import SVG as a component in Gatsby) 中导入 SVG 资产。如果出现问题，您可能需要查看一下。

在 GatsbyJs 模板中设置原始徽标

Setting original logo in GatsbyJs template

reactjs

gatsby