vite-plugin-transform-remixicon-imports

Transform named remixicon imports into default imports.

pnpm install vite-plugin-transform-remixicon-imports -D

import { defineConfig } from 'vite';
import transformRemixiconImports from 'vite-plugin-transform-remixicon-imports';

export default defineConfig({
	plugins: [, /* other framework plugins */ transformRemixiconImports()]
});

Before

import {
	RiAddFill,
	RiAccountBoxFill,
	RiHomeLine,
	RiSettingsFill as RiSettings,
	type RiIcon
} from 'remixicon-svelte';

After

import type { RiIcon } from 'remixicon-svelte';
import RiAddFill from 'remixicon-svelte/icons/add-fill';
import RiAccountBoxFill from 'remixicon-svelte/icons/account-box-fill';
import RiHomeLine from 'remixicon-svelte/icons/home-line';
import RiSettings from 'remixicon-svelte/icons/settings-fill';

Why use this plugin?

Named remixicon imports have long been the cause of slow dev server performance. This plugin transforms them into default imports, which are much faster to resolve.

Why not just use default imports?

Named imports have a few advantages over default imports:

• Better autocomplete
• Less verbose
• LLMs love to use named imports

Supported frameworks

• Svelte (This plugin MUST be added AFTER the SvelteKit plugin in the plugins array)
• React
• Vanilla JS

Supporting other frameworks

For frameworks that transpile to a valid JS / JSX syntax you can just pass your file extension to the extensions option of the plugin:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import transformRemixiconImports, {
	SUPPORTED_EXTENSIONS
} from 'vite-plugin-transform-remixicon-imports';

export default defineConfig({
	// the plugin MUST be added after the plugin doing the transpilation
	// you may also want to spread the supported extensions to continue to support other extensions
	plugins: [vue(), transformRemixiconImports({ extensions: [...SUPPORTED_EXTENSIONS, '.vue'] })]
});

Feel free to contribute your frameworks extension!

By default the supported extensions are .ts, .tsx, .js, .jsx, .mjs, and .svelte.