vite-plugin-svelte-imgsrc2import

🍣 A vite plugin to convert Svelte img src to import. 🚀🚀🚀 You don't have to manually import the resource "import logo from './assets/logo.png'" and write "src={logo}", You just write 'src="./assets/logo.png"' as usual.

covert

before convert:

<img src="./assets/logo.png" alt="logo">
<img src={`./assets/logo${i}.png`} alt="logo">
<img src={i <= 3 ? `./assets/logo${i}.png` : './assets/logo6.png'} alt="logo">

after convert:

<script>
  import img___assets_logo_png from './assets/img/logo.png';

  const img___assets_logo__i__png = new URL(`./assets/logo${i}.png`, import.meta.url).href
  const img_i____3______assets_logo__i__png_______assets_logo6_png = new URL(i <= 3 ? `./assets/logo${i}.png` : './assets/logo6.png', import.meta.url).href
</script>
<img src={img___assets_logo_png} alt="logo">
<img src={img___assets_logo__i__png} alt="logo">
<img src={img_i____3______assets_logo__i__png_______assets_logo6_png} alt="logo">

Install

Using npm:

npm install vite-plugin-svelte-imgsrc2import --save-dev

Usage

Create a rollup.config.js configuration file and import the plugin:

import svelteImgSrcToImport from 'vite-plugin-svelte-imgsrc2import';

export default {
  ...
  plugins: [
    svelteImgSrcToImport(),
    svelte(),
  ]
};

Then call rollup either via the CLI or the API.

Options

import svelteImgSrcToImport from 'vite-plugin-svelte-imgsrc2import';

export default {
  ...
  plugins: [
    svelteImgSrcToImport({
      include: '**/*.svelte', // Process all .svelte files
      exclude: '**/ignore/*.svelte', // Exclude .svelte files in the ignore directory
      prefix: 'customPrefix_', // Custom variable name prefix
    }),
    svelte(),
  ]
};