Icon components unresolvable?

[davidwebca]

Hi!

I was using vite-svg-loader before, but I wanted to cleanup my sfc files by enabling auto imports on everything that I could, so I tried to switch to unplugin-icons.

I wanted to resolve icons this way because I need to resolve them dynamically, but somehow I'm not able to resolve them in the <script setup> part. The icons render render correctly. Just to be clear, this is a custom collection with the file resolver.

If I try to use them directly:

const icons = [
    IconCaurArrow
];

It doesn't work. And if I try to import them directly:

import IconCaurArrow from '~icons/caur/arrow';

It does't work either... to me it seems like ~icons is not resolved at all in this case, but it could be indicative of what's going wrong, maybe in my config 🤔

Here's my config, if anyone sees what's wrong, let me know... (is AutoImport's config the problem? 🤔 )

import { defineConfig, loadEnv } from 'vite';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import vue from '@vitejs/plugin-vue';
import eslint from 'vite-plugin-eslint';
import stylelint from 'vite-plugin-stylelint';
// import svgLoader from 'vite-svg-loader';
import Icons from 'unplugin-icons/vite';
import { FileSystemIconLoader } from 'unplugin-icons/loaders';
import IconsResolver from 'unplugin-icons/resolver';
import Sitemap from 'vite-plugin-sitemap';
import vueDevTools from 'vite-plugin-vue-devtools';

import { resolve } from 'path';

export default ({ mode }) => {
    process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };

    return defineConfig({
        base: process.env.VITE_BASE_PUBLIC_PATH,
        build: {
            target: ['es2022'],
            rollupOptions: {
                input: {
                    main: resolve(__dirname, 'index.html'),
                    contact: resolve(__dirname, 'contact.html'),
                    privacy: resolve(__dirname, 'privacy.html'),
                    technologies: resolve(__dirname, 'technologies.html'),
                    notFound: resolve(__dirname, 'not-found.html'),
                },
            },
        },
        plugins: [
            vueDevTools(),
            eslint({ cache: false }),
            stylelint(),
            // svgLoader({ svgo: false }),
            vue(),
            Sitemap({
                hostname: 'https://www.caurtech.com',
                i18n: {
                    defaultLanguage: 'en',
                    languages: ['fr', 'en'],
                    strategy: 'prefix',
                },
            }),
            Icons({
                compiler: 'vue3',
                customCollections: {
                    caur: FileSystemIconLoader('./src/assets/svg'),
                },
            }),
            Components({
                resolvers: IconsResolver({
                    prefix: 'icon',
                    enabledCollections: ['caur'],
                }),
            }),
            AutoImport({
                include: [
                    /\.[tj]sx?$/,
                    /\.vue$/,
                    /\.md$/,
                ],
                imports: [
                    'vue',
                    'vue-router',
                    'vue-i18n',
                    {
                        'vue-meta': [
                            'useMeta',
                        ],
                    },
                ],
                vueTemplate: true,
                dirs: [
                    './src/components',
                    './src/composables',
                    './src/locales',
                    './src/pages',
                ],
                eslintrc: {
                    enabled: true,
                    filepath: './eslintrc-auto-import.mjs',
                    globalsPropValue: true,
                },
            }),
        ],
        resolve: {
            alias: {
                '@': resolve(__dirname, 'src'),
            },
        },
    });
};