907 accept additional props for labeling icons

lib/octicons_react/.gitignore

@@ -2,3 +2,4 @@
 .next
 dist/
 src/__generated__/
+.tool-versions

lib/octicons_react/README.md

@@ -62,6 +62,70 @@ export default () => (
 )
 ```
 
+### `aria-labelledby`
+
+You have the option of adding accessibility information to the icon with the
+[`aria-labelledby` attribute][aria-labelledby] via the `aria-labelledby` prop. Using aria-labelledby referencing the id values of the title element provides the accessible name.
+
+```js
+// Example usage
+import {PlusIcon} from '@primer/octicons-react'
+
+export default () => (
+  <button>
+    <PlusIcon aria-labelledby="title" title="Add new item" /> New
+  </button>
+)
+```
+
+### `title`
+
+You have the option of adding accessibility information to the icon with the
+[`title` attribute][title] via the `title` prop.
+
+```js
+// Example usage
+import {PlusIcon} from '@primer/octicons-react'
+
+export default () => (
+  <button>
+    <PlusIcon title="Add new item" /> New
+  </button>
+)
+```
+
+### `ref`
+
+You have the option of adding information to the icon with the
+[`ref` attribute][ref] via the `ref` prop.
+
+```js
+// Example usage
+import {PlusIcon} from '@primer/octicons-react'
+
+export default () => (
+  <button>
+    <PlusIcon ref="Add new item" /> New
+  </button>
+)
+```
+
+### `id`
+
+You have the option of adding information to the icon with the
+[`id` attribute][id] via the `id` prop.
+
+```js
+// Example usage
+import {PlusIcon} from '@primer/octicons-react'
+
+export default () => (
+  <button>
+    <PlusIcon id="unique-plus-icon" /> New
+  </button>
+)
+```
+
 ### `tabIndex`
 
 You can add the `tabindex` attribute to an SVG element via the `tabIndex` prop if the SVG element is intended to be interactive.
@@ -124,6 +188,7 @@ export default () => (
 ### `Octicon` (DEPRECATED)
 
 > ⚠️ The `Octicon` component is deprecated. Use icon components on their own instead:
+
 ```diff
 - <Octicon icon={AlertIcon} />
 + <AlertIcon />

lib/octicons_react/src/createIconComponent.js

@@ -12,24 +12,31 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
 
   function Icon({
     'aria-label': ariaLabel,
+    'aria-labelledby': arialabelledby,
     tabIndex,
     className = defaultClassName,
     fill = 'currentColor',
     size = 16,
+    ref,
+    id,
+    title,
     verticalAlign = 'text-bottom'
   }) {
     const height = sizeMap[size] || size
     const naturalHeight = closestNaturalHeight(heights, height)
     const naturalWidth = svgDataByHeight[naturalHeight].width
     const width = height * (naturalWidth / naturalHeight)
     const path = svgDataByHeight[naturalHeight].path
+    const svgProps = {...(id ? {id} : {}), ...(ref ? {ref} : {})}
 
     return (
       <svg
         aria-hidden={ariaLabel ? 'false' : 'true'}
         tabIndex={tabIndex}
+        ref={ref}
         focusable={tabIndex >= 0 ? 'true' : 'false'}
         aria-label={ariaLabel}
+        aria-labelledby={arialabelledby}
         role="img"
         className={className}
         viewBox={`0 0 ${naturalWidth} ${naturalHeight}`}
@@ -42,7 +49,9 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
           verticalAlign,
           overflow: 'visible'
         }}
+        {...svgProps}
       >
+        {title ? <title>{title}</title> : null}
         {path}
       </svg>
     )

lib/octicons_react/src/index.d.ts

@@ -1,16 +1,21 @@
+// eslint-disable-next-line import/no-namespace
 import * as React from 'react'
 
-import {Icon} from './__generated__/icons'
+// eslint-disable-next-line prettier/prettier
+import { Icon } from './__generated__/icons'
 
 type Size = 'small' | 'medium' | 'large'
 
 export interface OcticonProps {
   'aria-label'?: string
+  'aria-labelledby'?: string
   tabIndex?: number
   children?: React.ReactElement<any>
   className?: string
+  title?: string | React.ReactElement<any>
+  id?: string
   fill?: string
-  icon?: Icon
+  icon?: Icon | React.SVGAttributes<SVGElement>
   size?: number | Size
   verticalAlign?: 'middle' | 'text-bottom' | 'text-top' | 'top' | 'unset'
 }