svelte-bootstrap-icons icon indicating copy to clipboard operation
svelte-bootstrap-icons copied to clipboard

Provide a vite plugin for optimising imports

Open MathiasWP opened this issue 1 year ago • 0 comments

It's recommended to do direct imports to avoid slow a slow dev-experience, but doing bare imports is so much nicer.

Suggested feature:

Export a vite plugin that optimises imports from this library.

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { iconImportOptimiser } from 'svelte-bootstrap-icons/vite';

export default defineConfig(() => {
	return {
		plugins: [
			sveltekit(),
			iconImportOptimiser(),
		]
	};
});

The plugin would apply the following transformation to svelte and typescript files:

From

  // my-file.js/ts
  import Alarm from "svelte-bootstrap-icons/lib/Alarm.svelte";
  import Bank from "svelte-bootstrap-icons/lib/Bank.svelte";
  import CloudMoon from "svelte-bootstrap-icons/lib/CloudMoon.svelte";
<script>
  // MyComponent.svelte
  import Alarm from "svelte-bootstrap-icons/lib/Alarm.svelte";
  import Bank from "svelte-bootstrap-icons/lib/Bank.svelte";
  import CloudMoon from "svelte-bootstrap-icons/lib/CloudMoon.svelte";
</script>

To

  // my-file.js/ts
  import { Alarm, Bank, CloudMoon } from "svelte-bootstrap-icons";
<script>
  // MyComponent.svelte
  import { Alarm, Bank, CloudMoon } from "svelte-bootstrap-icons";
</script>

Tip:

https://github.com/guybedford/es-module-lexer is a super-fast library for detecting imports (if vite does not provide a simple API for getting them)

MathiasWP avatar Jul 03 '23 08:07 MathiasWP