feat: icons extends #50
Conversation
carwack
added
type: feature or enhancement ⚡️
|
This pull request is being automatically deployed with Vercel (learn more). chakra-ui-vue-next – ./🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui-vue-next/hG6FudLVFJ2yDLN7nsrENVBd3Yt4 chakra-ui-vue-next-playground – ./🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui-vue-next-playground/GicrYE3afWwo91gQ4dnGnUPxvhLP |
🦋 Changeset detectedLatest commit: 311ac35 The changes in this PR will be included in the next version bump. This PR includes changesets to release 24 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
There was a problem hiding this comment.
Thanks @carwack
Nice work here. 👍🏽
I've requested changes for the docs of the icon. If possible it would be good to include a test for the extended icons.
packages/c-icon/README.md
Outdated
| ...customIcons | ||
| } |
There was a problem hiding this comment.
suggestion: for simplicity, we can directly consume the customIcons object
| extend: { | |
| ...customIcons | |
| } | |
| extend: customIcons |
| <template> | ||
| <div> | ||
| <c-icon size="10" name="discord" /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { CIcon } from '@chakra-ui/c-icon' | ||
| import { defineComponent } from 'vue' | ||
|
|
||
| export default defineComponent({ | ||
| components: { CIcon }, | ||
| }) | ||
| </script> |
There was a problem hiding this comment.
Good work here.
Tip:
You can shorted your code by not including the imports in the setup script. We added a component resolver to auto-import the Chakra components you use for you.
So this example can be simplified to:
<template>
<div>
<c-icon size="10" name="discord" />
</div>
</template>There was a problem hiding this comment.
Oh sweet! I'll clean it up and also change the name from with-extend-icon to with-custom-icon to make it more clear IMO.
| @@ -33,6 +33,7 @@ const ChakraUIVuePlugin: Plugin = { | |||
| }) | |||
Pull request checklist
Please check if your PR fulfills the following requirements:
/start features)
Pull request type
Please check the type of change your PR introduces:
What is the current behavior?
I wanted to make use of custom icons and extend the icons in Chakra UI Vue
What is the new behavior?
0 0 24 24Does this introduce a breaking change?
Other information