Using in separated npm package

[Noveller]

How to use as npm package. I have a problem with not being able to set the path to the sprite file in production mode

[Applelo]

I am not sure to understand the problem you have. This plugin is made to work with ViteJS like this:

// vite.config.js / vite.config.ts
import VitePluginSvgSpritemap from '@spiriit/vite-plugin-svg-spritemap'

export default {
  plugins: [
    VitePluginSvgSpritemap('./src/icons/*.svg', {
      styles: 'src/scss/spritemap.scss'
    })
  ]
}

And use like this in your app. ViteJS will transform /__spritemap to your vite assets directory.

<svg>
  <use xlink:href="/__spritemap#sprite-spiriit"></use>
</svg>

You will need aditional setup if you have a backend like wordpress/drupal/laravel...

What is your environment?

[Noveller]

Thx for replying. I am using this package to generate the svg sprite. I dev mode everything works fine because dev environment provides the correct path to the svg sprite. But I don’t understand how to provide path to the svg sprite in production mode. <svg><use xlink:href="/__spritemap#sprite-spiriit"></use> </svg>

__spritemap string will replace with correct path to the svg by dev env. But how to use it in production mode?

[Applelo]

On production, the plugin replace /__spritemap with the vitejs assets directory. Can you provide a small reproduction to understand what is not working for you? Do you have a particular vitejs configuration?

[vaaski]

I think I might be facing the same issue. I'm building a library component in vue, to be used in another app. When building, the spritemap does get put out to the dist/assets folder, but when importing my component (which uses vite-plugin-svg-spritemap for icons), the url in the build points to nothing (/assets/spritemap.4bdde031.svg).

When I manually copy the spritemap.4bdde031.svg to the apps public/assets folder, it works.

Example

My component's `vite.config.ts` ```ts import vue from "@vitejs/plugin-vue" import { dirname, resolve } from "node:path" import { fileURLToPath } from "node:url" import { defineConfig } from "vite" import dts from "vite-plugin-dts" import VitePluginSvgSpritemap from "@spiriit/vite-plugin-svg-spritemap" const __dirname = dirname(fileURLToPath(import.meta.url)) export default defineConfig({ plugins: [vue(), VitePluginSvgSpritemap("./src/icons/*.svg"), dts()], build: { lib: { entry: resolve(__dirname, "src/index.ts"), name: "MyComponent", fileName: "my-component", }, minify: false, rollupOptions: { external: ["vue"], output: { globals: { vue: "Vue", }, }, }, }, }) ``` Relevant bits from the component's package.json ```json { "type": "module", "main": "./dist/my-component.umd.js", "module": "./dist/my-component.js", "types": "./dist/my-component.d.ts", "exports": { ".": { "types": "./dist/index.d.ts", "import": "./dist/my-component.js", "require": "./dist/my-component.umd.js" }, "./style.css": "./dist/style.css" }, "files": [ "dist" ] } ``` How I'm importing the component into the app ```ts import { MyComponent } from "my-component" import "my-component/style.css" ```