How to properly import component in nuxt.config.js to use as a custom icon?

user_7017890 0
Viewed 998

I'm trying to use an SVG file as a custom icon, using this structure in nuxt.config.js:

import UploadIcon from '@/components/icons/UploadIcon'

export default {
...
    vuetify: {
       customVariables: ['~/assets/variables.scss'],
       icons: {
           values: {
              upload: {
                  component: UploadIcon  <------here is my custom icon
              }
           }
       }
    }
 },

Nuxt is showing error:

   │   ✖ Nuxt Fatal Error                                                          │
   │                                                                               │
   │   Error: Cannot find module '@/components/icons/UploadIcon'                   │
   │   Require stack:                                                              │
   │   - C:\Users\Admin\Documents\portfolio\artwork\artwork\nuxt.config.js         │

The thing is that IDE automatically does such import: import UploadIcon from '@/components/icons/UploadIcon'

And it doesn't work. What I tried:

  1. doing ~ instead of @ in path to component.
  2. other variations of path, including absolute path.

However, when I try to use absolute path it shows such an error:

   ╭───────────────────────────────────────╮
   │                                       │
   │   ✖ Nuxt Fatal Error                  │
   │                                       │
   │   SyntaxError: Unexpected token '<'   │
   │                                       │
   ╰───────────────────────────────────────╯

So I can't find a way, I checked these documentations:

Generally I've been trying to follow this answer: https://stackoverflow.com/a/58563938/7017890 but there is a regular vuetify.js config file being used. With Nuxt it doesn't work.

nuxt.js vuetify.js
2 Answers

First I would suggest using vuetify.options.js config file instead of loading configurations from nuxt.config.js (@nuxtjs/vuetify documentation).

in your vuetify.options.js file (keep it in the top-level dir)

// Note the lack of a leading slash (/)
import myCustomIcon from "components/icons/UploadIcon";

export default function () {
  return {
    // other vuetify options here,
    icons: {
      values: {
        upload: { component: myCustomIcon }
      }
    }
  };
};
user_67764670

Avraham's solution above is correct.

In addition, if you're using the vuetify template in Nuxt, you can use it like this:

<script>
export default {
  data() {
    return {
      clipped: false,
      drawer: false,
      fixed: false,
      items: [
        {
          icon: "$myCustomIcon_1",
          title: "TitleText_1",
          to: "/",
        },
        {
          icon: "$myCustomIcon_2",
          title: "TitleText_2",
          to: "/",
        },
        {
          icon: "$myCustomIcon_3",
          title: "TitleText_3",
          to: "/",
        },
        {
          icon: "$myCustomIcon_4",
          title: "TitleText_4",
          to: "/",
        },
      ],
      miniVariant: false,
      right: true,
      rightDrawer: false,
    };
  },
};
</script>

and then the proper syntax to use in the v-list for loop is the following:

<v-list-item-action>
   <v-icon size="30">{{ `${item.icon}` }}</v-icon>
</v-list-item-action>

user_121910110
Related