SVG всегда установлен на 300x150 в приложении Гэтсби Js Bootstrap - PullRequest
Новая
       30

SVG всегда установлен на 300x150 в приложении Гэтсби Js Bootstrap

0 голосов
/ 11 апреля 2020

Я пытаюсь использовать изображение svg в разделе бренда заголовка navbar, но размер svg всегда равен 300x150, даже если само изображение имеет размер 20x16. Я использую тему gastrapp в Гэтсби js. Мой код: 

   import React, { Component } from 'react'
import { Link } from 'gatsby'
import './style.scss'
import 'scss/gatstrap.scss'
import Icon from 'components/Icon'
import SVG from 'components/custom-icons'

class Navi extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      windowWidth: 1081,
      mobileNavVisible: false,
    }
  }

  handleResize() {
    this.setState({ windowWidth: window.innerWidth })
  }

  componentDidMount() {
    if (typeof window !== 'undefined') {
      if (window.innerWidth < this.state.windowWidth) {
        this.handleResize()
      }
      window.addEventListener('resize', this.handleResize.bind(this))
    }
  }

  componentWillUnmount() {
    if (typeof window !== 'undefined') {
      window.removeEventListener('resize', this.handleResize.bind(this))
    }
  }

  navigationLinks() {
    const { location, title } = this.props
    return (
      <ul
        className={
          this.state.mobileNavVisible
            ? 'navbar-nav mr-auto mt-2 mt-md-0'
            : 'navbar-nav bd-navbar-nav'
        }
      >
        <li
          className={location.pathname === '/' ? 'nav-item active' : 'nav-item'}
        >
          <Link to="/" className="nav-link">
            Anasayfa
          </Link>
        </li>
        <li
          className={
            location.pathname === '/kedi/' ? 'nav-item active' : 'nav-item'
          }
        >
          <Link to="/kedi/" className="nav-link">
            Kedi
          </Link>
        </li>
        <li
          className={
            location.pathname === '/kopek/' ? 'nav-item active' : 'nav-item'
          }
        >
          <Link to="/kopek/" className="nav-link">
            Köpek
          </Link>
        </li>
        <li
          className={
            location.pathname === '/contact/' ? 'nav-item active' : 'nav-item'
          }
        >
          <Link to="/contact/" className="nav-link">
            İletişim
          </Link>
        </li>
      </ul>
    )
  }

  renderMobileNav() {
    if (this.state.mobileNavVisible) {
      return this.navigationLinks()
    }
  }

  handleNavClick() {
    if (!this.state.mobileNavVisible) {
      this.setState({ mobileNavVisible: true })
    } else {
      this.setState({ mobileNavVisible: false })
    }
  }

  renderNavigation() {
    if (this.state.windowWidth <= 767) {
      return [
        <nav className="navbar navbar-expand-sm navbar-dark flex-md-row sticky-top bg-dark">
          <div className="container-fluid">
            <div className="navbar-header">
              <Link className="navbar-brand" to="/">
                <SVG name ='ataklogo'/>
              </Link>
            </div>
            <div className="nav navbar navbar-right">
              <button
                className="navbar-toggle menu-button"
                onClick={this.handleNavClick.bind(this)}
              >
                <span
                  className="menu-icon
                   "
                >
                  <Icon name="bars" prefix="fas"></Icon>
                </span>
              </button>
            </div>

            <div className="navbar navbar-collapse">
              {this.renderMobileNav()}
            </div>
          </div>
        </nav>,
      ]
    } else {
      return [
        <nav className="navbar navbar-expand navbar-dark flex-column flex-md-row white-bg sticky-top navbar-expand-md bg-dark">
          <div className="container">
            <div className="navbar-header" >
              <Link className="navbar-brand" to="/">
              <SVG name ='ataklogo' />
              </Link>
            </div>
            <div className="navbar-nav-scroll ml-auto">
              {this.navigationLinks()}
            </div>
          </div>
        </nav>,
      ]
    }
  }

  render() {
    return this.renderNavigation()
  }
}

export default Navi

и компонент SVG выглядит следующим образом: 

import React from 'react'

const getPath = name => {
  switch (name) {
    case 'ataklogo':
      return (
       <g id="logo"><path d="M5.41,14.69a10.4,10.4,0,0,1,.67-4.19l-.24,0-.66-.06c-.55,0-.92-.07-.95-.48A1.31,1.31,0,0,1,4.54,9a2,2,0,0,0,.35-1.58l-.23.21a.36.36,0,0,1-.38.1l-.89-.28h0a.38.38,0,0,1-.24-.24L3.09,7a3.17,3.17,0,0,0-.5,1.86A9.36,9.36,0,0,1,2.48,10a4.64,4.64,0,0,0,.16,2.3,4.55,4.55,0,0,1,.08,2.8.36.36,0,0,1-.36.29H1.67a.37.37,0,0,1,0-.73h.41a4.12,4.12,0,0,0-.14-2.17A5.15,5.15,0,0,1,1.76,9.9a6.41,6.41,0,0,0,.1-1A3.61,3.61,0,0,1,3,6,.37.37,0,0,1,3.5,6a.28.28,0,0,1,.08.15h0l.21.65L4.3,7l.55-.53a.38.38,0,0,1,.61.17h0a2.88,2.88,0,0,1-.31,2.79c-.1.15,0,.23.13.25a6,6,0,0,1,.65.06l.44.07a10.25,10.25,0,0,1,.94-1.6C8.16,7,8.85,6.2,9.37,5.57c.85-1,1.25-1.51,1.31-2.33a5.55,5.55,0,0,1,.4-2A1.93,1.93,0,0,1,12.44.12l0,0h0a2.56,2.56,0,0,1,1.87.19,2,2,0,0,1,1,1h0a9.91,9.91,0,0,0,1.26-.11l.25,0a.41.41,0,0,1,.29.13h0v0h0a.8.8,0,0,1,.14.45,1.93,1.93,0,0,1,0,.57,2.1,2.1,0,0,1-.86,1.27c-.25.17-.51.32-.75.47-.5.29-.91.53-.85.64a5,5,0,0,1,.38,2.19,7.26,7.26,0,0,1-.49,2.39,8.74,8.74,0,0,0-.39,2.92,8.75,8.75,0,0,0,.33,2.52H15a.37.37,0,1,1,0,.73h-.56a.39.39,0,0,1-.34-.21,8.35,8.35,0,0,1-.48-3A10.06,10.06,0,0,1,14.08,9a6.62,6.62,0,0,0,.45-2.16A4.41,4.41,0,0,0,14.22,5c-.34-.71.32-1.1,1.14-1.58.23-.13.47-.28.7-.44a1.32,1.32,0,0,0,.56-.83.82.82,0,0,0,0-.26c-.59.08-1.71.18-1.93-.37,0,0,0,0,0,0a1.39,1.39,0,0,0-.64-.52L13.82.83A3.23,3.23,0,0,1,14,1.3a3.36,3.36,0,0,1,0,1A2.73,2.73,0,0,1,12.6,4.62a.36.36,0,0,1-.47-.18,8.29,8.29,0,0,1-.66-1.79,6.06,6.06,0,0,0-.06.64c-.07,1-.53,1.6-1.48,2.74-.51.61-1.17,1.41-2,2.6A9.09,9.09,0,0,0,7.09,10c1.29.46,2.53,1.62,2.25,4.68h.39a.37.37,0,1,1,0,.73h-.8a.36.36,0,0,1-.36-.37V15c.36-2.84-.68-3.89-1.78-4.3A9.05,9.05,0,0,0,6.17,15s0,0,0,.07a.37.37,0,0,1-.37.37H5a.37.37,0,1,1,0-.73Zm6-5.69A9.52,9.52,0,0,0,11,12.18a8.14,8.14,0,0,0,.48,3,.36.36,0,0,0,.33.21h.57a.37.37,0,0,0,0-.73h-.33a8.75,8.75,0,0,1-.33-2.52,9,9,0,0,1,.39-2.92.36.36,0,0,0-.21-.47.37.37,0,0,0-.47.22ZM13,1a.37.37,0,0,0-.39-.13c-1.09.37-.39,2.18,0,3a2.31,2.31,0,0,0,.68-1.57,2.6,2.6,0,0,0,0-.75A1.1,1.1,0,0,0,13,1Z" fill="currentColor" fill-rule="evenodd"/><path d="M13,17.49a.46.46,0,0,0-.34.14.65.65,0,0,0-.13.45.64.64,0,0,0,.13.44.46.46,0,0,0,.34.14.42.42,0,0,0,.34-.14.65.65,0,0,0,.13-.45.63.63,0,0,0-.13-.44A.44.44,0,0,0,13,17.49Z" fill="currentColor" fill-rule="evenodd"/><path d="M7.47,17.52H7.06V18h.18a.85.85,0,0,0,.28,0,.27.27,0,0,0,.1-.08.23.23,0,0,0,0-.14.2.2,0,0,0,0-.15A.25.25,0,0,0,7.47,17.52Z" fill="currentColor" fill-rule="evenodd"/><polygon points="3.61 18.25 4.08 18.25 3.84 17.62 3.61 18.25" fill="currentColor" fill-rule="evenodd"/><path d="M14.64,17.49a.48.48,0,0,0-.35.14.71.71,0,0,0-.13.45.64.64,0,0,0,.14.44.46.46,0,0,0,.34.14.44.44,0,0,0,.34-.14.71.71,0,0,0,.13-.45.63.63,0,0,0-.13-.44A.46.46,0,0,0,14.64,17.49Z" fill="currentColor" fill-rule="evenodd"/><path d="M0,16v4H17.5V16Zm1.89,2.91-.14-.39H1.06l-.14.39H.56l.66-1.71h.37l.68,1.71Zm.92,0H2.47V17.51H2v-.29H3.32v.29H2.81Zm3,0-.47-.8-.28.28v.52H4.34l-.15-.39H3.51l-.14.39H3l.67-1.71H4l.68,1.7v-1.7h.35V18l.69-.76h.47l-.65.67.68,1ZM8,18a.45.45,0,0,1-.32.25,1.6,1.6,0,0,1-.36,0H7.06v.64H6.71V17.22h.55a1.7,1.7,0,0,1,.41,0,.42.42,0,0,1,.25.17.48.48,0,0,1,.1.33A.53.53,0,0,1,8,18Zm1.45.92H8.11V17.22H9.38v.29H8.46v.38h.85v.29H8.46v.46h.95Zm1.43-1.42h-.5v1.42H10V17.51h-.5v-.29h1.35Zm1.28,0h-.83v.41H12v.28h-.72v.73H11V17.22h1.17Zm1.45,1.22a.9.9,0,0,1-1.2,0,.9.9,0,0,1-.23-.64,1.12,1.12,0,0,1,.08-.44.73.73,0,0,1,.38-.39,1.06,1.06,0,0,1,.37-.07.78.78,0,0,1,.6.24.89.89,0,0,1,.23.65A.92.92,0,0,1,13.57,18.73Zm1.67,0a.91.91,0,0,1-1.21,0,.89.89,0,0,1-.22-.64,1,1,0,0,1,.08-.44.75.75,0,0,1,.15-.24.83.83,0,0,1,.23-.15,1,1,0,0,1,.36-.07.79.79,0,0,1,.61.24.88.88,0,0,1,.22.65A.92.92,0,0,1,15.24,18.73Zm1.68-.27a.75.75,0,0,1-.18.3.55.55,0,0,1-.24.13.9.9,0,0,1-.31,0h-.65V17.22h.63a1.42,1.42,0,0,1,.33,0,.6.6,0,0,1,.25.16.73.73,0,0,1,.17.28,1.18,1.18,0,0,1,0,.4A1.07,1.07,0,0,1,16.92,18.46Z" fill="currentColor" fill-rule="evenodd"/><path d="M16.48,17.61a.27.27,0,0,0-.16-.08,1.43,1.43,0,0,0-.28,0h-.15v1.13h.46a.46.46,0,0,0,.14-.07.34.34,0,0,0,.09-.17.9.9,0,0,0,0-.31.86.86,0,0,0,0-.31A.29.29,0,0,0,16.48,17.61Z" fill="currentColor" fill-rule="evenodd"/><polygon points="1.17 18.25 1.64 18.25 1.4 17.62 1.17 18.25" fill="currentColor" fill-rule="evenodd"/></g>
       ) }
}

const SVG = props => (
  <svg
    width={props.width}
    style={props.style}
    height={props.height}
    viewbox={props.viewBox}
    className={props.className}
    //preserveAspectRatio="xMidYMid meet"
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    //backgroundSize="1.875em 10em"
  >
    {getPath(props.name)}
  </svg>
)

export default SVG

Я пытаюсь выровнять lo go с остальной частью навигационной панели.

Спасибо,

...