【Svelte Framework入門】Svelteアプリのビルド出力をindex.htmlのみにするViteプラグインを導入してみる

            
            $ tree dist/
dist/
├── assets
│   ├── ...
│   └── hoge.jpg
├── lib
│   ├── ...
│   └── piyo.js
├── ...
├── favicon.png
└── index.html
        

            
            $ yarn add vite-plugin-singlefile -D
        

            
            import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

//...中略

//👇追加
import { viteSingleFile } from 'vite-plugin-singlefile';

//...中略

export default defineConfig({
    plugins: [
        svelte(),
        //👇追加
        viteSingleFile(),
        //...以下略
        

            
            $ yarn add vite-svg-loader -D
        

            
            import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

//...中略

//👇追加
import svgLoader from 'vite-svg-loader';

//...中略

export default defineConfig({
    plugins: [
        svelte(),
        viteSingleFile(),
        //👇追加
        svgLoader({
            defaultImport: 'raw'
        })
        //...以下略
        

            
            <script lang="ts">
    //👇SVG画像の生ロード
    import hoge from '../../assets/hoge.svg';
    //👇(若干やっつけ仕事な)URLエンコード
    const enc = tacoPlayer
                       .replace(/\r?\n|<!--.*-->/g, '')
                       .match(/<svg.+<\/svg>/)[0]
                       .replace(/"/g, "'").
                       replace(/</g, '%3C')
                       .replace(/>/g, '%3E')
                       .replace(/#/g, '%23');
</script>

<object title="hoge" data="data:image/svg+xml,{enc}" type="image/svg+xml"></object>

<style lang="scss">
object {
    display: block;
    width: 32px;
    height: 32px;
    position: absolute;
}
</style>