Skip to content

Commit

Permalink
Update icon.mdx with Nuxt.js option
Browse files Browse the repository at this point in the history
Added a small part under the use of 'Using an Icon library' for the Nuxt.js configuration.
  • Loading branch information
carwack authored Sep 24, 2020
1 parent ebd36df commit aee016a
Showing 1 changed file with 28 additions and 0 deletions.
28 changes: 28 additions & 0 deletions website/pages/icon.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,34 @@ Vue.use(Chakra, {
})
```

### In Nuxt.js
In your `nuxt.config.js` file import the icons you wish to use and add them to the Chakra module options.
```js
// Import FontAwesome icons
import { faGlobeAfrica, faEnvelope } from '@fortawesome/free-solid-svg-icons'

export default {
...
modules: [
'@chakra-ui/nuxt',
'@nuxtjs/emotion'
],
chakra: {
icons: {
// Here we state that we use `fa`
// icons library for Chakra's
// internal icon parser
iconPack: 'fa',
iconSet: {
faGlobeAfrica,
faEnvelope
}
}
}
...
}
```

## Adding custom icons

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

0 comments on commit aee016a

Please sign in to comment.