项目是使用yarn create @quick-start/electron my-app --template svelte创建的，
然后我想在项目中使用antfu/icones的图标库，找了半天发现unocss加载图标很方便，
配置好之后就可以像这样来使用
<i class="material-symbols:add-circle" />
然后我就按照流程配置好，启动项目后发现图标显示不出来，诶就很奇怪
我又新建了一个vite + svelte + unocss + iconify的项目来测试，结果图标就可以正常显示
然后我就研究了一下它这个图标的加载方式，其实就是使用到了-webkit-mask来创建掩码图像
-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M11 17h2v-4h4v-2h-4V7h-2v4H7v2h4Zm1 5q-2.075 0-3.9-.788q-1.825-.787-3.175-2.137q-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175q1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138q1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175q-1.35 1.35-3.175 2.137Q14.075 22 12 22Z'/%3E%3C/svg%3E")
url中就是图标的svg代码，然后在别的项目中就能生效，放到electron-vite的项目中就又不显示，就很奇怪
然后我提取出了electron-vite的网页源代码，单独拉出来测试，结果竟然也不生效
<html>
<head>
<script type="module" src="/@vite/client"></script>
<meta charset="UTF-8" />
<title>Electron</title>
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self' ; script-src 'self'; style-src 'self' 'unsafe-inline'"
/>
</head>
<body>
<div id="app"></div>
</body>
</html>
然后就发现了是这个的问题
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self' ; script-src 'self'; style-src 'self' 'unsafe-inline'"
/>
查了一下这个叫内容安全策略，用于控制网页加载资源的，default-src就是所有资源，script-src就是脚本资源，self表示允许加载同源资源，
所以最终就是这个同源策略影响了url(...)的加载，导致了图标没有显示。
其实控制台上是有报错信息的，我没看...，结果折腾一圈是模板生成的html页面只允许加载同源资源。
标签：3.175,electron,iconify,unocss,2.137,加载,1.35,vite,图标 From： https://www.cnblogs.com/jawide/p/17003502.html