diff --git a/index.d.ts b/index.d.ts index b5c67551..11fd5cf0 100644 --- a/index.d.ts +++ b/index.d.ts @@ -24,6 +24,7 @@ export interface FontAwesomeIconProps extends BackwardCompatibleOmit void) | React.MutableRefObject | 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 index eb858eb4..790e248b 100644 --- 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 index 4e34511d..2eb58bf1 100644 --- 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', () => {