Я пытаюсь импортировать и визуализировать SVG в Svelte.
Я использую @ rollup / plugin-url для импорта кода SVG следующим образом:
<script>
import arrowCircle from "heroicons/dist/solid-sm/sm-arrow-circle-up.svg"
</script>
<main>
<object title="Arrow Circle" type="image/svg+xml" data={arrowCircle}></object>
</main>
Теперь это работает (с точки зрения ввода контента SVG), но отображает следующий экран:
В идеале я хотел бы использовать элемент <object />, чтобы я мог применять классы к SVG, но, учитывая ошибку, я думал, что у меня будет go с тегом <img />, чтобы увидеть, это, по крайней мере, визуализировало бы SVG, но вместо этого получило следующее:
<img src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22currentColor%22%3E%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M10%2018a8%208%200%20100-16%208%208%200%20000%2016zm3.707-8.707l-3-3a1%201%200%2000-1.414%200l-3%203a1%201%200%20001.414%201.414L9%209.414V13a1%201%200%20102%200V9.414l1.293%201.293a1%201%200%20001.414-1.414z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E">
Я также попробовал просто {arrowCircle}, но это преобразовало вышеуказанное изображение src в простой текст.
Из чего Я могу сказать, что это связано с префиксом data, который является частью необработанного импорта.
Мне известно о плагине codefeathers / rollup-plugin-svelte-svg , но хотелось бы иметь возможность сделать это без другого плагина, если это возможно, или хотя бы понять, что происходит.
Для справки SV G действительны как в <img /> тегах, так и в <object /> согласно этой статье .