VSCode/ADS扩展加载SVG被拒，图标显示异常求助

问题概述 #

开发基于Vue/Quasar的VSCode/Azure Data Studio Webview扩展时，遇到以下图标加载异常：

• 替换本地Material Icons字体为Vue默认图标后，已通过调整CSP解决JS/CSS加载错误，但Quasar组件内嵌的SVG图标（含自定义icons.svg）无法正常显示
• Quasar默认图标仅显示字面名称而非图标（截图：）
• 当前CSP配置：

<meta http-equiv="Content-Security-Policy" content="default-src 'self';
script-src vscode-resource: vscode-webview: 'self' 'unsafe-inline' 'unsafe-eval' https:;
style-src vscode-resource: vscode-webview: 'self' 'unsafe-inline';
img-src vscode-resource: vscode-webview: 'self' "/>

解决方案 #

1. 调整CSP规则以支持SVG资源 #

Quasar的SVG图标（包括自定义文件）需要额外的CSP权限，修改meta标签中的配置：

<meta http-equiv="Content-Security-Policy" content="default-src 'self';
script-src vscode-resource: vscode-webview: 'self' 'unsafe-inline' 'unsafe-eval' https:;
style-src vscode-resource: vscode-webview: 'self' 'unsafe-inline';
img-src vscode-resource: vscode-webview: 'self' data:;
font-src vscode-resource: vscode-webview: 'self' data:;
"/>

• 添加data:到img-src：允许加载内联SVG和base64编码的图标资源，这是Quasar内嵌SVG的核心依赖
• 添加font-src规则：确保图标字体 fallback（若存在）能正常加载

2. 验证Quasar图标配置正确性 #

• 确认已正确安装并导入Quasar图标集：

// 在quasar.conf.js或Vue入口文件中
import '@quasar/extras/material-icons/material-icons.svg'

• 自定义图标需注册后使用：

import { registerIconSet } from 'quasar'
// 替换为你的自定义图标路径
registerIconSet('custom-icons', {
  svg: require('./assets/icons.svg')
})

• 使用q-icon组件时指定正确的图标命名：

<!-- Quasar默认图标 -->
<q-icon name="material-icons:home" />
<!-- 自定义图标 -->
<q-icon name="custom-icons:my-custom-icon" />

3. 适配VSCode Webview资源路径 #

VSCode Webview中本地资源必须通过vscode-resource:协议访问，确保自定义icons.svg的路径已正确转换：

// 扩展主进程中获取资源URI
const extensionUri = context.extensionUri;
const iconSvgUri = vscode.Uri.joinPath(extensionUri, 'src', 'assets', 'icons.svg').with({ scheme: 'vscode-resource' });
// 将该URI传递到Webview的HTML模板中使用

4. 检查内联SVG兼容性 #

若Quasar使用内联SVG渲染图标，确保CSP规则未限制data:协议，无需额外添加unsafe-hashes，优先通过Quasar官方配置确保SVG以合规方式加载。

内容的提问来源于stack exchange，提问作者AntoineFra