How to inline SVG assets? [question]

[jesster2k10]

Description 📖

I'm currently trying to switch from Webpacker to Vite Ruby and things have been okay so far, except this one point of contention.

Currently, I'm using webpacker to house all my SVG assets. Some of which are included in my source bundle myself and others which I'm importing from NPM.

I import all my assets into a file called icons.ts:

import '@mdi/svg/svg/account-group-outline.svg';
import '@mdi/svg/svg/account-outline.svg';
import '@mdi/svg/svg/arrow-left.svg';
import '@mdi/svg/svg/arrow-right.svg';
import '@mdi/svg/svg/bank-outline.svg';
import '@mdi/svg/svg/calendar-blank-outline.svg';
import '@mdi/svg/svg/close.svg';
import '@mdi/svg/svg/cog-outline.svg';
import '@mdi/svg/svg/image-multiple-outline.svg';
import '@mdi/svg/svg/menu.svg';
import '@mdi/svg/svg/office-building-outline.svg';
import '@mdi/svg/svg/plus.svg';
import '@mdi/svg/svg/post-outline.svg';
import '@mdi/svg/svg/swap-horizontal.svg';
import '@mdi/svg/svg/table.svg';
import 'boxicons/svg/regular/bx-table.svg';
import 'boxicons/svg/regular/bx-transfer-alt.svg';

// when using vite
// const assets = import.meta.globEager('./assets/**/*.svg');

// when using webpacker
const assets = require.context('../assets', true, /.svg/);
assets.keys().forEach(assets);

and I'm able to inline the SVGs in my rails views using the inline_svg gem which depends on Webpacker internally, so is incompatible with Vite.

So I was trying to think of another way to achieve the same result without having to have two bundlers lying around, and I thought of possibly following along with this guide – https://thoughtbot.com/blog/organized-workflow-for-svg
and calling File.open and somehow referencing the asset using the vite_asset_path helper but I don't even think this is possible nor desirable.

So is there any way to go about this while working within Vite?

[ElMassimo]

Hi Jesse!

In Vite you can use build.assetsInlineLimit to control the size limit of asset files so that they are inlined as Base64 urls.

Unfortunately, this setting currently ignores SVGs, probably because it's not desirable to base64-encode SVGs.

See this related issue, which is being actively worked on.

A potential workaround at the moment, is to use uppercase .SVG extensions for the files, which will cause Vite to base64 inline SVGs. This is far from ideal, just mentioning it for completeness.

---

PS: Moved it to Discussions so that other folks can provide workarounds or plugins that already provide inlining. @jesster2k10