How to pass raw string "<svg width="800" height="450" xmlns..." to component

jpkleemans / vite-svg-loader

Vite plugin to load SVG files as Vue components

MIT License

585 stars 61 forks source link

How to pass raw string "<svg width="800" height="450" xmlns..." to component #88

Closed clabnet closed 1 year ago

clabnet commented 1 year ago

Hello, I have a string returned from server API as is :

<svg width="800" height="450" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewBox="0 0 800 450">
<rect width="800" height="450" x="0" y="0" id="0" fill="rgb(255,255,255)" fill-opacity="0"></rect>
<path d="M80 380.5L720 380.5" fill="none" stroke="#eeeeee"></path>
....

How to pass it to this component ? Thank you

jpkleemans commented 1 year ago

Hi, thanks for your question. You could try to use v-html:

<div v-html="svgStringFromApi"></div>