feat(octicons_react): update base icon component to include svg props (#1047)

* feat(octicons_react): update base icon component to include svg props

* chore: add changeset

* chore: add back in packageManager option

* test: update test to use firstChild

Author: joshblack

.changeset/nice-lamps-peel.md

@@ -0,0 +1,5 @@
+---
+'@primer/octicons': minor
+---
+
+Add support for SVG props to base icons

lib/octicons_react/__tests__/tree-shaking.test.js

@@ -50,5 +50,5 @@ test('tree shaking single export', async () => {
   })
 
   const bundleSize = Buffer.byteLength(output[0].code.trim()) / 1000
-  expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"3.563kB"`)
+  expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"6.29kB"`)
 })

lib/octicons_react/src/__tests__/octicon.js

@@ -67,6 +67,11 @@ describe('An icon component', () => {
     expect(container.querySelector('svg')).toHaveStyle({verticalAlign: 'middle'})
   })
 
+  it('supports additional props on the outermost element', () => {
+    const {container} = render(<AlertIcon data-testid="icon" />)
+    expect(container.firstChild).toHaveAttribute('data-testid', 'icon')
+  })
+
   describe('size props', () => {
     it('respects size="small"', () => {
       const {container} = render(<AlertIcon size="small" />)

lib/octicons_react/src/createIconComponent.js

@@ -21,7 +21,9 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
         size = 16,
         verticalAlign = 'text-bottom',
         id,
-        title
+        title,
+        style,
+        ...rest
       },
       forwardedRef
     ) => {
@@ -36,6 +38,7 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
       return (
         <svg
           ref={forwardedRef}
+          {...rest}
           aria-hidden={labelled ? undefined : 'true'}
           tabIndex={tabIndex}
           focusable={tabIndex >= 0 ? 'true' : 'false'}
@@ -52,7 +55,8 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
             display: 'inline-block',
             userSelect: 'none',
             verticalAlign,
-            overflow: 'visible'
+            overflow: 'visible',
+            ...style
           }}
         >
           {title ? <title>{title}</title> : null}

lib/octicons_react/src/index.d.ts

@@ -6,7 +6,7 @@ import {Icon} from './__generated__/icons.js'
 
 type Size = 'small' | 'medium' | 'large'
 
-export interface OcticonProps {
+export interface OcticonProps extends React.ComponentPropsWithoutRef<'svg'> {
   'aria-label'?: string
   'aria-labelledby'?: string
   tabIndex?: number

package.json

@@ -50,5 +50,6 @@
       "github/no-then": 0,
       "eslint-comments/no-use": 0
     }
-  }
+  },
+  "packageManager": "[email protected]"
 }