\n\n### Expected behavior\n\nI hope to use SVG and other methods instead of using masks to display icons, which can avoid frequent redrawing\n\n### System Info\n\n```Text\n\"vitepress\": \"^1.6.4\",\n```\n\n### Additional context\n\n\u003Cimg width=\"2559\" height=\"1042\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/39db5990-f3ee-47bb-8bcf-49272a1918f4\" />\n\n### Validations\n\n- [x] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\n- [x] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [x] Read the [docs](https://vitepress.dev).\n- [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3171],{"name":3172,"color":3173},"bug: pending triage","e99695",4917,"Bug: Frequent triggering of redrawing of navigation bar icons","2025-08-21T09:14:41Z","https://github.com/vuejs/vitepress/issues/4917",0.743499,{"description":3180,"labels":3181,"number":3189,"owner":3152,"repository":3153,"state":3154,"title":3190,"updated_at":3191,"url":3192,"score":3193},"### Describe the bug\r\n\r\nUsage:\r\n```yaml\r\nfeatures:\r\n - icon: \u003Ci class=\"i-carbon-sun\" />\r\n title: Feature A\r\n details: Lorem ipsum dolor sit amet, consectetur adipiscing elit\r\n```\r\n\r\nCheck the feature icon type\r\n```ts\r\ntype FeatureIcon =\r\n | string\r\n | { src: string; alt?: string; width?: string; height: string }\r\n | {\r\n light: string\r\n dark: string\r\n alt?: string\r\n width?: string\r\n height: string\r\n }\r\n```\r\n\r\nI refer to the render logic, use `v-html` render the icon.\r\nDisplay well in `dev` environment, but shows errors in `prod` environment.\r\n\r\n| dev | build |\r\n| ----------- | ----------- |\r\n|  |  |\r\n\r\n\r\n\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/github/zyyv/vitepress-unocss-issue\r\n\r\n- Display right run `pnpm dev`\r\n- Display error run `pnpm build && pnpm preview`\r\n\r\n### Expected behavior\r\n\r\nDev and build behave the same\r\n\r\n### System Info\r\n\r\n```Text\r\nlatest\r\n```\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Validations\r\n\r\n- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.dev).\r\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3182,3185,3188],{"name":3183,"color":3184},"build","377ba8",{"name":3186,"color":3187},"has-workaround","1B4515",{"name":3149,"color":3150},4045,"SSR in dev for more consistent output in dev and prod","2025-03-02T18:08:58Z","https://github.com/vuejs/vitepress/issues/4045",0.74676067,{"description":3195,"labels":3196,"number":3200,"owner":3152,"repository":3153,"state":3201,"title":3202,"updated_at":3203,"url":3204,"score":3205},"### Is your feature request related to a problem? Please describe.\n\nI want user `h1` as my article outline, i can't use theme config to custom my outline\n\n### Describe the solution you'd like\n\nif i have config in my config.js\r\n```js\r\n themeConfig: {\r\n outline: [1,6] || 'all'\r\n}\r\n```\r\nthe title selector should like this\r\n```js\r\ndocument\r\n .querySelectorAll\u003CHTMLHeadingElement>('h1,h2, h3, h4, h5, h6') // include h1 title\r\n .forEach((el) => {\r\n if (el.textContent && el.id) {\r\n updatedHeaders.push({\r\n level: Number(el.tagName[1]),\r\n title: el.innerText.replace(/\\s+#\\s*$/, ''),\r\n link: `#${el.id}`\r\n })\r\n }\r\n })\r\n```\n\n### Describe alternatives you've considered\n\n_No response_\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.vuejs.org).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[3197],{"name":3198,"color":3199},"theme","0754FB",1529,"closed","The levels of header to display in the outline can't support h1 title","2023-08-12T00:04:14Z","https://github.com/vuejs/vitepress/issues/1529",0.72440773,{"description":3207,"labels":3208,"number":3212,"owner":3152,"repository":3153,"state":3201,"title":3213,"updated_at":3214,"url":3215,"score":3216},"### Describe the bug\r\n\r\nI'm getting some errors when running `pnpm build`, I guess it's because I should somehow wrap this component causing the error in `\u003CClientOnly />`, but how should I find the exact cause from the error log? It does not provide any useful details (see below screenshot)\r\n\r\n---\r\n\r\nAnother question, as I guess my error is because of this:\r\nShould I wrap `watch()` inside `onMounted()`? or in another word, can I do it? I didn't find any corresponding example in Vue documentation... \r\nSorry if this is a dumb question, as I'm a react guy :(\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport { useLocalStorage } from '@vueuse/core';\r\nimport { watch } from 'vue';\r\n\r\nconst nfcapiEnvRef = useLocalStorage('vp-nfcapi-env', 'staging', {\r\n deep: false,\r\n listenToStorageChanges: true,\r\n writeDefaults: true\r\n});\r\n\r\nwatch(nfcapiEnvRef, (value, oldValue) => {\r\n const htmlDataSet = document.documentElement.dataset;\r\n oldValue && (htmlDataSet.nfcapiEnv = oldValue.toLowerCase());\r\n htmlDataSet.nfcapiEnv = value.toLowerCase();\r\n}, { immediate: true });\r\n\u003C/script>\r\n```\r\n\r\n---\r\n\r\nScreenshot of the error:\r\n\r\n\r\n\r\n\r\n\r\n### Reproduction\r\n\r\nThis is not a bug, but a question\r\n\r\n### Expected behavior\r\n\r\nN/A\r\n\r\n### System Info\r\n\r\n```sh\r\nSystem:\r\n OS: Windows 10 10.0.19045\r\n CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11900K @ 3.50GHz\r\n Memory: 30.87 GB / 63.84 GB\r\n Binaries:\r\n Node: 18.16.0 - C:\\NodeJS\\node.EXE\r\n Yarn: 1.22.19 - C:\\NodeJS\\yarn.CMD\r\n npm: 9.8.0 - C:\\NodeJS\\npm.CMD\r\n pnpm: 8.6.7 - C:\\NodeJS\\pnpm.CMD\r\n Browsers:\r\n Edge: Spartan (44.19041.1266.0), Chromium (114.0.1823.82)\r\n Internet Explorer: 11.0.19041.1566\r\n npmPackages:\r\n vitepress: ^1.0.0-beta.5 => 1.0.0-beta.5\r\n```\r\n\r\n\r\n### Additional context\r\n\r\nN/A\r\n\r\n### Validations\r\n\r\n- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.dev).\r\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3209],{"name":3210,"color":3211},"question","5D5FAE",2627,"How should I trace build error?","2023-07-24T00:04:51Z","https://github.com/vuejs/vitepress/issues/2627",0.72445697,{"description":3218,"labels":3219,"number":3221,"owner":3152,"repository":3153,"state":3201,"title":3222,"updated_at":3223,"url":3224,"score":3225},"### Is your feature request related to a problem? Please describe.\n\nI hope that when the global outline-level is deep, I can hide specific subheadings in the markdown file.\r\n\r\n\r\nIs there any temporary solution? Thank you\n\n### Describe the solution you'd like\n\nreference:https://docsify.js.org/#/more-pages?id=ignoring-subheaders\r\n\n\n### Describe alternatives you've considered\n\n_No response_\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.dev).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[3220],{"name":3198,"color":3199},4171,"Ignoring Subheaders","2024-09-09T04:42:59Z","https://github.com/vuejs/vitepress/issues/4171",0.72583675,{"description":3227,"labels":3228,"number":3230,"owner":3152,"repository":3153,"state":3201,"title":3231,"updated_at":3232,"url":3233,"score":3234},"### Is your feature request related to a problem? Please describe.\n\nI'd like to be able to customise some navbar links with custom HTML/CSS\n\n### Describe the solution you'd like\n\nRender HTML in navbar links\n\n### Describe alternatives you've considered\n\n_No response_\n\n### Additional context\n\n\u003Cimg width=\"477\" alt=\"Screenshot 2022-11-30 at 11 08 39\" src=\"https://user-images.githubusercontent.com/10400064/204768526-3add748b-1b92-4184-bfd7-15bd4e93e83a.png\">\r\n\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.vuejs.org).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[3229],{"name":3198,"color":3199},1652,"Allow HTML in nav links","2023-08-12T00:04:13Z","https://github.com/vuejs/vitepress/issues/1652",0.72983575,{"description":3236,"labels":3237,"number":3239,"owner":3152,"repository":3153,"state":3201,"title":3240,"updated_at":3241,"url":3242,"score":3243},"### Describe the bug\r\n\r\n\r\n\r\n\r\n\r\n\r\n### Reproduction\r\n\r\nyarn add vitepress\r\n\r\nedit package.json\r\n\r\n~~~\r\n \"scripts\": {\r\n \"docs:dev\": \"vitepress dev docs\",\r\n \"docs:build\": \"vitepress build docs\",\r\n \"docs:serve\": \"vitepress serve docs\"\r\n }\r\n~~~\r\n\r\nyarn docs:dev\r\n\r\n### Expected behavior\r\n\r\nnormal display\r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\r\n OS: Windows 10 10.0.17763\r\n CPU: (8) x64 Intel(R) Xeon(R) CPU E3-1230 V2 @ 3.30GHz\r\n Memory: 3.25 GB / 7.93 GB\r\n Binaries:\r\n Node: 16.5.0 - C:\\Program Files\\nodejs\\node.EXE\r\n Yarn: 1.22.10 - ~\\AppData\\Roaming\\npm\\yarn.CMD\r\n npm: 7.20.5 - C:\\Program Files\\nodejs\\npm.CMD\r\n Browsers:\r\n Chrome: 92.0.4515.107\r\n Edge: Spartan (44.17763.831.0)\r\n Internet Explorer: 11.0.17763.771\r\n npmPackages:\r\n vitepress: ^0.16.1 => 0.16.1\r\n```\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/coc)\r\n- [X] Read the [docs](https://vitepress.vuejs.org/).\r\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3238],{"name":3172,"color":3173},362,"Strange symbols appear","2023-01-21T16:22:12Z","https://github.com/vuejs/vitepress/issues/362",0.73412955,{"description":3245,"labels":3246,"number":3250,"owner":3152,"repository":3153,"state":3201,"title":3251,"updated_at":3252,"url":3253,"score":3254},"### Describe the bug\n\n# Bug\r\nSVG feature icons in the `home` layout expand to fit the width of their feature element, rather than being constrained to the size specified in their `width` declaration.\r\n\r\n\n\n### Reproduction\n\n# Context\r\nGiven the frontmatter\r\n\r\n```\r\n---\r\nlayout: home\r\n\r\nhero:\r\n name: Bug example\r\n\r\nfeatures:\r\n - icon:\r\n src: /flag-solid.svg\r\n width: 50\r\n title: Bug example\r\n details: The icon expands to fit the width of the feature element, rather than being constrained to 50px\r\n---\r\n```\n\n### Expected behavior\n\n# Expected\r\nThe feature icon is expected to size to the width specified by the `width` declaration.\n\n### System Info\n\n```shell\nSystem:\r\n OS: Windows 10\r\n Binaries:\r\n Node: 18.13.0\r\n npm: 8.19.3\r\n Browsers:\r\n Chrome: 109\r\n npmPackages:\r\n vitepress: ^1.0.0-alpha.40 => 1.0.0-alpha.45\n```\n\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.vuejs.org).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3247,3248,3249],{"name":3198,"color":3199},{"name":3186,"color":3187},{"name":3149,"color":3150},1886,"SVG icons in `feature` elements do not respect their size setting","2023-08-14T00:04:27Z","https://github.com/vuejs/vitepress/issues/1886",0.73684543,["Reactive",3256],{},["Set"],["ShallowReactive",3259],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fD9h3CVvQc-qQpwlmejyqHhr6OzIuIrO8eVwpnaAoAIM":-1},"/vuejs/vitepress/2298"]