Search code examples
javascriptnunjuckseleventy

Rendering svg from object contains bad formatting

I have a series of svgs in an object:

icon: {
        facebook: `<svg class="w-6 h-6 fill-current" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M30 15C30 6.71572 23.2843 0 15 0C6.71572 0 0 6.71572 0 15C0 22.4868 5.48525 28.6925 12.6562 29.8178V19.3359H8.84766V15H12.6562V11.6953C12.6562 7.93594 14.8957 5.85938 18.322 5.85938C19.9626 5.85938 21.6797 6.15234 21.6797 6.15234V9.84375H19.7883C17.925 9.84375 17.3438 11.0001 17.3438 12.1875V15H21.5039L20.8389 19.3359H17.3438V29.8178C24.5147 28.6925 30 22.4868 30 15Z" />
        </svg>
        `
    }

When I call the icon.facebook the svg code is escaped with backslashes and new lines?

<svg class="\&quot;w-6" h-6="" fill-current\"="" viewBox="\&quot;0" 0="" 30="" 30\"="" fill="\&quot;none\&quot;" xmlns="\&quot;http://www.w3.org/2000/svg\&quot;">\n        <path d="\&quot;M30" 15c30="" 6.71572="" 23.2843="" 0="" 15="" 0c6.71572="" 15c0="" 22.4868="" 5.48525="" 28.6925="" 12.6562="" 29.8178v19.3359h8.84766v15h12.6562v11.6953c12.6562="" 7.93594="" 14.8957="" 5.85938="" 18.322="" 5.85938c19.9626="" 21.6797="" 6.15234="" 6.15234v9.84375h19.7883c17.925="" 9.84375="" 17.3438="" 11.0001="" 12.1875v15h21.5039l20.8389="" 19.3359h17.3438v29.8178c24.5147="" 30="" 15z\"=""></path>\n        </svg>
Solution

  • Nunjucks escapes HTML by default, to tell it not too, use the safe filter:

    {{ myvariable | safe }}