@leafygreen-ui/icon 14.6.1 → 14.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/icon",
-  "version": "14.6.1",
+  "version": "14.7.0",
   "description": "LeafyGreen UI Kit Icons",
   "main": "./dist/umd/index.js",
   "module": "./dist/esm/index.js",
@@ -29,24 +29,25 @@
   },
   "dependencies": {
     "lodash": "^4.17.21",
+    "@leafygreen-ui/hooks": "^9.3.0",
     "@leafygreen-ui/emotion": "^5.1.0"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "15.1.0",
     "@svgr/core": "^5.3.1",
-    "@types/xml2json": "^0.11.0",
     "commander": "^11.0.0",
+    "fast-xml-parser": "^5.3.0",
     "fs-extra": "11.1.1",
     "p-queue": "^8.1.0",
     "rollup": "4.16.1",
-    "rollup-plugin-node-externals": "7.1.1",
     "ts-node": "^10.9.2",
+    "rollup-plugin-node-externals": "7.1.1",
     "xml2json": "^0.12.0",
     "@leafygreen-ui/lib": "^15.6.2",
-    "@lg-tools/build": "^0.8.3",
     "@leafygreen-ui/palette": "^5.0.2",
-    "@lg-tools/lint": "^3.1.0",
-    "@lg-tools/storybook-utils": "^0.3.3"
+    "@lg-tools/build": "^0.8.3",
+    "@lg-tools/storybook-utils": "^0.3.3",
+    "@lg-tools/lint": "^3.1.0"
   },
   "gitHead": "dd71a2d404218ccec2e657df9c0263dc1c15b9e0",
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/icon",

package/scripts/build/compare-checksum.ts

@@ -13,7 +13,8 @@ export function getAllIcons(): Array<string> {
   const iconNames = fsx
     .readdirSync(ICON_DIR)
     .filter(f => /\.tsx?$/.test(f))
-    .map(f => path.basename(f, path.extname(f)));
+    .map(f => path.basename(f, path.extname(f)))
+    .filter(name => name !== 'index'); // Exclude the index file
   return iconNames;
 }
 

package/scripts/prebuild/index.ts

@@ -7,7 +7,7 @@ import fs from 'fs';
 import path from 'path';
 
 import { getChecksum } from './checksum';
-import { indexTemplate } from './indexTemplate';
+import { generatedIndexTemplate, indexTemplate } from './indexTemplate';
 import { FileObject, PrebuildOptions } from './prebuild.types';
 import { svgrTemplate } from './svgrTemplate';
 
@@ -28,6 +28,7 @@ async function buildSvgFiles(options: PrebuildOptions): Promise<void> {
   options?.verbose && console.log('Processing SVG files...\n');
   await Promise.all(svgFiles.map(processFile));
   await createIndexFile(svgFiles, options);
+  await createGeneratedIndexFile(svgFiles, outputDir, options);
 }
 
 /**
@@ -91,6 +92,21 @@ async function createIndexFile(
   fs.writeFileSync(indexPath, formattedIndexContent, { encoding: 'utf8' });
 }
 
+/**
+ * Create the index file for the generated component exports
+ */
+async function createGeneratedIndexFile(
+  svgFiles: Array<FileObject>,
+  outputDir: string,
+  options?: PrebuildOptions,
+) {
+  const indexPath = path.resolve(outputDir, 'index.ts');
+  options?.verbose && console.log('Writing generated index file...', indexPath);
+  const indexContent = await generatedIndexTemplate(svgFiles);
+  const formattedIndexContent = await formatLG(indexContent, indexPath);
+  fs.writeFileSync(indexPath, formattedIndexContent, { encoding: 'utf8' });
+}
+
 /**
  * Annotate the generated file with script and checksum information
  */

package/scripts/prebuild/indexTemplate.ts

@@ -5,27 +5,31 @@ export async function indexTemplate(svgFiles: Array<FileObject>) {
     .map(({ name }) => `import ${name} from './${name}.svg';`)
     .join('\n');
 
-  const _glyphs = `{
-    ${svgFiles.map(({ name }) => `${name}`).join(',\n')}
-  }`;
+  const glyphsList = svgFiles.map(({ name }) => `${name}`).join(',\n    ');
 
   return `
-    import { createGlyphComponent } from '../createGlyphComponent';
-    import { LGGlyph } from '../types';
-
     // Glyphs
     ${imports}
 
-    const _glyphs = ${_glyphs} as const;
-
-    export type GlyphName = keyof typeof _glyphs;
-    
-    const glyphKeys = Object.keys(_glyphs) as Array<GlyphName>;
-    
-    export const glyphs = glyphKeys.reduce((acc, name) => {
-      acc[name] = createGlyphComponent(name, _glyphs[name]);
-    
-      return acc;
-    }, {} as Record<GlyphName, LGGlyph.Component>);
+    export const glyphs = {
+      ${glyphsList}
+    } as const;
+
+    export type GlyphName = keyof typeof glyphs;
   `;
 }
+
+export async function generatedIndexTemplate(svgFiles: Array<FileObject>) {
+  const exports = svgFiles
+    .map(({ name }) => `export { default as ${name} } from './${name}';`)
+    .join('\n');
+
+  return `/**
+ * This is a generated file. Do not modify it manually.
+ *
+ * @script packages/icon/scripts/prebuild/index.ts
+ */
+
+${exports}
+`;
+}

package/scripts/prebuild/svgrTemplate.ts

@@ -20,10 +20,12 @@ interface ASTParts extends Record<string, any> {
 }
 
 export function svgrTemplate(
-  { template }: BabelAPI,
-  { state: { componentName } }: SVGROptions,
+  api: BabelAPI,
+  opts: SVGROptions,
   { imports, jsx, exports }: ASTParts,
 ) {
+  const { template, types: t } = api;
+  const { componentName } = opts.state;
   const typeScriptTpl = template.smart({ plugins: ['jsx', 'typescript'] });
 
   const jsxAttributes = typeScriptTpl.ast`
@@ -48,9 +50,40 @@ export function svgrTemplate(
       jsx.openingElement.attributes[2],
     );
 
+  // Convert self-closing svg to have children
+  jsx.openingElement.selfClosing = false;
+
+  // Create closing element using Babel types
+  jsx.closingElement = t.jsxClosingElement(
+    t.jsxIdentifier(jsx.openingElement.name.name),
+  );
+
+  // Create the title element JSX manually using Babel types
+  // {title && <title id={titleId}>{title}</title>}
+  const titleJSXElement = t.jsxElement(
+    t.jsxOpeningElement(t.jsxIdentifier('title'), [
+      t.jsxAttribute(
+        t.jsxIdentifier('id'),
+        t.jsxExpressionContainer(t.identifier('titleId')),
+      ),
+    ]),
+    t.jsxClosingElement(t.jsxIdentifier('title')),
+    [t.jsxExpressionContainer(t.identifier('title'))],
+    false,
+  );
+
+  // Wrap title in conditional expression: {title && <title>...</title>}
+  const conditionalTitleExpression = t.jsxExpressionContainer(
+    t.logicalExpression('&&', t.identifier('title'), titleJSXElement),
+  );
+
+  // Add the conditional title as a child, followed by the original children
+  jsx.children = [conditionalTitleExpression, ...jsx.children];
+
   return typeScriptTpl(`
     %%imports%%
     import { css, cx } from '@leafygreen-ui/emotion';
+    import { useIdAllocator } from '@leafygreen-ui/hooks';
     import { generateAccessibleProps, sizeMap } from '../glyphCommon';
     import { LGGlyph } from '../types';
   
@@ -66,6 +99,7 @@ export function svgrTemplate(
       role = 'img',
       ...props
     }: ${componentName}Props) => {
+      const titleId = useIdAllocator({ prefix: 'icon-title' });
       const fillStyle = css\`
         color: \${fill};
       \`;
@@ -74,7 +108,7 @@ export function svgrTemplate(
         flex-shrink: 0;
       \`;
 
-      const accessibleProps = generateAccessibleProps(role, '${componentName}', { title, ['aria-label']: ariaLabel, ['aria-labelledby']: ariaLabelledby })
+      const accessibleProps = generateAccessibleProps(role, '${componentName}', { title, titleId, ['aria-label']: ariaLabel, ['aria-labelledby']: ariaLabelledby })
 
       return %%jsx%%;
     }

package/src/Icon.spec.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import { XMLParser } from 'fast-xml-parser';
 import fs from 'fs';
 import { axe } from 'jest-axe';
 import path from 'path';
-import { toJson } from 'xml2json';
 
 import { typeIs } from '@leafygreen-ui/lib';
 
@@ -29,9 +29,11 @@ const glyphPaths = fs
 const generatedFilesDirectory = path.resolve(__dirname, './generated');
 const baseNameToGeneratedFilePath: Record<string, string> = {};
 
-fs.readdirSync(generatedFilesDirectory).forEach(filePath => {
-  baseNameToGeneratedFilePath[getBaseName(filePath)] = filePath;
-});
+fs.readdirSync(generatedFilesDirectory)
+  .filter(filePath => /.*\.tsx$/.test(filePath))
+  .forEach(filePath => {
+    baseNameToGeneratedFilePath[getBaseName(filePath)] = filePath;
+  });
 
 const MyTestSVGRGlyph: SVGR.Component = props => (
   <svg data-testid="my-glyph" {...props}></svg>
@@ -106,8 +108,8 @@ describe('packages/Icon/glyphs/', () => {
         readonly [K in string]: string | SVGNodeObject;
       };
 
-      //@ts-expect-error
-      const rootGlyphObject: SVGNodeObject = toJson(svg, { object: true });
+      const parser = new XMLParser({ ignoreAttributes: false });
+      const rootGlyphObject: SVGNodeObject = parser.parse(svg);
 
       function validateGlyphObject(obj: SVGNodeObject) {
         Object.keys(obj).forEach(key => {
@@ -276,7 +278,7 @@ describe('Generated glyphs', () => {
   });
 
   describe('accessible props handled correctly', () => {
-    test('when no prop is supplied, aria-label is genereated', () => {
+    test('when no prop is supplied, aria-label is generated', () => {
       render(<EditIcon />);
       const editIcon = screen.getByRole('img');
       expect(editIcon.getAttribute('aria-label')).toBe('Edit Icon');
@@ -295,11 +297,32 @@ describe('Generated glyphs', () => {
       expect(editIcon.getAttribute('aria-labelledby')).toBe('Test label');
     });
 
-    test('when title is supplied it overrides default label', () => {
+    test('when title is supplied it renders a title element and aria-labelledby', () => {
       render(<EditIcon title="Test title" />);
       const editIcon = screen.getByRole('img');
       expect(editIcon.getAttribute('aria-label')).toBe(null);
-      expect(editIcon.getAttribute('title')).toBe('Test title');
+      // Should have aria-labelledby instead of title attribute
+      const ariaLabelledBy = editIcon.getAttribute('aria-labelledby');
+      expect(ariaLabelledBy).not.toBe(null);
+      // Should find a title element with matching ID containing the text
+      const titleElement = editIcon.querySelector('title');
+      expect(titleElement).not.toBe(null);
+      expect(titleElement?.textContent).toBe('Test title');
+      expect(titleElement?.id).toBe(ariaLabelledBy);
+    });
+
+    test('when both title and aria-labelledby are supplied they are combined', () => {
+      render(<EditIcon title="Test title" aria-labelledby="external-label" />);
+      const editIcon = screen.getByRole('img');
+      expect(editIcon.getAttribute('aria-label')).toBe(null);
+      const ariaLabelledBy = editIcon.getAttribute('aria-labelledby');
+      // Should contain both the title ID and the external label
+      expect(ariaLabelledBy).toContain('external-label');
+      const titleElement = editIcon.querySelector('title');
+      expect(titleElement).not.toBe(null);
+      expect(titleElement?.textContent).toBe('Test title');
+      // The aria-labelledby should reference both
+      expect(ariaLabelledBy).toBe(`${titleElement?.id} external-label`);
     });
 
     test('when role="presentation", aria-hidden is true', () => {

package/src/Icon.stories.tsx

@@ -17,7 +17,7 @@ const meta: StoryMetaType<typeof Icon> = {
   parameters: {
     default: 'LiveExample',
     controls: {
-      exclude: [...storybookExcludedControlParams, 'title', 'data-testid'],
+      exclude: [...storybookExcludedControlParams, 'data-testid'],
     },
   },
   args: {
@@ -33,6 +33,11 @@ const meta: StoryMetaType<typeof Icon> = {
     fill: {
       control: 'color',
     },
+    title: {
+      control: 'text',
+      description: 'The title of the icon for accessibility',
+      defaultValue: undefined,
+    },
   },
 };
 

package/src/Icon.tsx

@@ -1,5 +1,5 @@
 import { createIconComponent } from './createIconComponent';
-import { glyphs } from './glyphs';
+import * as glyphs from './generated';
 
 /**
  * The LeafyGreen system icons are a clear and concise set of glyphs designed to be minimal in form and express a variety of use-cases for all digital products.

package/src/createGlyphComponent.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
 
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 
 import { generateAccessibleProps, Size, sizeMap } from './glyphCommon';
 import { LGGlyph, SVGR } from './types';
 
+// This function will be updated and potentially deprecated in https://jira.mongodb.org/browse/LG-5680
 /**
  * Returns a single glyph component.
  * Process custom glyphs to ensure consistent behavior between custom and built-in icons
+ * This function is different from the `createIconComponent` function in that it returns a single glyph component instead of an icon component.
  * @param glyphName: string - the display name of the icon
  * @param Glyph: SVGR.Component - the SVG icon component
  * @returns LGGlyph.Component
@@ -26,6 +29,7 @@ export function createGlyphComponent(
     role = 'img',
     ...rest
   }: LGGlyph.ComponentProps) => {
+    const titleId = useIdAllocator({ prefix: 'icon-title' });
     const fillStyle = css`
       color: ${fill};
     `;
@@ -51,6 +55,7 @@ export function createGlyphComponent(
         role={role}
         {...generateAccessibleProps(role, glyphName, {
           title,
+          titleId,
           ['aria-label']: ariaLabel,
           ['aria-labelledby']: ariaLabelledby,
         })}

package/src/generated/AIModel.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1b3d40728665f27a2c0b6039f0387bf8
+* @checksum 6618e7834f98f848d25dff98c9e6585f
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface AIModelProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const AIModel = ({
   role = 'img',
   ...props
 }: AIModelProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const AIModel = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'AIModel', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M13.5625 5.30957V10.6895L8 13.4414L2.4375 10.6895V5.30957L8 2.55762L13.5625 5.30957Z" stroke={'currentColor'} /><path d="M8 2L8 14" stroke={'currentColor'} strokeWidth={0.5} /><path d="M3.09998 10.8594L12.5324 5.19998" stroke={'currentColor'} strokeWidth={0.5} strokeLinecap="round" /><path d="M3.19995 5.20001L12.6324 10.8595" stroke={'currentColor'} strokeWidth={0.5} strokeLinecap="round" /><circle cx={8} cy={2.75} r={1.75} fill={'currentColor'} /><circle cx={8} cy={2.75} r={1.75} stroke={'currentColor'} /><circle cx={8} cy={13.25} r={1.75} fill={'currentColor'} /><circle cx={8} cy={13.25} r={1.75} stroke={'currentColor'} /><circle cx={8} cy={8} r={1.75} fill={'currentColor'} /><circle cx={8} cy={8} r={1.75} stroke={'currentColor'} /><circle cx={13.25} cy={5} r={1.75} fill={'currentColor'} /><circle cx={13.25} cy={5} r={1.75} stroke={'currentColor'} /><circle cx={13.25} cy={10.75} r={1.75} fill={'currentColor'} /><circle cx={13.25} cy={10.75} r={1.75} stroke={'currentColor'} /><circle cx={2.75} cy={10.75} r={1.75} fill={'currentColor'} /><circle cx={2.75} cy={10.75} r={1.75} stroke={'currentColor'} /><circle cx={2.75} cy={5} r={1.75} fill={'currentColor'} /><circle cx={2.75} cy={5} r={1.75} stroke={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path fillRule="evenodd" clipRule="evenodd" d="M6.5 0C7.4665 0 8.25 0.783502 8.25 1.75C8.25 1.8343 8.24199 1.91693 8.23047 1.99805L9.85938 2.93848C10.1792 2.52019 10.6828 2.25 11.25 2.25C12.2165 2.25 13 3.0335 13 4C13 4.81198 12.4462 5.49188 11.6963 5.68945V8.05957C12.4463 8.25706 13 8.93793 13 9.75C13 10.7165 12.2165 11.5 11.25 11.5C10.7615 11.5 10.3204 11.2993 10.0029 10.9766L8.23047 12C8.24217 12.0817 8.25 12.165 8.25 12.25C8.25 13.2165 7.4665 14 6.5 14C5.5335 14 4.75 13.2165 4.75 12.25C4.75 12.1651 4.75686 12.0817 4.76855 12L2.99609 10.9766C2.67867 11.299 2.23822 11.5 1.75 11.5C0.783502 11.5 0 10.7165 0 9.75C0 8.93793 0.553657 8.25706 1.30371 8.05957V5.68945C0.553779 5.49188 0 4.81198 0 4C0 3.0335 0.783502 2.25 1.75 2.25C2.31696 2.25 2.81985 2.52046 3.13965 2.93848L4.76855 1.99805C4.75704 1.91697 4.75 1.83426 4.75 1.75C4.75 0.783502 5.5335 0 6.5 0ZM3.36914 9.08789C3.4528 9.29225 3.5 9.51552 3.5 9.75C3.5 9.86702 3.48773 9.98121 3.46582 10.0918L5.19238 11.0889C5.46062 10.787 5.83101 10.5795 6.25 10.5195V8.72949C5.78109 8.66231 5.37343 8.41073 5.10156 8.04883L3.36914 9.08789ZM7.80957 8.15723C7.54115 8.46075 7.17039 8.66926 6.75 8.72949V10.5195C7.16876 10.5795 7.53844 10.7873 7.80664 11.0889L9.5332 10.0918C9.51132 9.98126 9.5 9.86696 9.5 9.75C9.5 9.56512 9.5289 9.38701 9.58203 9.21973L7.80957 8.15723ZM8.08301 6.25879C8.1887 6.48413 8.25 6.73464 8.25 7C8.25 7.26458 8.1891 7.51442 8.08398 7.73926L9.7998 8.76855C10.0134 8.45352 10.3282 8.21359 10.6963 8.09082V5.6582C10.3976 5.5585 10.1352 5.38146 9.93262 5.14941L8.08301 6.25879ZM2.96973 5.25293C2.78312 5.43462 2.55638 5.57387 2.30371 5.6582V8.09082C2.62655 8.19851 2.9069 8.39729 3.11523 8.65723L4.86133 7.60938C4.79065 7.4194 4.75 7.21459 4.75 7C4.75 6.78476 4.79025 6.57912 4.86133 6.38867L2.96973 5.25293ZM3.49414 3.88867C3.49646 3.92553 3.5 3.96255 3.5 4C3.5 4.31053 3.41821 4.60166 3.27637 4.85449L5.10156 5.94922C5.37346 5.58794 5.78157 5.3366 6.25 5.26953V3.47949C5.83011 3.41934 5.45878 3.21212 5.19043 2.90918L3.49414 3.88867ZM7.80762 2.90918C7.53934 3.21159 7.16944 3.4194 6.75 3.47949V5.26953C7.16972 5.32963 7.54025 5.53811 7.80859 5.84082L9.66016 4.72949C9.55804 4.5073 9.5 4.26055 9.5 4C9.5 3.96258 9.50257 3.92551 9.50488 3.88867L7.80762 2.90918Z" fill={'currentColor'} /></svg>;
 };
 AIModel.displayName = 'AIModel';
 AIModel.isGlyph = true;

package/src/generated/ActivityFeed.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 260808bc7119d3af4c161e80ea57a6c5
+* @checksum 77e7639d3019eed3006460e66ce660d8
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ActivityFeedProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const ActivityFeed = ({
   role = 'img',
   ...props
 }: ActivityFeedProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const ActivityFeed = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'ActivityFeed', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M1 13V7H5.5C6.32843 7 7 6.32843 7 5.5V1H9C10.1046 1 11 1.89543 11 3V7.51491C10.9701 7.51164 10.9401 7.50889 10.9099 7.50668C9.80561 7.42578 8.77964 8.08094 8.38847 9.11682L7.32818 11.9246C6.27375 12.2181 5.5 13.1854 5.5 14.3333C5.5 14.5642 5.53129 14.7878 5.58987 15H3C1.89543 15 1 14.1046 1 13ZM4.91421 1H5.83333V4.83333C5.83333 5.38562 5.38562 5.83333 4.83333 5.83333H1V4.91421C1 4.649 1.10536 4.39464 1.29289 4.20711L2.5 3L4.20711 1.29289C4.39464 1.10536 4.649 1 4.91421 1Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M10.8003 9.00268C11.2421 9.03504 11.6099 9.35411 11.7043 9.78684L12.3135 12.5789L12.8215 11.8647C13.0091 11.601 13.3128 11.4444 13.6364 11.4444H15C15.5523 11.4444 16 11.8922 16 12.4444C16 12.9967 15.5523 13.4444 15 13.4444H14.1522L12.633 15.5797C12.4036 15.9022 12.0055 16.059 11.6178 15.9797C11.23 15.9004 10.9255 15.5999 10.8412 15.2132L10.47 13.512L10.0264 14.6866C9.87947 15.0758 9.50691 15.3333 9.09091 15.3333H8C7.44772 15.3333 7 14.8856 7 14.3333C7 13.7811 7.44772 13.3333 8 13.3333H8.39961L9.79175 9.64673C9.94822 9.23238 10.3586 8.97032 10.8003 9.00268Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path fillRule="evenodd" clipRule="evenodd" d="M1 13V7H5.5C6.32843 7 7 6.32843 7 5.5V1H9C10.1046 1 11 1.89543 11 3V7.51491C10.9701 7.51164 10.9401 7.50889 10.9099 7.50668C9.80561 7.42578 8.77964 8.08094 8.38847 9.11682L7.32818 11.9246C6.27375 12.2181 5.5 13.1854 5.5 14.3333C5.5 14.5642 5.53129 14.7878 5.58987 15H3C1.89543 15 1 14.1046 1 13ZM4.91421 1H5.83333V4.83333C5.83333 5.38562 5.38562 5.83333 4.83333 5.83333H1V4.91421C1 4.649 1.10536 4.39464 1.29289 4.20711L2.5 3L4.20711 1.29289C4.39464 1.10536 4.649 1 4.91421 1Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M10.8003 9.00268C11.2421 9.03504 11.6099 9.35411 11.7043 9.78684L12.3135 12.5789L12.8215 11.8647C13.0091 11.601 13.3128 11.4444 13.6364 11.4444H15C15.5523 11.4444 16 11.8922 16 12.4444C16 12.9967 15.5523 13.4444 15 13.4444H14.1522L12.633 15.5797C12.4036 15.9022 12.0055 16.059 11.6178 15.9797C11.23 15.9004 10.9255 15.5999 10.8412 15.2132L10.47 13.512L10.0264 14.6866C9.87947 15.0758 9.50691 15.3333 9.09091 15.3333H8C7.44772 15.3333 7 14.8856 7 14.3333C7 13.7811 7.44772 13.3333 8 13.3333H8.39961L9.79175 9.64673C9.94822 9.23238 10.3586 8.97032 10.8003 9.00268Z" fill={'currentColor'} /></svg>;
 };
 ActivityFeed.displayName = 'ActivityFeed';
 ActivityFeed.isGlyph = true;

package/src/generated/AddFile.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum cc1e1cbb6d61f3388205f4e843e3e712
+* @checksum 9d241bdb9a9755e69b14c65c5ada7b83
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface AddFileProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const AddFile = ({
   role = 'img',
   ...props
 }: AddFileProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const AddFile = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'AddFile', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M1 7V13C1 14.1046 1.89543 15 3 15H8.9682C8.24461 14.6259 7.75 13.8707 7.75 13C7.75 11.8376 8.63145 10.8811 9.7624 10.7624C9.84441 9.98094 10.3264 9.31861 11 8.98388V3C11 1.89543 10.1046 1 9 1H7V5.5C7 6.32843 6.32843 7 5.5 7H1ZM9 13C9 13.5523 9.44772 14 10 14H10.7324H11V15C11 15.5523 11.4477 16 12 16C12.5523 16 13 15.5523 13 15V14H14C14.5523 14 15 13.5523 15 13C15 12.4477 14.5523 12 14 12H13V11C13 10.4477 12.5523 10 12 10C11.4477 10 11 10.4477 11 11V12H10C9.44772 12 9 12.4477 9 13ZM5.83333 1H4.91421C4.649 1 4.39464 1.10536 4.20711 1.29289L2.5 3L1.29289 4.20711C1.10536 4.39464 1 4.649 1 4.91421V5.83333H4.83333C5.38562 5.83333 5.83333 5.38562 5.83333 4.83333V1Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path fillRule="evenodd" clipRule="evenodd" d="M1 7V13C1 14.1046 1.89543 15 3 15H8.9682C8.24461 14.6259 7.75 13.8707 7.75 13C7.75 11.8376 8.63145 10.8811 9.7624 10.7624C9.84441 9.98094 10.3264 9.31861 11 8.98388V3C11 1.89543 10.1046 1 9 1H7V5.5C7 6.32843 6.32843 7 5.5 7H1ZM9 13C9 13.5523 9.44772 14 10 14H10.7324H11V15C11 15.5523 11.4477 16 12 16C12.5523 16 13 15.5523 13 15V14H14C14.5523 14 15 13.5523 15 13C15 12.4477 14.5523 12 14 12H13V11C13 10.4477 12.5523 10 12 10C11.4477 10 11 10.4477 11 11V12H10C9.44772 12 9 12.4477 9 13ZM5.83333 1H4.91421C4.649 1 4.39464 1.10536 4.20711 1.29289L2.5 3L1.29289 4.20711C1.10536 4.39464 1 4.649 1 4.91421V5.83333H4.83333C5.38562 5.83333 5.83333 5.38562 5.83333 4.83333V1Z" fill={'currentColor'} /></svg>;
 };
 AddFile.displayName = 'AddFile';
 AddFile.isGlyph = true;

package/src/generated/AllProducts.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5c37a6bef3cb4644287c2c3f068f875a
+* @checksum 6e02f67e866a650b89700f27b7d227a8
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface AllProductsProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const AllProducts = ({
   role = 'img',
   ...props
 }: AllProductsProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const AllProducts = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'AllProducts', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M2.5 3.5C2.5 2.94772 2.94772 2.5 3.5 2.5H4.5C5.05228 2.5 5.5 2.94772 5.5 3.5V4.5C5.5 5.05228 5.05228 5.5 4.5 5.5H3.5C2.94772 5.5 2.5 5.05228 2.5 4.5V3.5Z" fill={'currentColor'} /><path d="M6.5 3.5C6.5 2.94772 6.94772 2.5 7.5 2.5H8.5C9.05228 2.5 9.5 2.94772 9.5 3.5V4.5C9.5 5.05228 9.05228 5.5 8.5 5.5H7.5C6.94772 5.5 6.5 5.05228 6.5 4.5V3.5Z" fill={'currentColor'} /><path d="M11.5 2.5C10.9477 2.5 10.5 2.94772 10.5 3.5V4.5C10.5 5.05228 10.9477 5.5 11.5 5.5H12.5C13.0523 5.5 13.5 5.05228 13.5 4.5V3.5C13.5 2.94772 13.0523 2.5 12.5 2.5H11.5Z" fill={'currentColor'} /><path d="M2.5 7.5C2.5 6.94772 2.94772 6.5 3.5 6.5H4.5C5.05228 6.5 5.5 6.94772 5.5 7.5V8.5C5.5 9.05228 5.05228 9.5 4.5 9.5H3.5C2.94772 9.5 2.5 9.05228 2.5 8.5V7.5Z" fill={'currentColor'} /><path d="M7.5 6.5C6.94772 6.5 6.5 6.94772 6.5 7.5V8.5C6.5 9.05228 6.94772 9.5 7.5 9.5H8.5C9.05228 9.5 9.5 9.05228 9.5 8.5V7.5C9.5 6.94772 9.05228 6.5 8.5 6.5H7.5Z" fill={'currentColor'} /><path d="M10.5 7.5C10.5 6.94772 10.9477 6.5 11.5 6.5H12.5C13.0523 6.5 13.5 6.94772 13.5 7.5V8.5C13.5 9.05228 13.0523 9.5 12.5 9.5H11.5C10.9477 9.5 10.5 9.05228 10.5 8.5V7.5Z" fill={'currentColor'} /><path d="M3.5 10.5C2.94772 10.5 2.5 10.9477 2.5 11.5V12.5C2.5 13.0523 2.94772 13.5 3.5 13.5H4.5C5.05228 13.5 5.5 13.0523 5.5 12.5V11.5C5.5 10.9477 5.05228 10.5 4.5 10.5H3.5Z" fill={'currentColor'} /><path d="M6.5 11.5C6.5 10.9477 6.94772 10.5 7.5 10.5H8.5C9.05228 10.5 9.5 10.9477 9.5 11.5V12.5C9.5 13.0523 9.05228 13.5 8.5 13.5H7.5C6.94772 13.5 6.5 13.0523 6.5 12.5V11.5Z" fill={'currentColor'} /><path d="M11.5 10.5C10.9477 10.5 10.5 10.9477 10.5 11.5V12.5C10.5 13.0523 10.9477 13.5 11.5 13.5H12.5C13.0523 13.5 13.5 13.0523 13.5 12.5V11.5C13.5 10.9477 13.0523 10.5 12.5 10.5H11.5Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path d="M2.5 3.5C2.5 2.94772 2.94772 2.5 3.5 2.5H4.5C5.05228 2.5 5.5 2.94772 5.5 3.5V4.5C5.5 5.05228 5.05228 5.5 4.5 5.5H3.5C2.94772 5.5 2.5 5.05228 2.5 4.5V3.5Z" fill={'currentColor'} /><path d="M6.5 3.5C6.5 2.94772 6.94772 2.5 7.5 2.5H8.5C9.05228 2.5 9.5 2.94772 9.5 3.5V4.5C9.5 5.05228 9.05228 5.5 8.5 5.5H7.5C6.94772 5.5 6.5 5.05228 6.5 4.5V3.5Z" fill={'currentColor'} /><path d="M11.5 2.5C10.9477 2.5 10.5 2.94772 10.5 3.5V4.5C10.5 5.05228 10.9477 5.5 11.5 5.5H12.5C13.0523 5.5 13.5 5.05228 13.5 4.5V3.5C13.5 2.94772 13.0523 2.5 12.5 2.5H11.5Z" fill={'currentColor'} /><path d="M2.5 7.5C2.5 6.94772 2.94772 6.5 3.5 6.5H4.5C5.05228 6.5 5.5 6.94772 5.5 7.5V8.5C5.5 9.05228 5.05228 9.5 4.5 9.5H3.5C2.94772 9.5 2.5 9.05228 2.5 8.5V7.5Z" fill={'currentColor'} /><path d="M7.5 6.5C6.94772 6.5 6.5 6.94772 6.5 7.5V8.5C6.5 9.05228 6.94772 9.5 7.5 9.5H8.5C9.05228 9.5 9.5 9.05228 9.5 8.5V7.5C9.5 6.94772 9.05228 6.5 8.5 6.5H7.5Z" fill={'currentColor'} /><path d="M10.5 7.5C10.5 6.94772 10.9477 6.5 11.5 6.5H12.5C13.0523 6.5 13.5 6.94772 13.5 7.5V8.5C13.5 9.05228 13.0523 9.5 12.5 9.5H11.5C10.9477 9.5 10.5 9.05228 10.5 8.5V7.5Z" fill={'currentColor'} /><path d="M3.5 10.5C2.94772 10.5 2.5 10.9477 2.5 11.5V12.5C2.5 13.0523 2.94772 13.5 3.5 13.5H4.5C5.05228 13.5 5.5 13.0523 5.5 12.5V11.5C5.5 10.9477 5.05228 10.5 4.5 10.5H3.5Z" fill={'currentColor'} /><path d="M6.5 11.5C6.5 10.9477 6.94772 10.5 7.5 10.5H8.5C9.05228 10.5 9.5 10.9477 9.5 11.5V12.5C9.5 13.0523 9.05228 13.5 8.5 13.5H7.5C6.94772 13.5 6.5 13.0523 6.5 12.5V11.5Z" fill={'currentColor'} /><path d="M11.5 10.5C10.9477 10.5 10.5 10.9477 10.5 11.5V12.5C10.5 13.0523 10.9477 13.5 11.5 13.5H12.5C13.0523 13.5 13.5 13.0523 13.5 12.5V11.5C13.5 10.9477 13.0523 10.5 12.5 10.5H11.5Z" fill={'currentColor'} /></svg>;
 };
 AllProducts.displayName = 'AllProducts';
 AllProducts.isGlyph = true;

package/src/generated/AnalyticsNode.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9805552df6dff2c768c44ca81aa213c4
+* @checksum 265c75036a8bcdb40d1268c94fe4769f
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface AnalyticsNodeProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const AnalyticsNode = ({
   role = 'img',
   ...props
 }: AnalyticsNodeProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const AnalyticsNode = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'AnalyticsNode', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M4.23999 11.1535L7.27999 4.05352H8.71999L11.76 11.1535H10.1L9.46999 9.65352H6.52999L5.89999 11.1535H4.23999ZM7.10999 8.27352H8.88999L7.99999 6.13352L7.10999 8.27352Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5ZM8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path d="M4.23999 11.1535L7.27999 4.05352H8.71999L11.76 11.1535H10.1L9.46999 9.65352H6.52999L5.89999 11.1535H4.23999ZM7.10999 8.27352H8.88999L7.99999 6.13352L7.10999 8.27352Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5ZM8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15Z" fill={'currentColor'} /></svg>;
 };
 AnalyticsNode.displayName = 'AnalyticsNode';
 AnalyticsNode.isGlyph = true;

package/src/generated/Apps.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 425e40d61dd5d93e2cee0b03900ae595
+* @checksum fd4b5e6ffb82c2ae671db1db31d737fc
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface AppsProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Apps = ({
   role = 'img',
   ...props
 }: AppsProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Apps = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Apps', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M7 3H3V7H7V3ZM7 9H3V13H7V9ZM9 3H13V7H9V3ZM13 9H9V13H13V9Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path fillRule="evenodd" clipRule="evenodd" d="M7 3H3V7H7V3ZM7 9H3V13H7V9ZM9 3H13V7H9V3ZM13 9H9V13H13V9Z" fill={'currentColor'} /></svg>;
 };
 Apps.displayName = 'Apps';
 Apps.isGlyph = true;

package/src/generated/Array.tsx

@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b3bf0a50a840b53f371336851204c2a5
+* @checksum c6b9e3f17644ba370dbfbed5e69eaf1c
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ArrayProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Array = ({
   role = 'img',
   ...props
 }: ArrayProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Array = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Array', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   return <svg className={cx({
     [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M2.5 1C2.22386 1 2 1.22386 2 1.5V14.5C2 14.7761 2.22386 15 2.5 15H6.5C6.77614 15 7 14.7761 7 14.5V13.5C7 13.2239 6.77614 13 6.5 13H4V3H6.5C6.77614 3 7 2.77614 7 2.5V1.5C7 1.22386 6.77614 1 6.5 1H2.5Z" fill={'currentColor'} /><path d="M13.5 1C13.7761 1 14 1.22386 14 1.5V14.5C14 14.7761 13.7761 15 13.5 15H9.5C9.22386 15 9 14.7761 9 14.5V13.5C9 13.2239 9.22386 13 9.5 13H12V3H9.5C9.22386 3 9 2.77614 9 2.5V1.5C9 1.22386 9.22386 1 9.5 1H13.5Z" fill={'currentColor'} /></svg>;
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16">{title && <title id={titleId}>{title}</title>}<path d="M2.5 1C2.22386 1 2 1.22386 2 1.5V14.5C2 14.7761 2.22386 15 2.5 15H6.5C6.77614 15 7 14.7761 7 14.5V13.5C7 13.2239 6.77614 13 6.5 13H4V3H6.5C6.77614 3 7 2.77614 7 2.5V1.5C7 1.22386 6.77614 1 6.5 1H2.5Z" fill={'currentColor'} /><path d="M13.5 1C13.7761 1 14 1.22386 14 1.5V14.5C14 14.7761 13.7761 15 13.5 15H9.5C9.22386 15 9 14.7761 9 14.5V13.5C9 13.2239 9.22386 13 9.5 13H12V3H9.5C9.22386 3 9 2.77614 9 2.5V1.5C9 1.22386 9.22386 1 9.5 1H13.5Z" fill={'currentColor'} /></svg>;
 };
 Array.displayName = 'Array';
 Array.isGlyph = true;