import layer icons directly (#25488)

Author: tesseralis

www/src/assets/icons/layer-icon.js

@@ -0,0 +1,5 @@
+export { default as AbstractSymbol } from "./abstract-symbol.svg"
+export { default as AtomicSymbol } from "./atomic-symbol.svg"
+export { default as GraphqlLogo } from "./graphql-logo.svg"
+export { default as ReactLogo } from "./react-logo.svg"
+export { default as AppWindow } from "./app-window.svg"

www/src/assets/icons/layer-icons.js

@@ -8,35 +8,42 @@ import {
   ViewLayerContent,
   AppLayerContent,
 } from "./component-content-sections"
+import {
+  AbstractSymbol,
+  AtomicSymbol,
+  GraphqlLogo,
+  ReactLogo,
+  AppWindow,
+} from "../../../assets/icons/layer-icons"
 
 const layers = [
   {
     title: `Content`,
-    icon: `AbstractSymbol`,
+    icon: <AbstractSymbol />,
     baseColor: `orange`,
     component: ContentLayerContent,
   },
   {
     title: `Build`,
-    icon: `AtomicSymbol`,
+    icon: <AtomicSymbol />,
     baseColor: `green`,
     component: BuildLayerContent,
   },
   {
     title: `Data`,
-    icon: `GraphqlLogo`,
+    icon: <GraphqlLogo />,
     baseColor: `magenta`,
     component: DataLayerContent,
   },
   {
     title: `View`,
-    icon: `ReactLogo`,
+    icon: <ReactLogo />,
     baseColor: `blue`,
     component: ViewLayerContent,
   },
   {
     title: `App`,
-    icon: `AppWindow`,
+    icon: <AppWindow />,
     baseColor: `yellow`,
     component: AppLayerContent,
   },

www/src/components/layer-model/component-model/index.js

@@ -7,29 +7,35 @@ import {
   QueryLayerContent,
   DisplayLayerContent,
 } from "./image-content-sections"
+import {
+  AbstractSymbol,
+  AtomicSymbol,
+  GraphqlLogo,
+  ReactLogo,
+} from "../../../assets/icons/layer-icons"
 
 const layers = [
   {
     title: `Install`,
-    icon: `AbstractSymbol`,
+    icon: <AbstractSymbol />,
     baseColor: `orange`,
     component: InstallLayerContent,
   },
   {
     title: `Config`,
-    icon: `AtomicSymbol`,
+    icon: <AtomicSymbol />,
     baseColor: `green`,
     component: ConfigLayerContent,
   },
   {
     title: `Query`,
-    icon: `GraphqlLogo`,
+    icon: <GraphqlLogo />,
     baseColor: `magenta`,
     component: QueryLayerContent,
   },
   {
     title: `Display`,
-    icon: `ReactLogo`,
+    icon: <ReactLogo />,
     baseColor: `blue`,
     component: DisplayLayerContent,
   },

www/src/components/layer-model/image-model/index.js

@@ -4,7 +4,6 @@ import React, { useState, useEffect, useRef } from "react"
 import hex2rgba from "hex2rgba"
 
 import { colors } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
-import LayerIcon from "../../assets/icons/layer-icon"
 
 const Layer = ({ buttonRef, layer, onClick, selected, index }) => {
   const { baseColor, title, icon } = layer
@@ -51,7 +50,7 @@ const Layer = ({ buttonRef, layer, onClick, selected, index }) => {
             color: selected ? colors[baseColor][70] : colors.grey[50],
           }}
         >
-          <LayerIcon name={icon} />
+          {icon}
         </span>
         <span>{title}</span>
       </span>