Console Error: <svg> attribute height: unexpected end of attribute. Expected length, "".

[elijah-io]

When I click the icon, nothing happens (no animation).

I am getting this issue when trying to build in my Gatsby project:

I have ran npm install --save @animated-burgers/burger-squeeze classnames and integrated into my header.js file as such:

import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"

import "./scss/layout.scss"

import AniLink from "gatsby-plugin-transition-link/AniLink"
import Burger from '@animated-burgers/burger-squeeze' 
import '@animated-burgers/burger-squeeze/dist/styles.css' 
import '@animated-burgers/Burger/styles.scss' 

import Logo from "./logo"

const Header = ({ siteTitle }) => (
  <header
  style={{
    marginTop: 25,
    marginBottom: 25,
  }}>
    <div className="container" >
      <div className="row">
        <div className="col-9">
          <AniLink cover to={`/`} direction="right" bg="#EE4E31" duration={0.50}>
            <Logo />
          </AniLink>
        </div>
        <div className="col-3 my-auto desktop-menu">
          <div style={{textAlign: 'right'}}>
            <AniLink cover to={`/`} direction="left" bg="#EE4E31" duration={0.50}>Testing</AniLink>
          </div>
        </div>
        <div className="col-3 my-auto mobile-menu">
          <div style={{textAlign: 'right', marginTop: '-13px'}}>
            {/* <Link to="/" style={{fontSize: 40}}></Link> */}
            <Burger Component="button" type="button" />
          </div>
        </div>
      </div>
    </div>
  </header>
)

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header
import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"

import "./scss/layout.scss"

import AniLink from "gatsby-plugin-transition-link/AniLink"
import Burger from '@animated-burgers/burger-squeeze' 
import '@animated-burgers/burger-squeeze/dist/styles.css' 
import '@animated-burgers/Burger/styles.scss' 

import Logo from "./logo"

const Header = ({ siteTitle }) => (
  <header
  style={{
    marginTop: 25,
    marginBottom: 25,
  }}>
    <div className="container" >
      <div className="row">
        <div className="col-9">
          <AniLink cover to={`/`} direction="right" bg="#EE4E31" duration={0.50}>
            <Logo />
          </AniLink>
        </div>
        <div className="col-3 my-auto desktop-menu">
          <div style={{textAlign: 'right'}}>
            <AniLink cover to={`/`} direction="left" bg="#EE4E31" duration={0.50}>Testing</AniLink>
          </div>
        </div>
        <div className="col-3 my-auto mobile-menu">
          <div style={{textAlign: 'right', marginTop: '-13px'}}>
            {/* <Link to="/" style={{fontSize: 40}}></Link> */}
            <Burger Component="button" type="button" />
          </div>
        </div>
      </div>
    </div>
  </header>
)

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

Let me know if I can provide any additional context or replication steps. Thank you for this cool tool!

[march08]

I don't think this is a issue with the library but your logo instead. The library doesn't use SVG at all. Let me know if that is correct

[elijah-io]

That's correct, @march08 – sorry for the bad issue. I was having an issue to where the burgers weren't animating to the active state, but that's something for me to troubleshoot. Thank you!