maintenance(www): use gatsby-plugin-react-svg for icons (#25282)

* use gatsby-plugin-react-svg for icons * use elements instead of component names * update asset imports * v2 icon * featured-sites * add thingy * svg
gatsbyjs · Jun 27, 2020 · 67b3ca9 · 67b3ca9
1 parent b73cc5d
commit 67b3ca9
Show file tree

Hide file tree

Showing 25 changed files with 101 additions and 136 deletions.
diff --git a/www/gatsby-config.js b/www/gatsby-config.js
@@ -258,6 +258,14 @@ module.exports = {
     `gatsby-plugin-twitter`,
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-sitemap`,
+    {
+      resolve: `gatsby-plugin-react-svg`,
+      options: {
+        rule: {
+          include: /assets\/(guidelines|icons|ornaments)\/.*.svg$/,
+        },
+      },
+    },
     {
       resolve: `gatsby-plugin-google-analytics`,
       options: {

diff --git a/www/package.json b/www/package.json
@@ -42,6 +42,7 @@
     "gatsby-plugin-nprogress": "^2.3.5",
     "gatsby-plugin-offline": "^3.2.12",
     "gatsby-plugin-react-helmet": "^3.3.5",
+    "gatsby-plugin-react-svg": "^3.0.0",
     "gatsby-plugin-sharp": "^2.6.13",
     "gatsby-plugin-sitemap": "^2.4.6",
     "gatsby-plugin-theme-ui": "^0.3.0",

diff --git a/www/src/assets/guidelines/index.js b/www/src/assets/guidelines/index.js
@@ -0,0 +1,5 @@
+export { default as Wordmark } from "./wordmark.svg"
+export { default as Clearspace } from "./clearspace.svg"
+export { default as ClearspaceMonogram } from "./clearspace-monogram.svg"
+export { default as ManuallyTracked } from "./manually-tracked.svg"
+export { default as PartnershipLockups } from "./partnership-lockups.svg"
diff --git a/www/src/assets/icons/ecosystem-icons.js b/www/src/assets/icons/ecosystem-icons.js
@@ -1,4 +1,4 @@
-import PluginsIcon from "!raw-loader!./plugins-ecosystem.svg"
-import StartersIcon from "!raw-loader!./starters.svg"
+import PluginsIcon from "./plugins-ecosystem.svg"
+import StartersIcon from "./starters.svg"
 
 export { PluginsIcon, StartersIcon }
diff --git a/www/src/assets/icons/featured-sites-icons.js b/www/src/assets/icons/featured-sites-icons.js
diff --git a/www/src/assets/icons/featured-sites.svg b/www/src/assets/icons/featured-sites.svg
diff --git a/www/src/assets/icons/index.js b/www/src/assets/icons/index.js
@@ -1,15 +1,8 @@
-import BlogIcon from "!raw-loader!./blog.svg"
-import DocsIcon from "!raw-loader!./docs.svg"
-import EcosystemIcon from "!raw-loader!./ecosystem.svg"
-import PluginsIcon from "!raw-loader!./plugins.svg"
-import ShowcaseIcon from "!raw-loader!./showcase.svg"
-import TutorialIcon from "!raw-loader!./tutorial.svg"
-
-export {
-  BlogIcon,
-  DocsIcon,
-  EcosystemIcon,
-  PluginsIcon,
-  ShowcaseIcon,
-  TutorialIcon,
-}
+export { default as V2Icon } from "./v2icon.svg"
+export { default as BlogIcon } from "./blog.svg"
+export { default as DocsIcon } from "./docs.svg"
+export { default as EcosystemIcon } from "./ecosystem.svg"
+export { default as PluginsIcon } from "./plugins.svg"
+export { default as ShowcaseIcon } from "./showcase.svg"
+export { default as TutorialIcon } from "./tutorial.svg"
+export { default as FeaturedSitesIcon } from "./featured-sites.svg"
diff --git a/www/src/assets/ornaments/index.js b/www/src/assets/ornaments/index.js
@@ -1,11 +1,4 @@
-import CirclesOrnament from "!raw-loader!./circles-ornament.svg"
-import NewsletterFormOrnament from "!raw-loader!./newsletter-form-ornament.svg"
-import QuotationMarkOrnament from "!raw-loader!./quotation-mark-ornament.svg"
-import StarOrnament from "!raw-loader!./star-ornament.svg"
-
-export {
-  CirclesOrnament,
-  NewsletterFormOrnament,
-  QuotationMarkOrnament,
-  StarOrnament,
-}
+export { default as CirclesOrnament } from "./circles-ornament.svg"
+export { default as NewsletterFormOrnament } from "./newsletter-form-ornament.svg"
+export { default as QuotationMarkOrnament } from "./quotation-mark-ornament.svg"
+export { default as StarOrnament } from "./star-ornament.svg"
diff --git a/www/src/components/ecosystem/ecosystem-board.js b/www/src/components/ecosystem/ecosystem-board.js
@@ -4,6 +4,7 @@ import { useEffect } from "react"
 import PropTypes from "prop-types"
 
 import EcosystemSection from "./ecosystem-section"
+import { PluginsIcon, StartersIcon } from "../../assets/icons/ecosystem-icons"
 import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 import {
   setupScrollersObserver,
@@ -16,11 +17,7 @@ export default function EcosystemBoard(props) {
     return () => unobserveScrollers()
   }, [])
 
-  const {
-    icons: { plugins: PluginsIcon, starters: StartersIcon },
-    starters,
-    plugins,
-  } = props
+  const { starters, plugins } = props
 
   return (
     <div
@@ -42,7 +39,7 @@ export default function EcosystemBoard(props) {
         title="Plugins"
         description="Plugins are packages that extend Gatsby sites. They can source content, transform data, and more!"
         subTitle="Featured Plugins"
-        icon={PluginsIcon}
+        icon={<PluginsIcon />}
         links={[
           { label: `Browse Plugins`, to: `/plugins/` },
           {
@@ -58,7 +55,7 @@ export default function EcosystemBoard(props) {
         title="Starters"
         description="Starters are Gatsby sites that are preconfigured for different use cases to give you a head start for your project."
         subTitle="Featured Starters"
-        icon={StartersIcon}
+        icon={<StartersIcon />}
         links={[
           { label: `Browse Starters`, to: `/starters/` },
           { label: `Using Starters`, to: `/docs/starters/`, secondary: true },
@@ -80,7 +77,6 @@ export default function EcosystemBoard(props) {
 }
 
 EcosystemBoard.propTypes = {
-  icons: PropTypes.object,
   starters: PropTypes.array,
   plugins: PropTypes.array,
 }
diff --git a/www/src/components/ecosystem/ecosystem-section.js b/www/src/components/ecosystem/ecosystem-section.js
@@ -108,7 +108,7 @@ const EcosystemSection = ({
   <EcosystemSectionRoot className={className}>
     <Header>
       <Title>
-        {icon && <Icon dangerouslySetInnerHTML={{ __html: icon }} />}
+        {icon && <Icon>{icon}</Icon>}
         <span>{title}</span>
       </Title>
       <Description>{description}</Description>
@@ -140,7 +140,7 @@ EcosystemSection.propTypes = {
   description: PropTypes.string.isRequired,
   className: PropTypes.string,
   subTitle: PropTypes.string,
-  icon: PropTypes.string,
+  icon: PropTypes.element,
   links: PropTypes.array,
   featuredItems: PropTypes.array,
 }

diff --git a/www/src/components/homepage/homepage-blog.js b/www/src/components/homepage/homepage-blog.js
@@ -11,7 +11,7 @@ import { BlogIcon } from "../../assets/icons"
 const HomepageBlog = ({ posts }) => (
   <HomepageSection
     sectionName="Blog"
-    sectionIcon={BlogIcon}
+    sectionIcon={<BlogIcon />}
     title="The Gatsby blog"
     links={[
       {

diff --git a/www/src/components/homepage/homepage-ecosystem.js b/www/src/components/homepage/homepage-ecosystem.js
@@ -146,7 +146,7 @@ const FeaturedItem = styled(EcosystemFeaturedItem)`
 const HomepageEcosystem = ({ featuredItems }) => (
   <HomepageSection
     sectionName="Ecosystem"
-    sectionIcon={EcosystemIcon}
+    sectionIcon={<EcosystemIcon />}
     title="Plugins & Starters"
     introduction="We have the tools to help you build for the web."
     links={[

diff --git a/www/src/components/homepage/homepage-newsletter.js b/www/src/components/homepage/homepage-newsletter.js
@@ -93,7 +93,9 @@ const Form = styled(EmailCaptureForm)`
 const HomepageNewsletter = () => (
   <HomepageSection>
     <Container>
-      <Ornament dangerouslySetInnerHTML={{ __html: NewsletterFormOrnament }} />
+      <Ornament>
+        <NewsletterFormOrnament />
+      </Ornament>
       <header>
         <Name>The Gatsby Newsletter</Name>
         <Title>Keep up with the latest things Gatsby!</Title>

diff --git a/www/src/components/homepage/homepage-section.js b/www/src/components/homepage/homepage-section.js
@@ -110,9 +110,7 @@ const HomepageSection = ({
     {sectionName && (
       <Header>
         <Name>
-          {sectionIcon && (
-            <Icon dangerouslySetInnerHTML={{ __html: sectionIcon }} />
-          )}
+          {sectionIcon && <Icon>{sectionIcon}</Icon>}
           {sectionName}
         </Name>
         {title && <Title>{title}</Title>}
@@ -145,7 +143,7 @@ const HomepageSection = ({
 HomepageSection.propTypes = {
   children: PropTypes.node.isRequired,
   sectionName: PropTypes.string,
-  sectionIcon: PropTypes.string,
+  sectionIcon: PropTypes.element,
   title: PropTypes.string,
   introduction: PropTypes.string,
   links: PropTypes.array,

diff --git a/www/src/components/layout/layout-with-heading.js b/www/src/components/layout/layout-with-heading.js
@@ -29,7 +29,7 @@ LayoutWithHeading.propTypes = {
   children: PropTypes.node.isRequired,
   location: PropTypes.object.isRequired,
   pageTitle: PropTypes.string,
-  pageIcon: PropTypes.string,
+  pageIcon: PropTypes.element,
 }
 
 export default LayoutWithHeading
diff --git a/www/src/components/layout/page-heading.js b/www/src/components/layout/page-heading.js
@@ -71,15 +71,15 @@ const Icon = styled(`span`)`
 const PageHeading = ({ title, icon }) => (
   <PageHeadingContainer>
     <H1 data-title={title}>
-      <Icon dangerouslySetInnerHTML={{ __html: icon }} />
+      <Icon>{icon}</Icon>
       {title}
     </H1>
   </PageHeadingContainer>
 )
 
 PageHeading.propTypes = {
   title: PropTypes.string,
-  icon: PropTypes.string,
+  icon: PropTypes.element,
 }
 
 export default PageHeading
diff --git a/www/src/components/navigation-mobile.js b/www/src/components/navigation-mobile.js
@@ -35,16 +35,16 @@ const MobileNavItem = ({ linkTo, label, icon }) => (
     getProps={getProps}
     to={linkTo}
   >
-    <span dangerouslySetInnerHTML={{ __html: icon }} />
+    {icon}
     <div>{label}</div>
   </Link>
 )
 const navItems = [
-  { id: `docs`, text: `Docs`, icon: DocsIcon },
-  { id: `tutorial`, text: `Tutorials`, icon: TutorialIcon },
-  { id: `plugins`, text: `Plugins`, icon: PluginsIcon },
-  { id: `blog`, text: `Blog`, icon: BlogIcon },
-  { id: `showcase`, text: `Showcase`, icon: ShowcaseIcon },
+  { id: `docs`, text: `Docs`, icon: <DocsIcon /> },
+  { id: `tutorial`, text: `Tutorials`, icon: <TutorialIcon /> },
+  { id: `plugins`, text: `Plugins`, icon: <PluginsIcon /> },
+  { id: `blog`, text: `Blog`, icon: <BlogIcon /> },
+  { id: `showcase`, text: `Showcase`, icon: <ShowcaseIcon /> },
 ]
 
 const MobileNavigation = () => (

diff --git a/www/src/components/shared/cloud-callout.js b/www/src/components/shared/cloud-callout.js
@@ -47,7 +47,9 @@ const CloudCallout = ({ narrow = true, children }) => (
     <CloudText>{children}</CloudText>
     Try it on{` `}
     <OutboundLink href="https://gatsbyjs.com">Gatsby Cloud</OutboundLink>!
-    <Circles dangerouslySetInnerHTML={{ __html: CirclesOrnament }} />
+    <Circles>
+      <CirclesOrnament />
+    </Circles>
   </CloudCalloutRoot>
 )
 

diff --git a/www/src/components/shared/pullquote.js b/www/src/components/shared/pullquote.js
@@ -168,13 +168,19 @@ const Pullquote = ({ citation, narrow = false, children }) => {
     <PullquoteRoot narrow={narrow} className={className}>
       {children}
       {citation && <Citation>&mdash; {citation}</Citation>}
-      <QuotationMark
-        dangerouslySetInnerHTML={{ __html: QuotationMarkOrnament }}
-      />
+      <QuotationMark>
+        <QuotationMarkOrnament />
+      </QuotationMark>
       <div>
-        <Star dangerouslySetInnerHTML={{ __html: StarOrnament }} />
-        <Star dangerouslySetInnerHTML={{ __html: StarOrnament }} />
-        <Star dangerouslySetInnerHTML={{ __html: StarOrnament }} />
+        <Star>
+          <StarOrnament />
+        </Star>
+        <Star>
+          <StarOrnament />
+        </Star>
+        <Star>
+          <StarOrnament />
+        </Star>
       </div>
     </PullquoteRoot>
   )

diff --git a/www/src/components/showcase-details.js b/www/src/components/showcase-details.js
@@ -14,7 +14,7 @@ import Button from "./button"
 import Screenshot from "../views/shared/screenshot"
 import PageMetadata from "../components/site-metadata"
 
-import FeaturedIcon from "../assets/icons/featured-sites-icons"
+import { FeaturedSitesIcon } from "../assets/icons"
 import { MdArrowUpward, MdLink } from "react-icons/md"
 import { GoMarkGithub as GithubIcon } from "react-icons/go"
 import { filterByCategories } from "../views/showcase/filtered-showcase"
@@ -66,7 +66,7 @@ const Featured = () => (
         width: t => t.space[5],
       }}
     >
-      <FeaturedIcon />
+      <FeaturedSitesIcon />
     </span>
     {` `}
     Featured

diff --git a/www/src/pages/ecosystem.js b/www/src/pages/ecosystem.js
@@ -7,7 +7,6 @@ import PageMetadata from "../components/page-metadata"
 import FooterLinks from "../components/shared/footer-links"
 
 import { EcosystemIcon } from "../assets/icons"
-import { PluginsIcon, StartersIcon } from "../assets/icons/ecosystem-icons"
 
 class EcosystemPage extends Component {
   render() {
@@ -43,20 +42,15 @@ class EcosystemPage extends Component {
     const plugins = pluginsData
 
     const pageTitle = `Ecosystem`
-    const boardIcons = { plugins: PluginsIcon, starters: StartersIcon }
 
     return (
       <Layout
         location={location}
         pageTitle={pageTitle}
-        pageIcon={EcosystemIcon}
+        pageIcon={<EcosystemIcon />}
       >
         <PageMetadata title="Ecosystem" />
-        <EcosystemBoard
-          icons={boardIcons}
-          starters={starters}
-          plugins={plugins}
-        />
+        <EcosystemBoard starters={starters} plugins={plugins} />
         <FooterLinks />
       </Layout>
     )