Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vite building ignores svg at specified circumstance #19106

Open
7 tasks done
XY-ShadowK opened this issue Dec 31, 2024 · 0 comments
Open
7 tasks done

vite building ignores svg at specified circumstance #19106

XY-ShadowK opened this issue Dec 31, 2024 · 0 comments

Comments

@XY-ShadowK
Copy link

Describe the bug

<script setup>
import editPenCur from '/src/assets/edit-pen.svg'
const editPenUrl = new URL('/src/assets/edit-pen.svg', import.meta.url)
const cursorStyleTemplate = `cursor: url(${editPenUrl}) 0 24, auto;`
const cursorStyleAdd = 'cursor: url(' + editPenUrl + ') 0 24, auto;'
</script>

<template>
  <span style="color: white" :style="`cursor: url(${editPenCur}) 0 24, auto;`" >change cursor</span>
  <br/>
  <span style="color: white" :style="`cursor: url(${editPenUrl}) 0 24, auto;`" >change cursor</span>
  <br/>
  <span style="color: white" :style="'cursor: url(' + editPenCur + ') 0 24, auto;'" >change cursor</span>
  <br/>
  <span style="color: white" :style="'cursor: url(' + editPenUrl + ') 0 24, auto;'" >change cursor</span>
  <br/>
  <span style="color: white" :style="cursorStyleTemplate" >change cursor</span>
  <br/>
  <span style="color: white" :style="cursorStyleAdd" >change cursor</span>
</template>

Vite building will ignore SVG files and remove styles about them when vue get asset url only used in style. Though I can move it to publicDir, there may be many SVGs in a project and it's meaningless to distinguish whether they are imported by javascript or not, as the former cannot be placed in publicDir and will be packaged correctly.

Reproduction

https://stackblitz.com/edit/vitejs-vite-ggraezvb

Steps to reproduce

Run npm run dev, move your cursor over the text, it will change to SVG style.
Run cd dist, http-server, move your cursor over the text, it will change to default text edit cursor style.

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Xeon(R) CPU E5-2620 v2 @ 2.10GHz
    Memory: 7.03 GB / 17.97 GB
Binaries:
    Node: 20.15.0 - C:\Software\nodejs\node.EXE
    npm: 10.7.0 - C:\Software\nodejs\npm.CMD
Browsers:
    Edge: Chromium (131.0.2903.112)
    Internet Explorer: 11.0.19041.3636

Used Package Manager

npm

Logs

No response

Validations

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant