Access in VDS

[BregtDeLangeDelaware]

I'm using this plugin in a AspNetCore environment. I need the actual file and not have it injected.

I want to reference the generated file in a partial

<svg>
    <use href="@Url.Content(string.Format("~/assets/svg-symbols.svg#{0}", @Model))"></use>
</svg>

When running vite build, it is stored in "\wwwroot\assets\svg-symbols.svg", which is what you would expect.

However, in dev mode, the svg-symbols file is not available via this path, nor other tries (eg. "~/svg-symbols.svg").

This is my vite config, fairly straight forwarded. Should I not be able to access this in dev mode? Also injecting it doesn't seem to do anything. I don't do anything in main.ts.

import svgSpritePlugin from '@pivanov/vite-plugin-svg-sprite;

export default defineConfig({
	build: {
		manifest: true,
		outDir: 'wwwroot',
		rollupOptions: {
			input: {
				main: './main.ts',
			},
		},
	},
	server: {
		port: 5173,
	},
	plugins: [
		svgSpritePlugin({
			iconDirs: ["./Assets/Icons"],
			symbolId: "[name]",
			svgDomId: 'svg-symbols',
			fileName: 'svg-symbols.svg',
		})
	],
});

I'm using Vite.AspNetCore, which generates this in the header. But this works fine for my other assets.

 <script type="module" src="http://localhost:5173/@vite/client"></script>
<script src="http://localhost:5173/main.ts" type="module"></script>

[pivanov]

I think you can use in your entry point (main file) something like:

import svgSprite from 'virtual:svg-sprite';
if (import.meta.env.DEV) { // or the equivalent of dev mode
  const iconSprite = new DOMParser().parseFromString(svgSprite, 'image/svg+xml').documentElement;
  document.body.appendChild(iconSprite);
}

this will add the icons in the DOM ... then you can make a component who looks like:

const externalURL = import.meta.env.DEV ? '' : '/assets/svg-symbols.svg';
const path = `${externalURL}#${iconName}`;

return (
  <svg {...attributes} aria-label={iconName}>
      <title>{title || iconName}</title>
      <use href={path} />
  </svg>
)

This way in dev mode the icons will be used directly in the DOM and in prod you will use the external file directly from the public folder where all other assets are.

Hope this helps :)

[BregtDeLangeDelaware]

Hmm, I'm using server side generated HTML, so a partial in javascript is not useful in my case.

So there's no way to access the generated file in dev mode? What is the reason this file is not available? Perhaps then this plugin is not ideal for my case.

[pivanov]

you can use it ... the generated SVG should work ... you just need to serve it somehow ... like: localhost:3000/assets/svg-symbols.svg .... you can use

svgSpritePlugin({
	iconDirs: ["./Assets/Icons"],
	symbolId: "[name]",
	svgDomId: 'svg-symbols',
	fileName: 'svg-symbols.svg',
        outputDir: path.resolve(process.cwd(), 'dist/assets'),
})

the outputDir is the key ... if you are able to make this and serve the svg ... everything should work with your default setup

[BregtDeLangeDelaware]

Doesn't work for me. I'll try to create a repo with the issue later.