Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

fix: support multiple paths in icons #496

Merged
merged 4 commits into from
Dec 22, 2021
Merged

fix: support multiple paths in icons #496

merged 4 commits into from
Dec 22, 2021

Conversation

dhazelett
Copy link
Contributor

Description

FontAwesome duotone icons require multiple path elements, as well as className defs, and a default style def for the opacity of fa-secondary.

Inspecting the duotone SVGs in the pro repo, the order is path.fa-secondary -> path.fa-primary. I'm also not 100% sure that the grouping (g.fa-group) is needed, and welcome any feedback.

Motivation and Context

see #495

How Has This Been Tested?

Tested via a local link npm link /path/to/fork, and checked the behavior in the browser.

Screenshots (if appropriate):

image

Here is example output

<svg data-chakra-component="CIcon" viewBox="0 0 640 512" role="presentation" class="css-5ffdf css-3vopgu css-0">
  <g class="fa-group">
    <defs>
      <style>.fa-secondary{opacity:.4}</style>
    </defs>
    <path d="OMMITTED" fill="currentColor" class="fa-secondary"></path>
    <path d="OMMITTED" fill="currentColor" class="fa-primary"></path>
  </g>
</svg>

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

@dhazelett
fix: support multiple paths in icons
d7dcdae 
FontAwesome duotone icons require multiple path elements, as well as className defs, and a default style def for the opacity of fa-secondary.
@changeset-bot
Copy link

changeset-bot bot commented Oct 24, 2021 •
edited
Loading

⚠️ No Changeset found

Latest commit: 812297f

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
Copy link

vercel bot commented Oct 24, 2021 •
edited
Loading

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

chakra-ui-vue – ./

🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui-vue/3mGCe8kAqxdMZ3hFKZ4nMiJ19Dt4
✅ Preview: https://chakra-ui-vue-git-fork-dhazelett-dh-featurefon-2b3592-chakra-ui.vercel.app

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 24, 2021 •
edited
Loading

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 812297f:

Sandbox Source
Chakra UI Vue (0.X) Starter Template Configuration
chakra-ui-nuxt-demo Configuration

@carwack
Copy link
Collaborator

carwack commented Oct 25, 2021 •
edited
Loading

Awesome! Thanks for picking this up! 👏
Is there a way to make it more generic? And not only for FontAwesome? 🤔

@dhazelett
Copy link
Contributor Author

Yeah no problem!

@dhazelett
Copy link
Contributor Author

Okay, I think I've made it about as generic as possible for now. If you have any ideas to make it even more, just shoot, and I'll make it happen

I explored adding @mdi/js and @heroicons/vue, but there is quite a bit of work required to get those going, and not appropriate for this PR.

@codebender828 codebender828 self-requested a review December 22, 2021 16:38
codebender828
codebender828 approved these changes Dec 22, 2021
View reviewed changes
Copy link
Collaborator

@codebender828 codebender828 left a comment

Choose a reason for hiding this comment

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

Thank you @dhazelett .

This looks good to me

@codebender828 codebender828 merged commit 50e4f57 into chakra-ui:develop Dec 22, 2021
@codebender828 codebender828 mentioned this pull request Jan 19, 2022
Merged
8 tasks
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers
1 more reviewer

@codebender828 codebender828 codebender828 approved these changes

Reviewers whose approvals may not affect merge requirements
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@dhazelett @carwack @codebender828