如题，现在的 crx-vue-drawer 模式下无法正常渲染 svg，我起初以为这是图标库的原因，后来发现直接把 svg 代码嵌入html也不会得到渲染，以下是一个对比：

这两种写法都不行： <div class="highlight highlight-text-html-vue notranslate position-relat

目前在content_s中，是会存在这样的问题，暂时还没找到解决方案。不过，如果在popup中使用，是没有问题的。

svg 无法渲染 about vite-plugin-crx-mv3 HOT 3 OPEN

jervis2049 commented on June 4, 2024

svg 无法渲染

from vite-plugin-crx-mv3.

Comments (3)

Jervis2049 commented on June 4, 2024

你一开始是怎么做的呢，是封装成一个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>

from vite-plugin-crx-mv3.

zhuozhiyongde commented on June 4, 2024

这两种写法都不行：

<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>