Add fill prop

Co-authored-by: @macno
primer · Feb 23, 2021 · 6efa7c2 · 6efa7c2
1 parent 89a79bf
commit 6efa7c2
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 8 deletions.
diff --git a/lib/octicons_react/script/build.js b/lib/octicons_react/script/build.js
@@ -32,7 +32,7 @@ ${name}.defaultProps = {
       key,
       name,
       octicon,
-      code
+      code,
     }
   })
   .sort((a, b) => a.key.localeCompare(b.key))
@@ -64,6 +64,7 @@ type Size = 'small' | 'medium' | 'large'
 interface IconProps {
   'aria-label'?: string
   className?: string
+  fill?: string
   size?: number | Size
   verticalAlign?: 'middle' | 'text-bottom' | 'text-top' | 'top' | 'unset'
 }
@@ -87,7 +88,7 @@ fse
   .mkdirs(srcDir)
   .then(() => writeIcons(iconsFile))
   .then(() => writeTypes(typesFile))
-  .catch(error => {
+  .catch((error) => {
     console.error(error)
     process.exit(1)
   })
diff --git a/lib/octicons_react/src/__tests__/octicon.js b/lib/octicons_react/src/__tests__/octicon.js
@@ -53,6 +53,11 @@ describe('An icon component', () => {
     expect(container.querySelector('svg')).toHaveAttribute('class', 'foo')
   })
 
+  it('respects the fill prop', () => {
+    const {container} = render(<AlertIcon fill="#f00" />)
+    expect(container.querySelector('svg')).toHaveAttribute('fill', '#f00')
+  })
+
   it('respects the verticalAlign prop', () => {
     const {container} = render(<AlertIcon verticalAlign="middle" />)
     expect(container.querySelector('svg')).toHaveStyle({verticalAlign: 'middle'})

diff --git a/lib/octicons_react/src/get-svg-props.js b/lib/octicons_react/src/get-svg-props.js
@@ -1,10 +1,17 @@
 const sizeMap = {
   small: 16,
   medium: 32,
-  large: 64
+  large: 64,
 }
 
-export default function getSvgProps({'aria-label': ariaLabel, className, size, verticalAlign, svgDataByHeight}) {
+export default function getSvgProps({
+  'aria-label': ariaLabel,
+  className,
+  fill = 'currentColor',
+  size,
+  verticalAlign,
+  svgDataByHeight,
+}) {
   const height = sizeMap[size] || size
   const naturalHeight = closestNaturalHeight(Object.keys(svgDataByHeight), height)
   const naturalWidth = svgDataByHeight[naturalHeight].width
@@ -19,18 +26,18 @@ export default function getSvgProps({'aria-label': ariaLabel, className, size, v
     viewBox: `0 0 ${naturalWidth} ${naturalHeight}`,
     width,
     height,
-    fill: 'currentColor',
+    fill,
     style: {
       display: 'inline-block',
       userSelect: 'none',
-      verticalAlign
+      verticalAlign,
     },
-    dangerouslySetInnerHTML: {__html: path}
+    dangerouslySetInnerHTML: {__html: path},
   }
 }
 
 function closestNaturalHeight(naturalHeights, height) {
   return naturalHeights
-    .map(naturalHeight => parseInt(naturalHeight, 10))
+    .map((naturalHeight) => parseInt(naturalHeight, 10))
     .reduce((acc, naturalHeight) => (naturalHeight <= height ? naturalHeight : acc), naturalHeights[0])
 }
diff --git a/lib/octicons_react/src/index.d.ts b/lib/octicons_react/src/index.d.ts
@@ -8,6 +8,7 @@ export interface OcticonProps {
   'aria-label'?: string
   children?: React.ReactElement<any>
   className?: string
+  fill?: string
   icon?: Icon
   size?: number | Size
   verticalAlign?: 'middle' | 'text-bottom' | 'text-top' | 'top' | 'unset'