jpkleemans / vite-svg-loader

Vite plugin to load SVG files as Vue components
MIT License
585 stars 61 forks source link

SVG Components in dist folder, error on build #77

Closed RuBaWa closed 1 year ago

RuBaWa commented 1 year ago

I use this plugin to dynamically import svg icons by

const currentIcon = defineAsyncComponent(
  () => import(`../../assets/icons/${currentIconString.value}.svg?component`)
);

This project is a vue3 plugin. For this i defined following vite build config:

lib: {
  entry: resolve(__dirname, 'src/Name.ts'),
  formats: ['es'],
  name: 'Name',
  fileName: 'name',
},

On vite build process, this svg components are placed in dist folder:

import { openBlock as l, createElementBlock as t, createElementVNode as e } from "vue";
const o = {
  viewBox: "0 0 36 36",
  fill: "none",
  xmlns: "http://www.w3.org/2000/svg"
}, n = /* @__PURE__ */ e("path", {
  d: "M19.02 2.22h-1v5.67h1V2.22Z",
  fill: "#1F2837"
}, null, -1), h = /* @__PURE__ */ e("path", {
  "fill-rule": "evenodd",
  "clip-rule": "evenodd",
  d: "M18.52 26.51a8.71 8.71 0 1 1 8.7-8.71 8.72 8.72 0 0 1-8.7 8.71Zm0-16.41a7.711 7.711 0 1 0-.02 15.423 7.711 7.711 0 0 0 .02-15.423Z",
  fill: "#1F2837"
}, null, -1), d = /* @__PURE__ */ e("path", {
  d: "M18.02 27.72h1v5.67h-1v-5.67Zm-6.892-3.2-4.01 4.009.708.707 4.01-4.01-.708-.706ZM25.2 10.412l4.01-4.01.707.707-4.01 4.01-.707-.707ZM8.55 17.32H2.88v1h5.67v-1Zm19.93-.03h5.67v1h-5.67v-1ZM7.819 6.39l-.707.707 4.009 4.009.707-.707-4.01-4.01Zm17.417 18.796.707-.708 4.01 4.01-.708.707-4.009-4.01Z",
  fill: "#1F2837"
}, null, -1), c = [
  n,
  h,
  d
];
function r(s, i) {
  return l(), t("svg", o, c);
}
const _ = { render: r };
export {
  _ as default,
  r as render
};

At import in other projects, i get sporadically errors, that variables are already defined.

Uncaught (in promise) SyntaxError: Identifier 'h' has already been declared

Is it normal, that the svg componets are placed in dist folder at build process?

I think, the problem are the files in dist folder. Some svg icons are working, if i import my project as a plugin, some not. Maybe h is reserved in vue context? If i replace var h with another character, everthing is working. I seems to be a problem with auto generation or transform components to js modules.

RuBaWa commented 1 year ago

The error is gone. I don't know, why it came up, maybe esbuild problem or something else