在 GatsbyJs 模板中设置原始徽标

Question

我正在学习 GatsbyJS。我用这个很酷的模板

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

我一直在尝试更改我原来的徽标，我在下面写道。 似乎第二行很好。但标志不会出现。 并且在此徽标期间发生的另一件事以某种方式更改了 datsby 开发命令停止了。 当我在编辑句子时很好。但是当我开始改变标志时，盖茨比开发经常停止。请教教我好吗？

更新

当前错误

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 资源。如果出现问题，您可能需要查看一下。