svelte-bootstrap-icons
svelte-bootstrap-icons copied to clipboard
Provide a vite plugin for optimising imports
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)