Adding maskId (#491)

FortAwesome · Feb 24, 2022 · 9f83d49 · 9f83d49
1 parent ac63cd4
commit 9f83d49
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/index.d.ts b/index.d.ts
@@ -24,6 +24,7 @@ export interface FontAwesomeIconProps extends BackwardCompatibleOmit<SVGAttribut
   forwardedRef?: ((e: any) => void) | React.MutableRefObject<any> | null
   icon: IconProp
   mask?: IconProp
+  maskId?: string
   className?: string
   color?: string
   spin?: boolean

diff --git a/src/components/FontAwesomeIcon.js b/src/components/FontAwesomeIcon.js
@@ -14,7 +14,8 @@ export default function FontAwesomeIcon({ forwardedRef, ...props }) {
     symbol,
     className,
     title,
-    titleId
+    titleId,
+    maskId
   } = props
 
   const iconLookup = normalizeIconArgs(iconArgs)
@@ -37,7 +38,8 @@ export default function FontAwesomeIcon({ forwardedRef, ...props }) {
     ...mask,
     symbol,
     title,
-    titleId
+    titleId,
+    maskId
   })
 
   if (!renderedIcon) {
@@ -79,6 +81,8 @@ FontAwesomeIcon.propTypes = {
     PropTypes.string
   ]),
 
+  maskId: PropTypes.string,
+
   fixedWidth: PropTypes.bool,
 
   inverse: PropTypes.bool,
@@ -141,6 +145,7 @@ FontAwesomeIcon.defaultProps = {
   border: false,
   className: '',
   mask: null,
+  maskId: null,
   fixedWidth: false,
   inverse: false,
   flip: null,

diff --git a/src/components/__tests__/FontAwesomeIcon.test.js b/src/components/__tests__/FontAwesomeIcon.test.js
@@ -322,13 +322,22 @@ describe('using transform', () => {
   })
 })
 
-describe('mask', () => {
+describe.only('mask', () => {
   test('will add icon', () => {
     const vm = mount({ icon: faCoffee, mask: faCircle })
 
     expect(vm.children.length).toBe(2)
     expect(vm.children[1].props.hasOwnProperty('clipPath')).toBeTruthy() // eslint-disable-line no-prototype-builtins
   })
+
+  test('will use maskId', () => {
+    const vm = mount({ icon: faCoffee, mask: faCircle, maskId: 'circle-mask' })
+
+    expect(vm.children[0].children[0].props.id).toEqual('clip-circle-mask')
+    expect(vm.children[0].children[1].props.id).toEqual('mask-circle-mask')
+    expect(vm.children[1].props.mask).toEqual('url(#mask-circle-mask)')
+    expect(vm.children[1].props.clipPath).toEqual('url(#clip-circle-mask)')
+  })
 })
 
 describe('symbol', () => {