query and use svgs located inside each product folder for nav left svg icon

Author: ganchimeg

gatsby-config.js

@@ -57,10 +57,6 @@ products.forEach(name => {
   productIcons[name] = require(getProduct(name)).pathD
 })
 
-if (docsConfig.productLogoPathD && docsConfig.productIconKey) {
-  return Error("Set either `productLogoPathD` or `productIconKey` in docs-config.js, not both")
-}
-
 if (docsConfig.productIconKey) {
   docsConfig.productLogoPathD = productIcons[docsConfig.productIconKey]
 }

src/components/docs-product-logo.js

@@ -1,13 +1,13 @@
 import React from "react"
 import getCloudflareDocsConfig from "../utils/get-cloudflare-docs-config"
-import AccessibleSVG from "./accessible-svg"
+import getUniqueReadableID from "../utils/get-unique-readable-id"
+
+const titleID = getUniqueReadableID("title")
 
 export default () => {
-  const { product, productLogoPathD }  = getCloudflareDocsConfig()
+  const { product,  productIconKey,  logoSVGContent}  = getCloudflareDocsConfig()
 
   return (
-    <AccessibleSVG title={`Cloudflare ${product} logo`} viewBox="0 0 48 48">
-      <path d={productLogoPathD}/>
-    </AccessibleSVG>
+    <span id={titleID} title={`Cloudflare ${productIconKey} logo`} dangerouslySetInnerHTML={{__html: logoSVGContent}} />
   )
 }

src/css/docs/components/docs-nav-logo-lockup.css

@@ -18,6 +18,15 @@
   flex-shrink: 0;
 }
 
+[theme="light"] .DocsNavLogoLockup--logo {
+  fill: var(--orange);
+}
+
+[theme="dark"] .DocsNavLogoLockup--logo {
+  fill: var(--orange);
+}
+
+
 .DocsNavLogoLockup--text {
   font-size: var(--font-size, 1em);
   font-weight: 700;

src/utils/get-cloudflare-docs-config.js

@@ -19,6 +19,8 @@ export default () => {
               pathPrefix
               product
               productLogoPathD
+              productIconKey
+              logoSVGContent
               contentRepo
               contentRepoFolder
               externalLinks {