[help] data-icon doesn't work in dynamic custom icon

[daoxincc]

Describe the bug

I want use dynamic custom icon

vite plugin...

import svgLoader from 'vite-svg-loader'
import Icons from 'unplugin-icons/vite'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'
import PurgeIcons from 'vite-plugin-purge-icons'
import AutoImport from 'unplugin-auto-import/vite'
export default () => {
 return {
    Icons({
        compiler: 'vue3',
        autoInstall: true,
        customCollections: {
          'sf-icon': FileSystemIconLoader(
            './src/assets/icons',
            svg => svg.replace(/^<svg /, '<svg fill="currentColor" class="svg-icon" '),
          )
        }
      }),
  PurgeIcons({
      iconSource: 'local',
      content: [
        '**/*.vue',
      ],
      included: [
        'sf-icon',
      ],
    }),
  AutoImport({
      resolvers: [
        IconsResolver({})
      ]
  })
 }
}

main.js import '@purge-icons/generated'

component

<template>
  <span class="iconify" data-icon="sf-icon:alipay"></span>
</template>

Then I got an error

Invalid collection name: "sf-icon"

Reproduction

use dynamic custom icon error

System Info

System:
    OS: Windows 10 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
    Memory: 12.15 GB / 27.87 GB
  Binaries:
    Node: 16.14.2 - D:\Develop\tools\nodejs\node.EXE
    Yarn: 1.22.18 - D:\Develop\tools\nodejs\yarn.CMD
    npm: 8.5.0 - D:\Develop\tools\nodejs\npm.CMD
    pnpm: 7.9.0 - D:\Develop\workspace\sofast-web-vue3\node_modules\.bin\pnpm.CMD
  Browsers:
    Edge: Chromium (118.0.2088.33)
    Internet Explorer: 11.0.22621.1

Used Package Manager

pnpm

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.