Using inline SVG in a Vite production build

When utilizing Vite and Vue, my goal is to compile a single JavaScript file without creating an assets directory that includes SVG and GIF files during the build process. I want to achieve this without manually inserting the SVG code in a Vue JS file as a placeholder.

Is there a method to accomplish this? I have spent a day searching for solutions but haven't come across any answers yet. Any assistance would be greatly appreciated. It appears that GIFs are automatically included inline somehow.

javascriptvue.jssvgvite

Answer №1

If you are using Vite version 5, consider adjusting the build.assetsInlineLimit setting to a higher value:

Assets that are smaller than this limit will be embedded as base64 URLs to reduce http requests.

SVGs and GIFs are considered assets, so increasing this threshold should inline most of them. Note that SVG inline support was only introduced in Vite 5, as mentioned in this pull request.

/* vite.config.js */
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    assetsInlineLimit: Number.MAX_SAFE_INTEGER,
  },
});

Check out an example project on StackBlitz

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error encountered when attempting to convert a JSON object to a String using JSON.stringify(), due to a cyclic object value

I have a JSON object with the following structure: obj { name: "abc" , entriesList : "list of entry obj" , propertiesList : "list of properties obj" }; In this structure, an entry is also another object entry { info : "data obj" , ...

javascriptjqueryjson

Incorporating timed hover effects in React applications

Take a look at the codesandbox example I'm currently working on implementing a modal that appears after a delay when hovering over a specific div. However, I've encountered some challenges. For instance, if the timeout is set to 1000ms and you h ...

javascripthtmlcssreactjstypescript

Guide on transferring binary image data to a JavaScript function

I have $comment->image_data as the binary data of the image and I want to pass this data to the imgclick() function. Attempting the method below, but encountering an unexpected token error. <img src="data:image/jpg;base64,'.$comment->image_t ...

phpjavascript

What is the process for updating or upserting a document in Mongoose?

Maybe it's the timing, maybe it's me struggling with sparse documentation and not quite grasping the concept of updating in Mongoose :) Let's break it down: I have a contact schema and model (abbreviated properties): var mongoose = requir ...

javascriptmongodbnode.jsmongoose

What steps can I take to design a functional hamburger menu?

After multiple attempts to create a hamburger menu, I have hit a roadblock. Clicking on the menu icon transforms it into an 'X', but unfortunately, it does not trigger the opening of the menu. Despite days of effort and research, I have yet to fi ...

javascripthtmlcssnavigationbarhamburger-menu

What is the best way to navigate through multi-dimensional arrays of objects in JavaScript?

I am trying to access JavaScript objects that are stored in a multi-dimensional array, which is being exported by a WordPress plug-in. Unfortunately, I cannot make changes to the code to use a single array. There are two arrays called "employees". Is this ...

javascriptjson

Best practices for implementing JavaScript in JSP pages

After researching various sources, I have come across conflicting opinions on the topic which has left me feeling a bit confused. As someone new to web programming using java EE, I am looking to integrate javascript functions into my code. It appears that ...

javascriptjqueryjsp

Tips on showing an api call response in Reactjs

I am a beginner in Reactjs and currently working with nextjs. I have been trying to integrate a "newsletter" feature into my project. I have created a component for this which is functioning properly. However, I am facing an issue with displaying the "succ ...

javascriptreactjsnext.js

Exporting Data and Utilizing a Steady Data Table

I have incorporated the Fixed Data Grid into my latest project. https://facebook.github.io/fixed-data-table/example-sort.html My goal is to generate csv and pdf reports from the data displayed on the grid. Could you please advise me on how to export gri ...

javascriptjqueryreactjsfixed-data-table

Passing parameters with AngularJS can return as Resteasy @FormParam being null

Struggling to integrate AngularJS on the front end with Resteasy as my Rest API. The issue I'm encountering is that my @FormParam values are always null when sending parameters using AngularJS. Below is a snippet of my JavaScript code: $scope.addPe ...

javajavascriptangularjsresteasy

Adjust CRM 2011 settings to allow bulk editing exclusively for specific entities

Currently, my goal is to restrict bulk editing for most entities except for the "Campaign Response" entity. To accomplish this task, I have taken the following steps: Disabled the Out of the Box (OOTB) edit button globally (due to restrictions on editin ...

javascriptdynamics-crm-2011

After making a change to a Vue or JavaScript file, running `npm run watch` causes a crash due to the `compileTemplate` function now requiring

https://i.sstatic.net/Cip0d.png I am facing an issue where both npm run dev and prod are functioning correctly, but when I attempt to run watch and make changes to files, npm run watch throws an error and crashes. I am using laravel mix with TypeScript, ...

typescriptvue.jswebpacknode-moduleslaravel-mix

Customizing checkboxes in React with JSS: A step-by-step guide

I'm currently working on customizing CSS using JSS as my styling solution, which is proving to be a bit complex while following the w3schools tutorial. https://www.w3schools.com/howto/howto_css_custom_checkbox.asp HTML: <label class="container"& ...

javascriptcssreactjsjss

Node - Creating personalized error handling functions

Currently in the process of developing custom helper methods to eliminate redundancies, utilizing express-promise-router app.js has set up the error handler middleware //errorHandler app.use((err, req, res, next) => { //const error = a ...

javascriptnode.jsexpresserror-handlingecmascript-6

Tips for determining what elements are being updated in terms of style

I need assistance with modifying the functionality of a webpage's dropdown menu. Currently, it displays when the mouse hovers over it, but I want to change it to appear on click using my own JavaScript. Despite setting the onmouseout and onmouseover e ...

javascripthtmlcssicefaces

Transform tree-like JSON array with nested arrays into flat JSON array

I have an array tree in JSON format with potentially unlimited nesting: const namesArrayTree = [ { "name": "Peter" }, { "name": "folder1", "isArray": true, " ...

javascriptarraysjson

Error: Unable to use map function on users .. cannot perform mapping on functions

Initially, the map function in my code was working fine. However, suddenly an error started appearing when I included the users.map line. Surprisingly, if I comment out that line, the code works perfectly again. Even more strangely, if I uncomment it, ev ...

javascriptnode.jsreactjs

What is the best way to efficiently set up a scrolling text ticker for repeated use?

I am currently utilizing GreenSock/TweenMax for the creation of scrolling text, inspired by the design seen on this webpage: If you're interested in learning more about Greensock and its capabilities, take a look at their documentation here: While I ...

javascriptjquerygsap

I am having trouble authorizing a GET request with fetch

I've been attempting to utilize fetch in the browser, but it's not cooperating. Here's what I tried: fetch('https://api-2sizcg3ipa-uc.a.run.app/fats', { headers: {'Authorization': 'Basic ' + btoa('username ...

javascriptjsonheadercorsfetch

Color key in square shape for graph legend

I am looking for legend colors in square shape, but I don't want them to appear as square boxes on the graph. https://i.stack.imgur.com/Of0AM.png The squares are also showing up on the graph, which is not what I want. https://i.stack.imgur.com/Az9G ...

javascripttypescripthighchartsangular-highcharts