The one with icon libraries in Nuxt.js and Chakra UI Vue
Tags: nuxt, vue, webdev, chakraui
Published: 2020-09-25 09:56:51

When I was working on my personal project with **Nuxt.js** and **Chakra UI Vue** I wanted to use **FontAwesome Icons**. I did struggle a bit to get the icons working in Chakra UI Vue inside my Nuxt.js project. Due to the fact that the **Nuxt.config.js** object looks a little different then the normal **Vue.config.js** object.

# Getting started 🏃‍♂️

This small blog is all about Nuxt.js and Chakra UI Vue, meaning we have to start with creating a new Nuxt.js project.

Let's start quickly by using the [create-nuxt-app](https://github.com/nuxt/create-nuxt-app).

```bash
npx create-nuxt-app <my-project>
```

Inside our terminal, we will have to answer a few questions. The only thing that's really important is that we select the **Chakra UI** option.

![Options in Nuxt create-nuxt-app](https://dev-to-uploads.s3.amazonaws.com/i/0fdchovhgwikdpp4oxfj.png)

Personally, I've chosen for **Yarn** as 'package manager', but feel free to pick what you prefer. After going inside the project folder we can launch our project.

```bash
cd <project-name>
yarn dev
```

✅  The first step is done!  We have our project running! Chakra UI is kind enough to change the **Index.vue** page to let us know everything is running correctly.

# 🎁 Adding the Icons

In this post, I'll be using **FontAwesome Icons**, here again, pick your favorite icon pack if you want.

We can add it to our project using the following yarn command.

```bash
yarn add @fortawesome/fontawesome-free
yarn add @fortawesome/free-brands-svg-icons
```

The first package **@fontawesome-free** are the free icons from the Font Awesome library. The other package **@free-brands-svg-icons** are the free icons from brands like Twitter etc. from the Font Awesome library.

For this project, I'm using the **brands-svg-icons** to make a list as shown below.

![Preview of the list of brand icons](https://dev-to-uploads.s3.amazonaws.com/i/8qst0nlau7jxlmvoiqzf.png)


The next big step is to import the icons we wish to use, for example, the **Twitter** icon.

Inside the **nuxt.config.js** file we have to add an import at the top for the icons.

```jsx
import { faTwitter, faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons'
```

Then we have to add the icons to the **Chakra** plugin inside the **config object**.

![Code of the config object](https://dev-to-uploads.s3.amazonaws.com/i/z2jl5mkdkksh0uhpeibl.png)

There it is! 🎉 Now we are ready to use the icons inside our templates!

We will use the [**CIcon**](https://vue.chakra-ui.com/icon) component of Chakra UI to easily render the SVG Icons in our template. 

![Code of icons in template](https://dev-to-uploads.s3.amazonaws.com/i/db679hj2tg3yyav1ag1f.png)

In the **name** prop we have to pass the **icon key**. Which is is the icon name (faTwitter) without fa and lower case for **Font Awesome** icons.

I would suggest to check out the documentation [here](https://vue.chakra-ui.com/icon) for more info on the props.

I really love how easy it is to use Icons in **Chakra UI Vue** and **Nuxt.js**. Thanks for reading and I do hope it will help you with your next project!

# ❤️ Contribute to this blog
Having any questions, caught a mistake, or have tips? Please reach out to me!