Adds a customFill prop to allow filling the icons with things like gradients

[MonsteRico]

I was using this package and it was very helpful. However, I ran into an issue when trying to color the Instagram icon to match the actual logo. I found a way to apply a gradient to the logo via a prop and a second svg element with the gradient. It's probably not the most elegant solution but it could help other people so figured I'd make a request. I also updated the README.md to reflect the new prop and its usage. Any of this can be changed if you have a better solution.

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 3e27127996bab4cf490b8bb9503da7d32b94d698

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
api-astroicon	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Jan 4, 2023 at 10:11PM (UTC)
astroicon	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Jan 4, 2023 at 10:11PM (UTC)

[stramel]

Wouldn't this be able to be accomplished without a custom property?

[astro-icon='mdi:instagram'] [fill="currentColor"] {
  fill: url('#rg');
}

though, this is non-ideal, It seems to fall into the same boat as #49

[MonsteRico]

I did not see #49 it is the same issue. The issue comes from the component automatically filling in some props within the svg preventing more finite overrides or control like the fill of the path. I haven't tried that solution although it would likely work.

[stramel]

Thank you for the PR but I don't believe we're interested in adding a customFill prop at this time. I believe this is an outlier case that can be worked around without much headache.

For a workaround, you could add the custom svg fill manually to the SVG file or manually inject the svg code using set:html and allow it to reference the custom svg fill.