From 0c0aeaeb3f12d2cdc3c47557da209416c8d48fb7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=B1=84=EC=A4=80=20-=20CJ=20Lee?= Date: Sat, 2 Mar 2024 23:51:25 -0800 Subject: [PATCH] docs(assets): add note to inlining SVG through url() (#15534) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 翠 / green --- docs/guide/assets.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/guide/assets.md b/docs/guide/assets.md index dff926f2c2da31..657db9de24fca0 100644 --- a/docs/guide/assets.md +++ b/docs/guide/assets.md @@ -30,6 +30,16 @@ The behavior is similar to webpack's `file-loader`. The difference is that the i - TypeScript, by default, does not recognize static asset imports as valid modules. To fix this, include [`vite/client`](./features#client-types). +::: tip Inlining SVGs through `url()` +When passing a URL of SVG to a manually constructed `url()` by JS, the variable should be wrapped within double quotes. + +```js +import imgUrl from './img.svg' +document.getElementById('hero-img').style.background = `url("${imgUrl}")` +``` + +::: + ### Explicit URL Imports Assets that are not included in the internal list or in `assetsInclude`, can be explicitly imported as a URL using the `?url` suffix. This is useful, for example, to import [Houdini Paint Worklets](https://houdini.how/usage).