Как импортировать svg в компонент next.js? - PullRequest
Новая
       21

Как импортировать svg в компонент next.js?

0 голосов
/ 23 мая 2019

Я пытаюсь импортировать изображение SVG из файла в компонент next.js.

В папке активов у меня есть google.svg (иконка): 

<svg className="svgIcon-use" width="25" height="37" viewBox="0 0 25 25">
    <g fill="none" fillRule="evenodd">
      <path
        d="M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v2.133h2.747c1.608-1.48 2.535-3.65 2.535-6.24z"
        fill="#4285F4"
      />
      <path
        d="M12.5 21c2.295 0 4.22-.76 5.625-2.06l-2.747-2.132c-.76.51-1.734.81-2.878.81-2.214 0-4.088-1.494-4.756-3.503h-2.84v2.202A8.498 8.498 0 0 0 12.5 21z"
        fill="#34A853"
      />
      <path
        d="M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.488 0 0 0 4 12.5c0 1.372.328 2.67.904 3.817l2.84-2.202z"
        fill="#FBBC05"
      />
      <path
        d="M12.5 7.38c1.248 0 2.368.43 3.25 1.272l2.437-2.438C16.715 4.842 14.79 4 12.5 4a8.497 8.497 0 0 0-7.596 4.683l2.84 2.202c.668-2.01 2.542-3.504 4.756-3.504z"
        fill="#EA4335"
      />
    </g>
  </svg>

Мне нужно импортировать этот svg внутри этого компонента next.js: 

import googleLogo from '../assets/google.svg';

class Login extends React.Component {
  render() {
    return (
      <LoginLayout title="Login Page">
        <div>
          <Link href="/auth/google">
            <a className="button">
              <div>
                <span className="svgIcon t-popup-svg">
                  {googleLogo}   // <---- import here icon
                </span>

              </div>
            </a>
          </Link>
        </div>
      </LoginLayout>
    );
  }
}

Я установил этот пакет: https://www.npmjs.com/package/next-images

и установить конфигурацию на основе этого документа в next.config.js: 

const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');

module.exports = withCSS(
  withSass({
    webpack: (config) => config,
    distDir: '../_next'
  }),
  withImages({
    exclude: path.resolve(__dirname, 'client/assets/svg'),
    webpack(config, options) {
      return config;
    }
  })
);

Почему мой импорт svg не работает?

Любой совет?

Ответы [ 2 ]

1 голос
/ 23 мая 2019

Другой подход заключается в создании компонента для вас svg. Мне нравится этот подход, потому что я могу легко передать реквизиты для ширины, высоты цвета и т. Д. При необходимости на svg.

например 

//GoogleLogo.js
import React from "react";
export default function GoogleLogo() {
  return (
    <svg className="svgIcon-use" width="25" height="37" viewBox="0 0 25 25">
      <g fill="none" fillRule="evenodd">
        <path
          d="M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v2.133h2.747c1.608-1.48 2.535-3.65 2.535-6.24z"
          fill="#4285F4"
        />
        <path
          d="M12.5 21c2.295 0 4.22-.76 5.625-2.06l-2.747-2.132c-.76.51-1.734.81-2.878.81-2.214 0-4.088-1.494-4.756-3.503h-2.84v2.202A8.498 8.498 0 0 0 12.5 21z"
          fill="#34A853"
        />
        <path
          d="M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.488 0 0 0 4 12.5c0 1.372.328 2.67.904 3.817l2.84-2.202z"
          fill="#FBBC05"
        />
        <path
          d="M12.5 7.38c1.248 0 2.368.43 3.25 1.272l2.437-2.438C16.715 4.842 14.79 4 12.5 4a8.497 8.497 0 0 0-7.596 4.683l2.84 2.202c.668-2.01 2.542-3.504 4.756-3.504z"
          fill="#EA4335"
        />
      </g>
    </svg>
  );
}

и в вашем файле сверху. 

  import GoogleLogo from "./GoogleLogo";

  class Login extends React.Component {
    render() {
      return (
        <LoginLayout title="Login Page">
          <div>
            <Link href="/auth/google">
              <a className="button">
                <div>
                  <span className="svgIcon t-popup-svg">
                    <GoogleLogo />
                  </span>

                </div>
              </a>
            </Link>
          </div>
        </LoginLayout>
      );
    }
  }
0 голосов
/ 24 мая 2019

Я недавно добавил это сам.Я следовал примеру в репозитории Next.js.

https://github.com/zeit/next.js/tree/master/examples/svg-components

Есть несколько шагов -

1) Вам необходимо установить следующие зависимости:

  • babel-plugin-inline-реагировать-svg
  • inline-реагировать-svg

2) Внутри .babelrc необходимо добавить плагин inline-react-svg

  "plugins": [
    "inline-react-svg",
  ]

После этого вы сможете импортировать SVG в свои компоненты.Вот суть чего-то похожего, для чего я его использовал.

https://gist.github.com/iamchristough/493c60112770058566d559e6860dc4c97

Примечание - вам нужно объявить его как его собственный компонент <GoogleLogo />, если вы только что сделали {GoogleLogo}, это приведет к ошибке,Также существует проблема с тем, как babel преобразует SVG, поэтому любые изменения внутри SVG-файла не будут отображаться.Вам нужно переименовать файл для того, чтобы упаковщик увидел изменения.

Надеюсь, это поможет.

...