Fix react-icons style for emotion v10

wKovacs64 · Dec 4, 2018 · a5071ef · a5071ef
1 parent 2b876a1
commit a5071ef
Showing 1 changed file with 72 additions and 61 deletions.
diff --git a/src/components/layout.js b/src/components/layout.js
@@ -4,7 +4,7 @@ import 'typeface-source-sans-pro';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
-import { css, Global } from '@emotion/core';
+import { css, Global, ClassNames } from '@emotion/core';
 import { IconContext } from 'react-icons';
 import { StaticQuery, graphql } from 'gatsby';
 import mq from '../utils/mq';
@@ -31,66 +31,77 @@ const Layout = ({ children }) => (
     `}
   >
     {({ site: { siteMetadata } }) => (
-      <IconContext.Provider
-        value={{
-          className: css`
-            vertical-align: middle;
-          `,
-        }}
-      >
-        <Global
-          styles={css`
-            @font-face {
-              font-family: 'Nunito';
-              src: local('Nunito');
-            }
-            @font-face {
-              font-family: 'Source Sans Pro';
-              src: local('Source Sans Pro');
-            }
-            body {
-              font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-                'avenir next', avenir, 'helvetica neue', helvetica, ubuntu,
-                roboto, noto, 'segoe ui', arial, sans-serif;
-            }
-          `}
-        />
-        <Helmet
-          title={siteMetadata.title}
-          meta={[
-            { name: 'description', content: siteMetadata.description },
-            { property: 'og:type', content: 'website' },
-            { property: 'og:title', content: siteMetadata.title },
-            { property: 'og:description', content: siteMetadata.description },
-            { property: 'og:image', content: siteMetadata.socialImageUrl },
-            { property: 'og:image:alt', content: siteMetadata.title },
-            { name: 'twitter:card', content: 'summary_large_image' },
-            { name: 'twitter:title', content: siteMetadata.title },
-            { name: 'twitter:description', content: siteMetadata.description },
-            { name: 'twitter:image', content: siteMetadata.socialImageUrl },
-            { name: 'twitter:image:alt', content: siteMetadata.title },
-          ]}
-        >
-          <html
-            lang="en"
-            data-commit={siteMetadata.buildInfo.commit}
-            data-version={siteMetadata.buildInfo.version}
-          />
-        </Helmet>
-        <div
-          css={css`
-            min-height: 100vh;
-            padding: 1rem;
-            ${mq.md(css`
-              padding: 0 0 1rem;
-            `)};
-          `}
-        >
-          <Header />
-          <Main>{children}</Main>
-          <Footer />
-        </div>
-      </IconContext.Provider>
+      <ClassNames>
+        {({ css: classNameFromCss }) => (
+          <IconContext.Provider
+            value={{
+              className: classNameFromCss`
+                  vertical-align: middle;
+                `,
+            }}
+          >
+            <Global
+              styles={css`
+                @font-face {
+                  font-family: 'Nunito';
+                  src: local('Nunito');
+                }
+                @font-face {
+                  font-family: 'Source Sans Pro';
+                  src: local('Source Sans Pro');
+                }
+                body {
+                  font-family: 'Source Sans Pro', -apple-system,
+                    BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue',
+                    helvetica, ubuntu, roboto, noto, 'segoe ui', arial,
+                    sans-serif;
+                }
+              `}
+            />
+            <Helmet
+              title={siteMetadata.title}
+              meta={[
+                { name: 'description', content: siteMetadata.description },
+                { property: 'og:type', content: 'website' },
+                { property: 'og:title', content: siteMetadata.title },
+                {
+                  property: 'og:description',
+                  content: siteMetadata.description,
+                },
+                { property: 'og:image', content: siteMetadata.socialImageUrl },
+                { property: 'og:image:alt', content: siteMetadata.title },
+                { name: 'twitter:card', content: 'summary_large_image' },
+                { name: 'twitter:title', content: siteMetadata.title },
+                {
+                  name: 'twitter:description',
+                  content: siteMetadata.description,
+                },
+                { name: 'twitter:image', content: siteMetadata.socialImageUrl },
+                { name: 'twitter:image:alt', content: siteMetadata.title },
+              ]}
+            >
+              <html
+                lang="en"
+                data-commit={siteMetadata.buildInfo.commit}
+                data-version={siteMetadata.buildInfo.version}
+              />
+            </Helmet>
+            <div
+              css={css`
+                min-height: 100vh;
+                padding: 1rem;
+                ${mq.md(css`
+                  padding: 0 0 1rem;
+                `)};
+              `}
+            >
+              <Header />
+              <Main>{children}</Main>
+              <Footer />
+            </div>
+          </IconContext.Provider>
+        )}
+      </ClassNames>
     )}
   </StaticQuery>
 );