Open zhuozhiyongde opened 1 year ago
你一开始是怎么做的呢,是封装成一个svgIcon组件使用?可否贴一下代码。另外,直接把 svg 代码嵌入html,确实是有问题,需要这样写才生效:
<template>
<div v-html="svgCode"></div>
</template>
<script setup>
import { ref } from 'vue'
const svgCode = ref(`<svg t="1692163553760" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4254" width="32" height="32"><path d="M16.943988 16.886615C3.127666 31.214652 0.569088 37.35524 0.569088 58.33558v25.074065l213.385411 214.408842 213.385411 214.408843-199.569089 200.59252c-110.018857 110.018857-206.221392 208.268255-213.385411 217.479136-20.468625 25.585781-18.933478 53.218424 3.582009 75.733911 22.515487 22.515487 50.14813 24.050634 75.733911 3.58201 9.210881-7.164019 107.460279-103.366554 217.479136-213.385412L512.284702 596.14869l201.104236 200.080805c110.018857 110.018857 208.268255 206.221392 217.479136 213.385412 25.585781 20.468625 53.218424 18.933478 75.733911-3.58201 22.515487-22.515487 24.050634-50.14813 3.58201-75.733911-7.164019-9.210881-103.366554-107.460279-213.385412-217.990851L596.717778 511.715614l200.080805-201.104236c110.018857-110.018857 206.221392-208.268255 213.385412-217.479136 22.003771-27.120928 16.886615-63.964452-11.76946-86.479939-4.093725-3.582009-18.933478-6.652303-32.749799-6.652303h-25.585781l-213.897126 213.385411L512.284702 426.770822 298.387575 213.385411 84.490449 0h-25.585781C36.389181 0 31.272025 2.046862 16.943988 16.886615z" p-id="4255"></path></svg>`)
</script>
这两种写法都不行:
<template>
<div class="flex h-20 w-full items-center justify-between bg-white px-10">
<img src="@/assets/chat.png" alt="logo" class="h-6" />
<span class="font-bold text-neutral-700">Cheat GPT</span>
<button
type="button"
class="m-1 h-6 w-6 rounded-full fill-neutral-500 shadow-sm ring-inset ring-gray-300 hover:bg-gray-50 hover:ring-1">
<XMarkIcon class="m-1 h-6 w-6" />
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 32 32"
class=""
height="32"
width="32">
<path
d="M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4l6.6 6.6L8 22.6L9.4 24l6.6-6.6l6.6 6.6l1.4-1.4l-6.6-6.6L24 9.4z"
fill="currentColor"></path>
</svg>
</button>
</div>
</template>
<script setup>
import { XMarkIcon } from '@heroicons/vue/24/solid';
</script>
目前在content_scripts中,是会存在这样的问题,暂时还没找到解决方案。不过,如果在popup中使用,是没有问题的。
如题,现在的 crx-vue-drawer 模式下无法正常渲染 svg,我起初以为这是图标库的原因,后来发现直接把 svg 代码嵌入html也不会得到渲染,以下是一个对比: 左侧为正常的Vue项目渲染得到的网页,右侧为 crx 插件渲染得到的 html:![Cleanshot-2023-08-15-at-18 01 43](https://github.com/Jervis2049/vite-plugin-crx-mv3/assets/36695271/96ed8b78-3fd2-4bea-85ef-fb66562b258d)