如何正确导入 nuxt.config.js 中的组件以用作自定义图标？

Question

我正在尝试使用 SVG 文件作为自定义图标，在 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 显示错误：

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

问题是 IDE 会自动执行这样的导入： import UploadIcon from '@/components/icons/UploadIcon'

而且它不起作用。我尝试了什么：

在组件路径中执行 ~ 而不是 @。
路径的其他变体，包括绝对路径。

但是，当我尝试使用绝对路径时，它显示了这样的错误：

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

所以我找不到办法，我检查了这些文档：

一般来说，我一直在尝试遵循这个答案：但是使用了一个常规的 vuetify.js 配置文件。使用 Nuxt 它不起作用。

Answer 1

首先，我建议使用 vuetify.options.js 配置文件，而不是从 nuxt.config.js (@nuxtjs/vuetify documentation) 加载配置。

在您的 vuetify.options.js 文件中（将其保存在顶级目录中）

// 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 }
      }
    }
  };
};

Answer 2

上面 Avraham 的解决方案是正确的。

此外，如果你在 Nuxt 中使用 vuetify 模板，你可以这样使用它：

<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>

然后在 v-list for 循环中使用的正确语法如下：

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

如何正确导入 nuxt.config.js 中的组件以用作自定义图标？

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

nuxt.js

vuetify.js