Skip to content

feat(style): add support for custom gradient fills#625

Open
charles4221 wants to merge 2 commits intomainfrom
feat/support-custom-gradient-fills
Open

feat(style): add support for custom gradient fills#625
charles4221 wants to merge 2 commits intomainfrom
feat/support-custom-gradient-fills

Conversation

@charles4221
Copy link
Collaborator

@charles4221 charles4221 commented Feb 20, 2026

Closes #368

Summary

  • Correctly supports the fill prop by ensuring it is applied to the svg element while also removing any built-in fill props from nested path elements so the svg fill takes precedence
  • Adds new props for linearGradient and radialGradient to allow easy application of gradients to icons without providing custom fill and creating the gradient elements yourself elsewhere in the DOM

Result

Code Sample Result
Linear Gradient Screenshot 2026-02-20 at 16 28 58 Screenshot 2026-02-20 at 16 29 09
Radial Gradient Screenshot 2026-02-20 at 16 28 05 Screenshot 2026-02-20 at 16 27 36

Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds first-class support for custom fill values (including url(#...) gradient references) in the React FontAwesome icon rendering pipeline, and introduces convenience props to generate inline SVG gradient definitions.

Changes:

  • Adds linearGradient and radialGradient props to FontAwesomeIconProps.
  • Updates the SVG abstract-element converter to (a) strip built-in fill attributes from child paths when an overriding fill/gradient is provided and (b) optionally inject gradient elements + apply fill="url(#id)" at the <svg> level.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 7 comments.

File Description
src/types/icon-props.ts Defines new gradient prop types and inline docs for consumers.
src/converter.ts Implements fill-override behavior and gradient element injection during abstract-to-React conversion.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@charles4221 charles4221 force-pushed the feat/support-custom-gradient-fills branch 2 times, most recently from 526763a to 56d0442 Compare February 20, 2026 07:06
@charles4221 charles4221 requested a review from Copilot February 22, 2026 23:15
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@charles4221 charles4221 force-pushed the feat/support-custom-gradient-fills branch from 56d0442 to d14cdc5 Compare February 22, 2026 23:22
@charles4221 charles4221 force-pushed the feat/support-custom-gradient-fills branch from a9496f3 to 3434d60 Compare February 23, 2026 01:14
@charles4221
Copy link
Collaborator Author

@robmadole this is now ready, would love to get your eyes over it when you get a sec!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support fill prop for gradient fills.

2 participants