feat(icons): add prefix to context

launchdarkly · Jul 20, 2023 · cbe81a8 · cbe81a8
1 parent 8138782
commit cbe81a8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/packages/icons/src/Icon.tsx b/packages/icons/src/Icon.tsx
@@ -34,13 +34,13 @@ const Icon = ({
 }: IconProps) => {
   const sizeClass = size ? styles[size] : false;
   const classes = cx(styles.icon, sizeClass, subtle && styles.subtle, `icon-${name}`, className);
-  const prefix = `svg-${useId()}`;
+  const uniqueId = `svg-${useId()}`;
   const isAriaHidden = ariaHidden ?? (!ariaLabelledBy && !ariaLabel);
-  const titleId = title && `${prefix}-${name}-title`;
-  const descriptionId = description && `${prefix}-${name}-description`;
+  const titleId = title && `${uniqueId}-${name}-title`;
+  const descriptionId = description && `${uniqueId}-${name}-description`;
 
-  const { path: contextPath } = useContext(IconContext);
-  const iconId = `lp-icon-${name}`;
+  const { path: contextPath, prefix } = useContext(IconContext);
+  const iconPrefix = prefix === undefined ? 'lp-icon-' : prefix;
   const spritePath = contextPath === undefined ? '/static/sprite.svg' : contextPath;
 
   return (
@@ -56,7 +56,7 @@ const Icon = ({
       >
         {title && <title id={titleId}>{title}</title>}
         {description && <desc id={descriptionId}>{description}</desc>}
-        <use href={`${spritePath}#${iconId}`} />
+        <use href={`${spritePath}#${iconPrefix}${name}`} />
       </svg>
     </span>
   );

diff --git a/packages/icons/src/context.ts b/packages/icons/src/context.ts
@@ -2,9 +2,10 @@ import { createContext } from 'react';
 
 type IconContextState = {
   path?: string;
+  prefix?: string;
 };
 
-const IconContext = createContext<IconContextState>({ path: undefined });
+const IconContext = createContext<IconContextState>({ path: undefined, prefix: undefined });
 
 export { IconContext };
 export type { IconContextState };