How to auto import unplugin-icons?

Question

When I created a js project using vue-cli, I wanted to auto import elementplus and icons , but the project couldn't run after the import。How should I fix it and get it running properly？

the package.json like this:

  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "core-js": "^3.8.3",
    "element-plus": "^2.4.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "unplugin-auto-import": "^0.17.2",
    "unplugin-icons": "^0.18.1",
    "unplugin-vue-components": "^0.26.0"
  },

vue.config.js:

const { defineConfig } = require('@vue/cli-service')

const Components = require('unplugin-vue-components/webpack')
const {ElementPlusResolver} = require('unplugin-vue-components/resolvers')
const Icons = require('unplugin-icons/webpack')
const IconsResolver = require('unplugin-icons/resolver')

module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,
    configureWebpack: {
        plugins: [
            // AutoImport({
            //     resolvers: [
            //         ElementPlusResolver(),
            //         IconsResolver({
            //             prefix: 'Icon',
            //         }),
            //     ],
            // }),
            Components({
                resolvers: [
                    IconsResolver({enabledCollections: ["ep"]}),
                    ElementPlusResolver(),
                ],
            }),
            Icons({autoInstall: true}),
        ],
    }

})

and this is the error:

% npm run serve                

> [email protected] serve
> vue-cli-service serve

 ERROR  TypeError: IconsResolver is not a function
TypeError: IconsResolver is not a function
    at Object.<anonymous> (/Users/shareit/Library/CloudStorage/OneDrive-个人/Work/web/myfirst/vue.config.js:23:21)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:119:18)
    at exports.loadModule (/Users/shareit/Library/CloudStorage/OneDrive-个人/Work/web/myfirst/node_modules/@vue/cli-shared-utils/lib/module.js:86:14)
    at loadFileConfig (/Users/shareit/Library/CloudStorage/OneDrive-个人/Work/web/myfirst/node_modules/@vue/cli-service/lib/util/loadFileConfig.js:30:20)
    at Service.loadUserOptions (/Users/shareit/Library/CloudStorage/OneDrive-个人/Work/web/myfirst/node_modules/@vue/cli-service/lib/Service.js:339:44)

SysInfo:

System:
    OS: macOS 14.1.1
    CPU: (8) arm64 Apple M1
    Memory: 116.70 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    npm: 9.8.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 119.0.6045.199
    Safari: 17.1

I tried to recreate the project using windows 11， and this problem still exists

Answer 1

const { defineConfig } = require('@vue/cli-service')

const Components = require('unplugin-vue-components/webpack')
const {ElementPlusResolver} = require('unplugin-vue-components/resolvers')
const Icons = require('unplugin-icons/webpack')
const IconsResolver = require('unplugin-icons/resolver')

module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,
    configureWebpack: {
        plugins: [
            // AutoImport({
            //     resolvers: [
            //         ElementPlusResolver(),
            //         IconsResolver({
            //             prefix: 'Icon',
            //         }),
            //     ],
            // }),
            Components({
                resolvers: [
                    IconsResolver.default({enabledCollections: ["ep"]}),
                    ElementPlusResolver(),
                ],
            }),
            Icons.default({autoInstall: true}),
        ],
    }

})

I found this solution here: https://github.com/unplugin/unplugin-icons