unplugin / unplugin-icons

šŸ¤¹ Access thousands of icons as components on-demand universally.

Home Page:https://www.npmjs.com/package/unplugin-icons

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

customCollection not finding`.svg` in Vite React

jur532 opened this issue Ā· comments

commented

Describe the bug

I tried to follow the guides as close as possible. I have a test.svg file in ./collections/mono and have configured a d.ts file as well (following example https://github.com/antfu/unplugin-icons/tree/main/examples/vite-react closely)

The following is my config file and how I load the icon

// vite.config.js
export default defineConfig(() => {
  const iconsConfig = {
    compiler: 'jsx',
    jsx: 'react',
  
    customCollections: {
      'mono': FileSystemIconLoader('./collections/mono')
    }
  }
  return {
    plugins: [react(), Icons(iconsConfig)]
  }
})

// in some .jsx
import Test from '~icons/mono/test'

// package.json
{
  ...,
  "dependencies": {
    "@svgr/core": "^7.0.0",
    "svgo": "^3.0.2",
    "unplugin-icons": "^0.16.1"
  },
  "devDependencies": {
    "@iconify-json/logos": "^1.1.24",
    "@svgr/plugin-jsx": "^7.0.0"
  }
}

However, when I run I get thrown the following error

Internal server error: Icon `mono/test` not found`

which in the node_modules\unplugin-icons\dist files come from

// some chunk.js file
 const svg = await _nodeloader.loadNodeIcon.call(void 0, collection, icon, iconifyLoaderOptions);
  if (!svg)
    throw new Error(`Icon \`${warn}\` not found`);

I'm not sure what really is happening, but I found FileSystemIconLoader and doing a console.log(name) in the return async ..., I discovered that the function gets called twice and on the second call, it gets an undefined (on the first call, it gets test correctly.

// node-loaders.js
function FileSystemIconLoader(dir, transform) {
  return async (name) => {
    console.log(name)

Reproduction

see above, note again using v.0.16.1 and had to install @svgr/plugin-jsx along with @svgr/core

System Info

System:
    OS: macOS 13.2.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 204.64 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 112.0.5615.121
    Safari: 16.3

Used Package Manager

yarn

Validations

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

lol i apologize! after making this post, i found the err