-1

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
bluetail
  • 183
  • 8
  • Maybe don't name *your* component the same thing that you imported. – Drew Reese Jan 21 '22 at 03:29
  • Dear @Drew Reese Thank you for answering me. And sorry for late. Now I trying to use plugin way that Mr.Ferran Buireu taught me. and update my code. ... still doesn't show my logo. – bluetail Jan 24 '22 at 02:12

1 Answers1

1

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.

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • It's preferable when loading SVG to use plugins for built-in support. Follow https://stackoverflow.com/questions/61158924/import-svg-as-a-component-in-gatsby/61161331#61161331, where it's using https://www.gatsbyjs.org/packages/gatsby-plugin-react-svg/ – Ferran Buireu Jan 21 '22 at 08:54
  • Dear @Ferran Buireu, Sorry for late. I UPDATE. Could you take a look my current code please? What I did that installed plugin and save svg file into the path. I only save this svg. and I fixed my logo.jsx but Nothing change. I adjust code but error come up. Could you teach me next step please? – bluetail Jan 24 '22 at 02:10
  • Your logo needs to be imported as a React component like `import Icon from "./path/assets/icon.svg` and displayed directly using ``. You may need to apply some styling or giving some width to display it as you wish – Ferran Buireu Jan 24 '22 at 06:04
  • In addition, if you read carefully, you'll see that you don't need to add the path but the name folder. `test` is a regular expression – Ferran Buireu Jan 24 '22 at 06:47
  • Dear @Ferran Buireu Thank you again. I add import Icon from "src/@lekoarts/gatsby-theme-jodie/icons/svg/logo.svg" and but I got error. I had been trying to adjust code but I got another error. Could you teach me correct code please? And I have a another question. I change my code and did [gatsby develop] command and I have to wait about 1 min. And when I got some error or when I change code and become syntax error or something my gatsby developed stop. Am I doing wrong developing right? Is there any quick way to see debug and developing? – bluetail Jan 25 '22 at 03:11
  • There's too many topics mixing here, we haven't fixed the first one yet. Until you clarify "i got an error" or "I got another error" meaning it's impossible to guess what's going on. In addition, `gatsby-plugin-react-svg`, the `include` rule **must** be a folder name, not the path. It's normal that when you have an error, depending on what error the development stops. The trace of the issue should be in the console – Ferran Buireu Jan 25 '22 at 05:48
  • Dear @Ferran Buireu Thank you and Sorry for taking time for me. I had been tried what you said and you taught a link page. but I've having syntax error many time. I think I should study grammar first. I really appreciate your help. – bluetail Jan 26 '22 at 09:09