Search code examples
reactjsgatsby

Setting original logo in GatsbyJs template

I'm studying GatsbyJS. I use this cool template

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

I have been trying to change my original logo and I wrote below. seems like 2nd line is fine. but The logo won't show up. And Another things during this logo changing somehow datsby develop command stoped. When I was editing sentences It's fine. But when I was starting to chang logo gatsby develop stop often. Could you teach me please?

UPDATE

Current error

ValidationError: Invalid configuration object. Webpack has been initialized using a con figuration object that does not match the API schema.

  • configuration.module.rules[10].exclude: The provided value "src/@lekoarts/gatsby-the me-jodie/icons/svg/" is not an absolute path!

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
Solution

  • You are declaring your component (Logo) with the same name than the imported asset (import {ReactComponent as Logo} from './logo.svg', named as Logo).

    First of all, try changing the names like:

    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

    There are other ways of importing SVG assets in a Gatsby project (Import SVG as a component in Gatsby), using plugins. You may want to take a look if issues comes up.