Trouble with importing icons in a vite/react project

Hello, i tried to follow the documentation as best as i could in order to use unplugin-icons in a react/vite project and it looks like i wasn’t really successful

My vite.config is as follows:

import react from '@vitejs/plugin-react'
import * as path from 'path'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'
import Icons from 'unplugin-icons/vite'
import { defineConfig } from 'vite'
import eslintPlugin from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        react(),
        eslintPlugin(),
        Icons({
            compiler: 'jsx',
            jsx: 'react',
            customCollections: {
                'my-icons': FileSystemIconLoader('./src/assets/icons', (svg) =>
                    svg.replace(/^<svg /, '<svg fill="currentColor" ')
                ),
            },
        }),
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src'),
        },
    },
})

As you can see, my svg icons are located inside src/assets/icons

Now, here’s how i’m trying to import the icons in one of my components:

import IconHome from '~icons/my-icons/home'

But it’s throwing the following error: [vite] Internal server error: No files matching '~icons/my-icons/home.jsx' were found.

Any help would be appreciated!

[userquin]

Updated my repro, check the apple icons on the screen, one white and the same with red color using:

<Apple />
<Apple style={{ color: '#FF0000' }} />

EDIT: on iconCustomizer(collection, icon, props) you can see I only add the fill attr to this icon in my-icons collection

[userquin]

I mean, you must remove the fill attr from the svg, the plugin (via @iconify/utils) will not check for duplicates attrs IIRC.

just remove them from the svg, add the iconCustomizer(collection, icon, props) to the plugin and add the new attrs to the props, check for the collection and the icon if you need some custom props, it is a Record<string, string>.

For example, check this, only iconCustomizer: https://github.com/unocss/unocss/pull/848#issuecomment-1104068048