How to import svg file?

[professorDuan]

import Logo from "react:~assets/logo.svg"
It will throw an error: Unknown url scheme or pipeline 'react:'

[louisgv]

This feature is only available in https://github.com/PlasmoHQ/plasmo/releases/tag/v0.62.0 - can you check which version of Plasmo are you using?

[professorDuan]

The above problem is solved, but I found another problem: many svg files cannot be displayed properly after being imported.

[louisgv]

Can you elaborate with screenshot/example SVG?

[professorDuan]

<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_5483_278)">
<rect x="6" y="5" width="40" height="40" rx="20" fill="white"/>
<path d="M38.026 33.6176C38.9197 33.6176 39.6442 32.8961 39.6442 32.0061C39.6442 31.116 38.9197 30.3945 38.026 30.3945C37.1323 30.3945 36.4078 31.116 36.4078 32.0061C36.4078 32.8961 37.1323 33.6176 38.026 33.6176Z" fill="#486BFF"/>
<path d="M13.2591 32.6258C13.4173 31.1472 13.74 29.6907 14.2213 28.2831C14.699 26.8722 15.3451 25.5235 16.1459 24.2662C16.558 23.6243 17.0289 23.0217 17.5524 22.4661C18.1005 21.8764 18.742 21.38 19.4512 20.9967C19.8334 20.7956 20.2413 20.6473 20.6637 20.5559C21.1041 20.4611 21.5577 20.4427 22.0044 20.5016C22.1167 20.5144 22.2257 20.5367 22.3364 20.5591C22.4491 20.5854 22.5605 20.6174 22.67 20.6549C22.8865 20.7277 23.0955 20.8213 23.2939 20.9344C23.6681 21.1522 24.0067 21.4259 24.2978 21.7458C24.8192 22.3351 25.2357 23.0086 25.5295 23.7375C25.8147 24.4213 26.0443 25.1269 26.2159 25.8474C26.3875 26.5549 26.5142 27.2657 26.6137 27.9796C26.6602 28.3374 26.7019 28.6951 26.7323 29.0577C26.7468 29.2398 26.758 29.4203 26.7644 29.6071C26.7644 29.7014 26.7644 29.7956 26.7644 29.8962C26.7644 29.9968 26.7644 30.0863 26.7532 30.1805C26.7279 30.9685 26.5039 31.7374 26.1021 32.4166C25.8852 32.7672 25.6032 33.0735 25.2713 33.319C24.9276 33.5707 24.5285 33.7368 24.1072 33.8035C23.6859 33.8701 23.2547 33.8355 22.8496 33.7023C22.4501 33.5674 22.0861 33.3447 21.7847 33.0507C21.4954 32.7638 21.2563 32.4307 21.0774 32.0652C20.9057 31.7101 20.7812 31.3343 20.707 30.9472C20.6345 30.5729 20.598 30.1927 20.5979 29.8116C20.5979 29.4474 20.5979 29.0849 20.6204 28.7239C20.6618 28.0002 20.747 27.2796 20.8754 26.5661C21.1343 25.1368 21.5478 23.7397 22.1087 22.399C22.6721 21.0433 23.3911 19.757 24.2513 18.5658C25.1318 17.3775 26.1758 16.2595 27.5182 15.4114C28.2173 14.9622 28.9937 14.6455 29.8084 14.477C30.6586 14.3282 31.5295 14.3423 32.3744 14.5185C33.2254 14.7013 34.0305 15.0533 34.7415 15.5535C35.4282 16.0384 36.038 16.6231 36.5506 17.2881C37.5578 18.5818 38.2201 20.0192 38.7189 21.4695C39.2073 22.9191 39.5474 24.4143 39.7341 25.932V25.948C39.7968 26.4499 39.6568 26.9562 39.3447 27.3553C39.0327 27.7544 38.5742 28.0138 38.0702 28.0762C37.5661 28.1387 37.0578 27.9992 36.657 27.6885C36.2563 27.3777 35.9959 26.9211 35.9331 26.4192C35.9238 26.3407 35.9185 26.2618 35.9171 26.1828C35.923 24.8989 35.7945 23.618 35.5338 22.3607C35.2994 21.1468 34.866 19.9796 34.2508 18.906C33.6382 17.895 32.8186 17.114 31.7826 16.7642C31.5188 16.6728 31.2464 16.6086 30.9695 16.5725C30.7008 16.5314 30.4277 16.5277 30.158 16.5613C29.582 16.6414 29.0259 16.8266 28.5173 17.1076C27.4284 17.6858 26.4324 18.585 25.5776 19.5944C24.712 20.6253 23.9768 21.7582 23.3885 22.9676C22.7834 24.1823 22.3237 25.4635 22.0189 26.7849C21.8681 27.4464 21.7609 28.1171 21.6981 28.7926C21.666 29.1296 21.6436 29.4682 21.6356 29.8068C21.6225 30.1271 21.6397 30.448 21.6869 30.7651C21.7847 31.3832 22.0173 31.9774 22.4342 32.3862C22.6292 32.5899 22.8708 32.7437 23.1383 32.8343C23.4058 32.925 23.6914 32.9499 23.9706 32.9069C24.2524 32.8489 24.5181 32.7306 24.7493 32.5602C24.9805 32.3897 25.1718 32.1712 25.3098 31.9199C25.6071 31.3707 25.7625 30.7565 25.7621 30.1326C25.7621 30.0527 25.7621 29.9729 25.7621 29.8914C25.7621 29.81 25.7621 29.7317 25.7492 29.6551C25.738 29.4953 25.7187 29.3228 25.6995 29.1551C25.6594 28.8197 25.6065 28.4827 25.5391 28.1473C25.4133 27.4772 25.2451 26.8157 25.0355 26.1668C24.8376 25.5304 24.5837 24.9125 24.277 24.3205C23.9992 23.7641 23.6331 23.2561 23.1928 22.8159C22.9968 22.6275 22.7729 22.4702 22.5289 22.3495C22.3041 22.2435 22.0616 22.1802 21.8136 22.1627C21.2819 22.1323 20.7539 22.2673 20.3028 22.5492C19.7872 22.8638 19.3258 23.2591 18.9364 23.7199C18.518 24.2082 18.1454 24.7338 17.8234 25.2899C17.1653 26.4373 16.6483 27.6594 16.2838 28.9299C15.9056 30.1966 15.6679 31.5008 15.5749 32.8191C15.5701 32.9745 15.534 33.1273 15.4686 33.2685C15.4032 33.4096 15.3099 33.5363 15.1944 33.6408C15.0788 33.7453 14.9433 33.8256 14.7959 33.8768C14.6485 33.928 14.4923 33.9492 14.3365 33.939C14.1807 33.9288 14.0286 33.8875 13.8892 33.8175C13.7498 33.7475 13.626 33.6502 13.5252 33.5316C13.4243 33.4129 13.3485 33.2752 13.3023 33.1267C13.256 32.9783 13.2402 32.822 13.2559 32.6673C13.2563 32.6535 13.2574 32.6396 13.2591 32.6258Z" fill="url(#paint0_linear_5483_278)"/>
<rect x="6.5" y="5.5" width="39" height="39" rx="19.5" stroke="#E5E6EB"/>
</g>
<defs>
<filter id="filter0_d_5483_278" x="0" y="0" width="52" height="52" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="3"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0682353 0 0 0 0 0.157647 0 0 0 0 0.3 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5483_278"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5483_278" result="shape"/>
</filter>
<linearGradient id="paint0_linear_5483_278" x1="12.5053" y1="24.1384" x2="39.7389" y2="24.1384" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF00FF"/>
<stop offset="1" stop-color="#254EFF"/>
</linearGradient>
</defs>
</svg>

[professorDuan]

I have another problem and don't know how to solve it.
How to use custom html element tags in plasmo?The traditional definition method(window.customElements.define) is invalid.