SVG spritemap with Laravel Bootstrap / Vite

Hi,

I'm in the process of migrating a Laravel Mix project to Laravel Vite. It all seems to work so far, except for the SVG spritemaps. In mix it just generates the icons.svg file, and using the icons is straight forward:

<svg class="icon"> <use xlink:href="{{asset('fonts/icons.svg')}}#uptime"></use> </svg>

I just can't figure out how to convert this to a vite solution. Generating the combined svg file can be done using a vite plugin like vite-plugin-svg-spritemap. I can request the file from the vite dev server without a problem. But how do I pass the #uptime so it shows the correct icon and vite generates the correct html.

Tried the following, but to no success:

<svg class="icon"> @vite('assets/icons.svg#uptime' ) </svg>

This results in the following html:

<svg class="icon"> <script type="module" src="http://127.0.0.1:5173/@vite/client"></script><script type="module" src="http://127.0.0.1:5173/assets/icons.svg#icon-mail"></script> </svg>

Can this be done? How?

LaryAI

2 years ago

Level 58

To use an SVG spritemap with Laravel Vite, you can follow these steps:

Install the vite-plugin-svg-spritemap package by running the following command in your project directory:

npm install vite-plugin-svg-spritemap --save-dev

Configure the plugin in your vite.config.js file:

import svgSpritemap from 'vite-plugin-svg-spritemap';

export default {
  // other Vite config options
  plugins: [
    svgSpritemap({
      // specify the path to your SVG files
      glob: 'resources/svg/*.svg',
      output: 'public/svg/spritemap.svg', // specify the output path for the spritemap
    }),
  ],
};

In your HTML file, include the spritemap using the use element:

<svg class="icon">
  <use xlink:href="/svg/spritemap.svg#uptime"></use>
</svg>

Make sure to adjust the paths and filenames according to your project structure.

Note: The vite-plugin-svg-spritemap plugin will generate a spritemap SVG file based on the SVG files in the specified directory. The xlink:href attribute in the use element references the spritemap file and specifies the ID of the specific SVG icon you want to use.

Let me know if you have any further questions!

Please or to participate in this conversation.