### Leveraging Icons in Nuxt or Vue: A Step-by-Step Guide

Question

### Leveraging Icons in Nuxt or Vue: A Step-by-Step Guide

I'm encountering an issue with Nuxt.js while attempting to implement the vue-fontawesome framework along with the @nuxtjs/fontawesome framework. Here is the specific error message:

[nuxt] [request error] Cannot read properties of undefined (reading 'component')
        at $id_c50a96b3 (./.nuxt/dist/server/server.mjs:3239:31)
        at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:19193:3)

This snippet shows my code in nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt'

    export default defineNuxtConfig({
      modules: [
        '@nuxtjs/fontawesome'
      ],

      fontawesome: {
        icons: {
          solid: ['faXmark']
        }
      }
    })

Below is the component where I intend to utilize the icon:

<template>
      <div :class="props.className">
        <font-awesome-icon icon="xmark" />
        <slot />
      </div>
    </template>

Interestingly, this error only surfaces when attempting to load the page, not during the initial execution.

javascript vue.js nuxt.js vuejs3 nuxt3.js

Answer 1

Answer №1

For those in search of the best approach to working with icons, I highly recommend this solution by antfu: https://github.com/antfu/unplugin-icons. An in-depth article explaining the implementation can be found here.

If you're looking to integrate this solution with Nuxt3, here are the steps:

Ensure you are using Node v16 or later
Start a new Nuxt3 project:
```
pnpm dlx nuxi init nuxt3-unplugin-icons
```
If you're using PNPM: pnpm i --shamefully-hoist
Add the package mentioned above: pnpm add -D unplugin-icons

Add the following code snippet to your nuxt.config.ts file:

// @ts-nocheck
import { defineNuxtConfig } from 'nuxt'
import Icons from 'unplugin-icons/vite'

export default defineNuxtConfig({
  vite: {
    plugins: [
      Icons({
        // an experimental feature ⬇️
        autoInstall: true
      })
    ]
  }
})

If you encounter issues with types, simply ignore them for now.

Once completed, visit icones.js, select your icon and note the format [collection-id]:[name]. For instance, fa6-solid:xmark.

In any .vue file, convert the format as shown: ~icons/fa6-solid/xmark.

<script setup>
import IconXmark from `~icons/fa6-solid/xmark`
</script>

<template>
  <icon-xmark style="font-size: 2em; color: blue" />
</template>

Your Nuxt3 project will automatically install the necessary packages.

The autoInstall feature is mostly reliable but not fully tested. In case of failures, search for

@iconify-json/[your collection id]

on npm (e.g., @iconify-json/fa6-solid).

Explore alternative icons with the following example:

<script setup>
import IconXmark from '~icons/fa6-solid/xmark'
import IconAccountBox from '~icons/mdi/account-box'
import TastyPizza from '~icons/noto-v1/pizza'
import IconPs from '~icons/ri/playstation-line'
</script>

<template>
  <icon-xmark style="font-size: 2em; color: blue" />
  <icon-account-box style="font-size: 2em; color: red" />
  <tasty-pizza style="font-size: 2em" />
  <icon-ps style="font-size: 2em" />
</template>

Customize these icons with CSS as desired:

Refer to my GitHub repository for a complete example if needed.

Stay tuned for the upcoming auto-import feature by subscribing to the GitHub PR.

You can also use these icons with dynamic components if you have a predefined list available for the bundler.

Answer 2

For those in search of the best approach to working with icons, I highly recommend this solution by antfu: https://github.com/antfu/unplugin-icons. An in-depth article explaining the implementation can be found here.

If you're looking to integrate this solution with Nuxt3, here are the steps:

Ensure you are using Node v16 or later
Start a new Nuxt3 project:
```
pnpm dlx nuxi init nuxt3-unplugin-icons
```
If you're using PNPM: pnpm i --shamefully-hoist
Add the package mentioned above: pnpm add -D unplugin-icons

Add the following code snippet to your nuxt.config.ts file:

// @ts-nocheck
import { defineNuxtConfig } from 'nuxt'
import Icons from 'unplugin-icons/vite'

export default defineNuxtConfig({
  vite: {
    plugins: [
      Icons({
        // an experimental feature ⬇️
        autoInstall: true
      })
    ]
  }
})

If you encounter issues with types, simply ignore them for now.

Once completed, visit icones.js, select your icon and note the format [collection-id]:[name]. For instance, fa6-solid:xmark.

In any .vue file, convert the format as shown: ~icons/fa6-solid/xmark.

<script setup>
import IconXmark from `~icons/fa6-solid/xmark`
</script>

<template>
  <icon-xmark style="font-size: 2em; color: blue" />
</template>

Your Nuxt3 project will automatically install the necessary packages.

The autoInstall feature is mostly reliable but not fully tested. In case of failures, search for

@iconify-json/[your collection id]

on npm (e.g., @iconify-json/fa6-solid).

Explore alternative icons with the following example:

<script setup>
import IconXmark from '~icons/fa6-solid/xmark'
import IconAccountBox from '~icons/mdi/account-box'
import TastyPizza from '~icons/noto-v1/pizza'
import IconPs from '~icons/ri/playstation-line'
</script>

<template>
  <icon-xmark style="font-size: 2em; color: blue" />
  <icon-account-box style="font-size: 2em; color: red" />
  <tasty-pizza style="font-size: 2em" />
  <icon-ps style="font-size: 2em" />
</template>

Customize these icons with CSS as desired:

Refer to my GitHub repository for a complete example if needed.

Stay tuned for the upcoming auto-import feature by subscribing to the GitHub PR.

You can also use these icons with dynamic components if you have a predefined list available for the bundler.

Answer 3

Answer №2

If you're looking for a way to easily integrate icons into your Nuxt project, consider using the latest package nuxt-icon developed by the CEO of NuxtLabs. This package is already being utilized in the nuxt3/content2 starter template available at content-wind.

Installation

npm install --save-dev nuxt-icon

yarn add --dev nuxt-icon

Configuring Nuxt 3

nuxt.config.ts

export default defineNuxtConfig({
   modules: ['nuxt-icon']
})

How to Use

To use this package, simply choose the icon you want from the collection on icones.js.org and copy its name. The package will handle the rest, fetching the icon and adding it to your code. With over 100k icons to choose from, the possibilities are endless.

<Icon name="logos:google-icon"></Icon>
<Icon name="logos:facebook"></Icon>
<Icon name="logos:apple" fill="#97a3b6"></Icon>

Answer 4

If you're looking for a way to easily integrate icons into your Nuxt project, consider using the latest package nuxt-icon developed by the CEO of NuxtLabs. This package is already being utilized in the nuxt3/content2 starter template available at content-wind.

Installation

npm install --save-dev nuxt-icon

yarn add --dev nuxt-icon

Configuring Nuxt 3

nuxt.config.ts

export default defineNuxtConfig({
   modules: ['nuxt-icon']
})

How to Use

To use this package, simply choose the icon you want from the collection on icones.js.org and copy its name. The package will handle the rest, fetching the icon and adding it to your code. With over 100k icons to choose from, the possibilities are endless.

<Icon name="logos:google-icon"></Icon>
<Icon name="logos:facebook"></Icon>
<Icon name="logos:apple" fill="#97a3b6"></Icon>

Answer 5

Answer №3

Custom SVG Icons Workflow

When I need to work with custom svg icons without using an icon framework, I often rely on vite-svg-loader. This solution is compatible with Nuxt 3 as well.

yarn add vite-svg-loader --dev

nuxt.config.ts

import svgLoader from 'vite-svg-loader'

export default defineNuxtConfig({
  vite: {
    plugins: [
      svgLoader({})
    ]
  }
})

Once the setup is complete, I create a reusable component for handling icons (components/IconLoader.vue):

<template>
  <component :is="icon" />
</template>

<script>
  const props = defineProps<{ name: string }>()
  const icon = computed(() => 
    defineAsyncComponent(() => import(`../assets/icons/${props.name}.svg`))
  )
</script>

With this custom icon loader component in place, I can easily display icons in other components (e.g. App.vue) :

<template>
  <icon-loader name="calendar" /> // assuming there is a calendar.svg file in your assets folder.
</template>

I typically source my icons from , which pair nicely with TailwindCSS.

Answer 6

Custom SVG Icons Workflow

When I need to work with custom svg icons without using an icon framework, I often rely on vite-svg-loader. This solution is compatible with Nuxt 3 as well.

yarn add vite-svg-loader --dev

nuxt.config.ts

import svgLoader from 'vite-svg-loader'

export default defineNuxtConfig({
  vite: {
    plugins: [
      svgLoader({})
    ]
  }
})

Once the setup is complete, I create a reusable component for handling icons (components/IconLoader.vue):

<template>
  <component :is="icon" />
</template>

<script>
  const props = defineProps<{ name: string }>()
  const icon = computed(() => 
    defineAsyncComponent(() => import(`../assets/icons/${props.name}.svg`))
  )
</script>

With this custom icon loader component in place, I can easily display icons in other components (e.g. App.vue) :

<template>
  <icon-loader name="calendar" /> // assuming there is a calendar.svg file in your assets folder.
</template>

I typically source my icons from , which pair nicely with TailwindCSS.

### Leveraging Icons in Nuxt or Vue: A Step-by-Step Guide

Answer №1

Answer №2

Answer №3

Similar questions

Steps to decode a data URL into an image and render it on a canvas

Using the cURL command to retrieve script content

Component variables do not update their values

Maximizing the potential of vue.js and firebase through proper directory organization

Tips for initializing and updating a string array using the useState hook in TypeScript:1. Begin by importing the useState hook from the

Updating the state using a function from another module

Mastering the art of scrolling to a specific element with angular-scroll

Half the time, the Paypal button fails to load on Angular

Discover the magic of using jQuery's .map() method with

Receive an HTTP POST request within JavaScript without using Ajax in Symfony 4.1

Having trouble retrieving returned data after refetching queries using Apollo and GraphQL

Can the page count be reduced by subtracting the quantity of a specific class from it?

Vue.js is having trouble locating images

Using an image tag within a button element causes functionality issues with JavaScript on Chrome

Using Discord.js to retrieve identical lines from a text file in a database

How to resolve the error of "Objects are not valid as a React child" in NextJs when encountering an object with keys {children}

Uncover the solution to eliminating webpack warnings associated with incorporating the winston logger by utilizing the ContextReplacementPlugin

Experimenting with jQuery Hover Functionality Using Jasmine Testing

"After clicking the button for the second time, the jQuery on-click function begins functioning properly

Exploring various ways to implement HTTP GET requests within the PrimeVue DatatableUsing a mix