fix(Icons): add additional logic to handle glyph-only icons (#2488)

Co-authored-by: Andrea N. Cardona <andreancardona@gmail.com>
carbon-design-system · Aug 23, 2021 · 971c234 · 971c234 · vercel · Aug 23, 2021
1 parent 441b45b
commit 971c234
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git 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
@@ -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}
             />
           </>
         )}