From bee69e10676a247fb6737dea00c2ba90a24cd25d Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 9 Aug 2021 16:22:01 -0400
Subject: [PATCH] fix(Icons): add additional logic to handle glyph-only icons

---
 src/components/SVGLibraries/shared/ActionBar.js | 13 ++++++++++---
 src/components/SVGLibraries/shared/SvgCard.js   |  2 ++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/SVGLibraries/shared/ActionBar.js b/src/components/SVGLibraries/shared/ActionBar.js
index a54adf6a2e9..ed874c8d580 100644
--- a/src/components/SVGLibraries/shared/ActionBar.js
+++ b/src/components/SVGLibraries/shared/ActionBar.js
@@ -15,11 +15,18 @@ const ActionBar = ({
   setIsActionBarVisible,
   isActionBarVisible,
   isLastCard,
+  glyphOnly,
 }) => {
   const { site, type } = useContext(LibraryContext);
-  const component = `<${
-    pascalCase(friendlyName) + (type === 'pictogram' ? '' : '32')
-  } />`;
+  let suffix;
+  if (type === 'pictogram') {
+    suffix = '';
+  } else if (glyphOnly) {
+    suffix = 'Glyph';
+  } else {
+    suffix = '32';
+  }
+  const component = `<${pascalCase(friendlyName) + suffix} />`;
   const [copyText, setCopyText] = useState(`Copy ${component}`);
   const actionBarRef = useRef();
 
diff --git a/src/components/SVGLibraries/shared/SvgCard.js b/src/components/SVGLibraries/shared/SvgCard.js
index 61a6f454f0d..48f6fe26986 100644
--- a/src/components/SVGLibraries/shared/SvgCard.js
+++ b/src/components/SVGLibraries/shared/SvgCard.js
@@ -15,6 +15,7 @@ const SvgCard = ({ icon, containerIsVisible, isLastCard, ...rest }) => {
   const [isActionBarVisible, setIsActionBarVisible] = useState(false);
 
   let { source } = assets[0];
+  const glyphOnly = assets[0].size === 'glyph' && assets.length <= 1;
 
   if (assets.length > 1) {
     source = assets.find(({ size }) => size === 32).source;
@@ -49,6 +50,7 @@ const SvgCard = ({ icon, containerIsVisible, isLastCard, ...rest }) => {
               friendlyName={friendlyName}
               isActionBarVisible={isActionBarVisible}
               setIsActionBarVisible={setIsActionBarVisible}
+              glyphOnly={glyphOnly}
             />
           </>
         )}