Type error when add custom Iconify IconSet customCollections

[deicidem]

Describe the bug

I try to implement this example: But i got type error

My code:

import IconsResolver from 'unplugin-icons/resolver';
import type { Options } from 'unplugin-icons/types';
import { importDirectory, parseColors, runSVGO } from '@iconify/tools';
import { compareColors, stringToColor } from '@iconify/utils/lib/colors';

const assetsRootDir = 'src/assets/icons';

export const iconsResolver = IconsResolver(
    {
        prefix: 'i',
        customCollections: ['ppd'],
    },
);

export const iconsConfig: Options = {
    compiler: 'vue2',
    customCollections: {
        ppd: async () => {
            // Load icons
            const iconSet = await importDirectory(
                `${assetsRootDir}/ppd`,
                {
                    prefix: 'ppd',
                },
            );

            // Clean up each icon
            await iconSet.forEach((name) => {
                const svg = iconSet.toSVG(name);
                if (!svg)
                    return;

                // Change color to `currentColor`
                const blackColor = stringToColor('black')!;

                parseColors(svg, {
                    defaultColor: 'currentColor',
                    callback: (attr, colorStr, color) => {
                        // console.log('Color:', colorStr, color);

                        // Change black to 'currentColor'
                        if (color && compareColors(color, blackColor))
                            return 'currentColor';

                        switch (color?.type) {
                            case 'none':
                            case 'current':
                                return color;
                        }

                        throw new Error(
                            `Unexpected color "${colorStr}" in attribute ${attr}`,
                        );
                    },
                });

                // Optimise, but do not change shapes because they are animated
                runSVGO(svg, {
                    keepShapes: true,
                });

                // Update icon in icon set
                iconSet.fromSVG(name, svg);
            });
            console.log(iconSet.export());

            // Export as IconifyJSON
            return iconSet.export();
        },
    },
};

package.json:

{
    "name": "intro-storybook-vue-template",
    "version": "0.2.0",
    "private": true,
    "description": "Starter template to get up and running quickly with Vue and Storybook",
    "author": "Chromatic <https://chromatic.com/>",
    "license": "MIT",
    "repository": {
        "type": "git",
        "url": "https://github.com/chromaui/intro-storybook-vue-template"
    },
    "bugs": {
        "url": "https://github.com/chromaui/intro-storybook-vue-template/issues"
    },
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview",
        "lint": "eslint . --fix",
        "format": "prettier --write src/",
        "storybook": "storybook dev -p 6006",
        "build-storybook": "storybook build",
        "init-msw": "msw init public/"
    },
    "dependencies": {
        "@iconify/tools": "^4.0.4",
        "unplugin-icons": "^0.19.0",
        "vue": "^2.7.16",
        "vue-template-es2015-compiler": "^1.9.1"
    },
    "devDependencies": {
        "@antfu/eslint-config": "^2.16.2",
        "@storybook/addon-essentials": "^7.6.6",
        "@storybook/addon-interactions": "^7.6.6",
        "@storybook/addon-links": "^7.6.6",
        "@storybook/blocks": "^7.6.6",
        "@storybook/test": "^7.6.6",
        "@storybook/vue": "^7.6.6",
        "@storybook/vue-vite": "^7.6.6",
        "@types/node": "^20.12.12",
        "@vitejs/plugin-vue2": "^2.3.1",
        "eslint": "^8.50.0",
        "msw": "^1.2.1",
        "msw-storybook-addon": "^1.10.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "sass": "1.32",
        "storybook": "^7.6.6",
        "ts-node": "^10.9.2",
        "typescript": "^5.4.5",
        "unplugin-vue-components": "^0.26.0",
        "vite": "^4.1.4",
        "vue-cli-plugin-vuetify": "~2.5.1",
        "vue-component-type-helpers": "^2.0.16",
        "vue-template-compiler": "^2.7.16",
        "vuetify": "2.6.15",
        "vuetify-loader": "1.7.3"
    },
    "resolutions": {
        "jackspeak": "2.1.1"
    }
}

Reproduction

Implement this example:

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 2.17 GB / 15.89 GB
  Binaries:
    Node: 16.20.2 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.3527

Used Package Manager

npm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.