使用electron+vite+svelte+unocss+iconify时遇到的图标无法加载的问题

项目是使用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页面只允许加载同源资源。

posted @ 2022-12-24 22:50  jawide  阅读(959)  评论(0)  编辑  收藏  举报