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

Commit 8d3ca66

Browse files
committed
Merge branch 'master' of https://github.com/chakra-ui/chakra-ui-vue into release/css-props
2 parents 4379082 + f83a9b9 commit 8d3ca66

File tree

2 files changed

+29
-1
lines changed

2 files changed

+29
-1
lines changed

website/pages/icon.mdx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,34 @@ Vue.use(Chakra, {
9595
})
9696
```
9797

98+
### In Nuxt.js
99+
In your `nuxt.config.js` file import the icons you wish to use and add them to the Chakra module options.
100+
```js
101+
// Import FontAwesome icons
102+
import { faGlobeAfrica, faEnvelope } from '@fortawesome/free-solid-svg-icons'
103+
104+
export default {
105+
...
106+
modules: [
107+
'@chakra-ui/nuxt',
108+
'@nuxtjs/emotion'
109+
],
110+
chakra: {
111+
icons: {
112+
// Here we state that we use `fa`
113+
// icons library for Chakra's
114+
// internal icon parser
115+
iconPack: 'fa',
116+
iconSet: {
117+
faGlobeAfrica,
118+
faEnvelope
119+
}
120+
}
121+
}
122+
...
123+
}
124+
```
125+
98126
## Adding custom icons
99127

100128
All Chakra icons are registered in the Chakra plugin under the `icons.extend` key. So you

website/pages/stack.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ By default, each item is stacked vertically. Stack clones it's children and pass
2525
<c-heading>See the Vue</c-heading>
2626
<c-text :mt="4">Vue makes front-end development a breeze.</c-text>
2727
</c-box>
28-
<c-box :p="5" shadow="md" border-width="1px">
28+
<c-box :p="5" shadow="md" border-width="1px">
2929
<c-heading>Go Nuxt!</c-heading>
3030
<c-text :mt="4">Nuxt makes writing Vue even easier.</c-text>
3131
</c-box>

0 commit comments

Comments
 (0)