From e82a7dea568b2b941ed64e4c69f3d3f440dcdec7 Mon Sep 17 00:00:00 2001 From: carwack Date: Thu, 1 Apr 2021 15:34:19 +0200 Subject: [PATCH 01/11] feat: add extend icons to mergedIcons --- packages/core/src/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 13e5b6f7..4de0efef 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -33,6 +33,7 @@ const ChakraUIVuePlugin: Plugin = { }) let libraryIcons = options.icons?.library || {} + let extendedIcons = options.icons?.extend || {} // Initialize colormode const colorMode = theme.config?.initialColorMode || 'dark' @@ -51,6 +52,7 @@ const ChakraUIVuePlugin: Plugin = { const mergedIcons: MergedIcons = { ...internalIcons, ...libraryIcons, + ...extendedIcons, } app.provide('$chakraIcons', mergedIcons) }, From 7ad83a52f16a6756644df7b96e5e38367ff30b8c Mon Sep 17 00:00:00 2001 From: carwack Date: Thu, 1 Apr 2021 15:36:08 +0200 Subject: [PATCH 02/11] feat: use viewbox of icon itself --- packages/c-icon/src/icon.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/c-icon/src/icon.ts b/packages/c-icon/src/icon.ts index 2f09a5e6..a48dbeb2 100644 --- a/packages/c-icon/src/icon.ts +++ b/packages/c-icon/src/icon.ts @@ -46,7 +46,7 @@ export const CIcon = defineComponent({ color: 'currentColor', innerHTML: icon.value.path, focusable: false, - viewBox: fallbackIcon.viewBox, + viewBox: icon.value.viewBox || fallbackIcon.viewBox, })) return () => From 5b537a551a842d4adb743c8b5e14bdbd37563349 Mon Sep 17 00:00:00 2001 From: carwack Date: Thu, 1 Apr 2021 16:28:22 +0200 Subject: [PATCH 03/11] feat: add example of extend icon --- packages/c-icon/examples/with-extend-icon.vue | 14 ++++++++++++++ playground/src/main.ts | 9 ++++++++- 2 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 packages/c-icon/examples/with-extend-icon.vue diff --git a/packages/c-icon/examples/with-extend-icon.vue b/packages/c-icon/examples/with-extend-icon.vue new file mode 100644 index 00000000..c54fc0cd --- /dev/null +++ b/packages/c-icon/examples/with-extend-icon.vue @@ -0,0 +1,14 @@ + + + diff --git a/playground/src/main.ts b/playground/src/main.ts index 9414ae4b..0776dbe5 100644 --- a/playground/src/main.ts +++ b/playground/src/main.ts @@ -14,7 +14,14 @@ const app = createApp(App) icons: { library: { feActivity - } + }, + extend: { + discord: { + path: + '', + viewBox: '0 0 496 512', + }, + }, }, extendTheme: extendTheme({ config: { From b50f8f2ce179bbb3ace4f9112e46338ef2244156 Mon Sep 17 00:00:00 2001 From: carwack Date: Thu, 1 Apr 2021 16:33:24 +0200 Subject: [PATCH 04/11] docs: update icon docs with adding custom icons --- packages/c-icon/README.md | 55 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 54 insertions(+), 1 deletion(-) diff --git a/packages/c-icon/README.md b/packages/c-icon/README.md index 55a75d58..19f251da 100644 --- a/packages/c-icon/README.md +++ b/packages/c-icon/README.md @@ -8,4 +8,57 @@ A component to display icons in the browser yarn add @chakra-ui/c-icon # or npm i @chakra-ui/c-icon -``` \ No newline at end of file +``` + +### Adding custom icons +All Chakra icons are registered in the Chakra plugin under the `icons.extend` key. So you +can extend this object to add your own icons. Here are the steps: + +- Export the icon's `svg` from Figma, Sketch, etc. +- Use a tool like [SvgOmg](https://svgomg.firebaseapp.com) to reduce the size + and minify the markup. +- Add the icon to the theme object. + +> Add the `fill=currentColor` attribute to the `path` or `g` so that when you +> this ``, it works correctly. + +
+ +```js +// Step 1: Each icon should be stored as an object of `path` and `viewBox` +const customIcons = { + icon1: { + path: ``, + // If the icon's viewBox is `0 0 24 24`, you can ignore `viewBox` + viewBox: "0 0 40 40", + }, + icon2: { + path: ` + + + + ` + } +}; + +// Step 2: Add the custom icon to the Chakra plugin +Vue.use(Chakra, { + icons: { + // ... + extend: { + ...customIcons + } + } +}) +``` + +You can now consume your custom icons in your template like this: + +```vue + +``` + +> You can access the full merged icons object under `this.$chakra.icons` in your Vue components. From 1fb2c98b504053e251cd57bc1248042042042559 Mon Sep 17 00:00:00 2001 From: carwack Date: Thu, 1 Apr 2021 16:37:21 +0200 Subject: [PATCH 05/11] docs: update code in readme --- packages/c-icon/README.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/c-icon/README.md b/packages/c-icon/README.md index 19f251da..0bc49daa 100644 --- a/packages/c-icon/README.md +++ b/packages/c-icon/README.md @@ -42,14 +42,15 @@ const customIcons = { }; // Step 2: Add the custom icon to the Chakra plugin -Vue.use(Chakra, { - icons: { - // ... - extend: { - ...customIcons +const app = createApp(App) + .use(ChakraUIVuePlugin, { + icons: { + // ... + extend: { + ...customIcons + } } - } -}) + }) ``` You can now consume your custom icons in your template like this: From 8ee00692960c171f93df2396b7efb123cd566f08 Mon Sep 17 00:00:00 2001 From: carwack Date: Thu, 1 Apr 2021 17:06:24 +0200 Subject: [PATCH 06/11] feat: add changeset for minor bump on cicon package --- .changeset/wild-chairs-applaud.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/wild-chairs-applaud.md diff --git a/.changeset/wild-chairs-applaud.md b/.changeset/wild-chairs-applaud.md new file mode 100644 index 00000000..8c48910f --- /dev/null +++ b/.changeset/wild-chairs-applaud.md @@ -0,0 +1,5 @@ +--- +'@chakra-ui/c-icon': minor +--- + +Add option to extend icons From ac4486821f0c0d1099da7ff5821bc53799f9a540 Mon Sep 17 00:00:00 2001 From: carwack Date: Fri, 2 Apr 2021 12:57:11 +0200 Subject: [PATCH 07/11] feat: clean up code and docs --- packages/c-icon/README.md | 4 +--- packages/c-icon/examples/with-custom-icon.vue | 5 +++++ packages/c-icon/examples/with-extend-icon.vue | 14 -------------- 3 files changed, 6 insertions(+), 17 deletions(-) create mode 100644 packages/c-icon/examples/with-custom-icon.vue delete mode 100644 packages/c-icon/examples/with-extend-icon.vue diff --git a/packages/c-icon/README.md b/packages/c-icon/README.md index 0bc49daa..cd9adc31 100644 --- a/packages/c-icon/README.md +++ b/packages/c-icon/README.md @@ -46,9 +46,7 @@ const app = createApp(App) .use(ChakraUIVuePlugin, { icons: { // ... - extend: { - ...customIcons - } + extend: customIcons } }) ``` diff --git a/packages/c-icon/examples/with-custom-icon.vue b/packages/c-icon/examples/with-custom-icon.vue new file mode 100644 index 00000000..1dd3bc4d --- /dev/null +++ b/packages/c-icon/examples/with-custom-icon.vue @@ -0,0 +1,5 @@ + diff --git a/packages/c-icon/examples/with-extend-icon.vue b/packages/c-icon/examples/with-extend-icon.vue deleted file mode 100644 index c54fc0cd..00000000 --- a/packages/c-icon/examples/with-extend-icon.vue +++ /dev/null @@ -1,14 +0,0 @@ - - - From 082c70b03bd0e07704e1285592f515b3a43073b4 Mon Sep 17 00:00:00 2001 From: carwack Date: Fri, 2 Apr 2021 12:59:30 +0200 Subject: [PATCH 08/11] feat: add changeset log --- .changeset/ten-pandas-run.md | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 .changeset/ten-pandas-run.md diff --git a/.changeset/ten-pandas-run.md b/.changeset/ten-pandas-run.md new file mode 100644 index 00000000..357a17e0 --- /dev/null +++ b/.changeset/ten-pandas-run.md @@ -0,0 +1,28 @@ +--- +'@chakra-ui/c-icon': minor +'@chakra-ui/c-accordion': patch +'@chakra-ui/c-alert': patch +'@chakra-ui/c-badge': patch +'@chakra-ui/c-button': patch +'@chakra-ui/c-close-button': patch +'@chakra-ui/c-color-mode': patch +'@chakra-ui/c-flex': patch +'@chakra-ui/c-modal': patch +'@chakra-ui/c-popper': patch +'@chakra-ui/c-portal': patch +'@chakra-ui/c-reset': patch +'@chakra-ui/c-spinner': patch +'@chakra-ui/c-theme-provider': patch +'@chakra-ui/c-visually-hidden': patch +'@chakra-ui/vue-next': patch +'@chakra-ui/nuxt-next': patch +'@chakra-ui/vue-system': patch +'@chakra-ui/vue-test-utils': patch +'@chakra-ui/vue-theme': patch +'@chakra-ui/vue-theme-tools': patch +'@chakra-ui/vue-utils': patch +'@chakra-ui/vue-auto-import': patch +'@chakra-ui/vue-docs': patch +--- + +Add option to extend icons with custom icons From 096b067b28b8590ae1e8991c5a5119d3039ecc7e Mon Sep 17 00:00:00 2001 From: carwack Date: Fri, 2 Apr 2021 18:28:55 +0200 Subject: [PATCH 09/11] test: add test for custom icon and update snapshot --- .../tests/__snapshots__/c-icon.test.ts.snap | 16 ++++++++ packages/c-icon/tests/c-icon.test.ts | 39 ++++++++++++++++++- 2 files changed, 53 insertions(+), 2 deletions(-) diff --git a/packages/c-icon/tests/__snapshots__/c-icon.test.ts.snap b/packages/c-icon/tests/__snapshots__/c-icon.test.ts.snap index ad911a42..b2b09f9b 100644 --- a/packages/c-icon/tests/__snapshots__/c-icon.test.ts.snap +++ b/packages/c-icon/tests/__snapshots__/c-icon.test.ts.snap @@ -1,5 +1,21 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`should render custom icon properly 1`] = ` + + + + + +`; + exports[`should render properly 1`] = ` { + const base = { + components: { + CIcon, + }, + template: '', + ...props, + } + return render(base) +} it('should render properly', () => { - const { asFragment } = render(CIcon) + const { asFragment } = renderComponent() + expect(asFragment()).toMatchSnapshot() +}) + +it('should have no a11y violations', async () => { + await testA11y(renderComponent()) +}) + +it('should render custom icon properly', async () => { + const icons = { + discord: { + path: + '', + viewBox: '0 0 496 512', + }, + } + + const { asFragment } = renderComponent({ + template: '', + setup() { + provide('$chakraIcons', icons) + }, + }) + expect(asFragment()).toMatchSnapshot() }) From 5c0b9ac78c80cbe04cdd7d6b458cf1c8efeb74e4 Mon Sep 17 00:00:00 2001 From: carwack Date: Fri, 2 Apr 2021 18:30:29 +0200 Subject: [PATCH 10/11] feat: add correct changeset --- .changeset/strange-ducks-press.md | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 .changeset/strange-ducks-press.md diff --git a/.changeset/strange-ducks-press.md b/.changeset/strange-ducks-press.md new file mode 100644 index 00000000..bf84f074 --- /dev/null +++ b/.changeset/strange-ducks-press.md @@ -0,0 +1,28 @@ +--- +'@chakra-ui/c-accordion': minor +'@chakra-ui/c-alert': minor +'@chakra-ui/c-badge': minor +'@chakra-ui/c-button': minor +'@chakra-ui/c-close-button': minor +'@chakra-ui/c-color-mode': minor +'@chakra-ui/c-flex': minor +'@chakra-ui/c-icon': minor +'@chakra-ui/c-modal': minor +'@chakra-ui/c-popper': minor +'@chakra-ui/c-portal': minor +'@chakra-ui/c-reset': minor +'@chakra-ui/c-spinner': minor +'@chakra-ui/c-theme-provider': minor +'@chakra-ui/c-visually-hidden': minor +'@chakra-ui/vue-next': minor +'@chakra-ui/nuxt-next': minor +'@chakra-ui/vue-system': minor +'@chakra-ui/vue-test-utils': minor +'@chakra-ui/vue-theme': minor +'@chakra-ui/vue-theme-tools': minor +'@chakra-ui/vue-utils': minor +'@chakra-ui/vue-auto-import': minor +'@chakra-ui/vue-docs': minor +--- + +Add option to extend icons with custom icons From 311ac3538a59d151fbda6ca2b9bee2a4ef476843 Mon Sep 17 00:00:00 2001 From: Jonathan Bakebwa Date: Sun, 4 Apr 2021 14:52:59 +0800 Subject: [PATCH 11/11] chore: unused changeset --- .changeset/strange-ducks-press.md | 28 ---------------------------- 1 file changed, 28 deletions(-) delete mode 100644 .changeset/strange-ducks-press.md diff --git a/.changeset/strange-ducks-press.md b/.changeset/strange-ducks-press.md deleted file mode 100644 index bf84f074..00000000 --- a/.changeset/strange-ducks-press.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -'@chakra-ui/c-accordion': minor -'@chakra-ui/c-alert': minor -'@chakra-ui/c-badge': minor -'@chakra-ui/c-button': minor -'@chakra-ui/c-close-button': minor -'@chakra-ui/c-color-mode': minor -'@chakra-ui/c-flex': minor -'@chakra-ui/c-icon': minor -'@chakra-ui/c-modal': minor -'@chakra-ui/c-popper': minor -'@chakra-ui/c-portal': minor -'@chakra-ui/c-reset': minor -'@chakra-ui/c-spinner': minor -'@chakra-ui/c-theme-provider': minor -'@chakra-ui/c-visually-hidden': minor -'@chakra-ui/vue-next': minor -'@chakra-ui/nuxt-next': minor -'@chakra-ui/vue-system': minor -'@chakra-ui/vue-test-utils': minor -'@chakra-ui/vue-theme': minor -'@chakra-ui/vue-theme-tools': minor -'@chakra-ui/vue-utils': minor -'@chakra-ui/vue-auto-import': minor -'@chakra-ui/vue-docs': minor ---- - -Add option to extend icons with custom icons