The formatting in the svg rendering from the object is not displaying correctly

I am working with a set of SVGs stored 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>
        `
    }

However, when I try to call the icon.facebook, the SVG code gets escaped with backslashes and new lines. Any ideas on how to fix this?

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

Answer №1

Nunjucks has default HTML escaping, but you can disable it by using the safe filter:

{{ myvariable | safe }}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to pass multiple IDs into document.getElementById?

I am working on a form that contains 45 dropdown lists and currently, I am using the following code for validation. Is there a way to modify this code so that I can use a single function to validate all 45 dropdown lists? Below is the Function: function ...

javascripthtml

React with TypeScript: The struggle of getting LocalStorage to work

Currently, I am dealing with persistence in a todo application developed using React and TypeScript. To achieve the desired persistence, I have implemented localStorage. Allow me to share some code snippets: const [todos, setTodos] = useState<todoMod ...

javascriptreactjstypescriptlocal-storagereact-typescript

Tips for incorporating additional filter criteria into a jquery script

I am currently utilizing a jQuery script to filter data based on date periods. However, I now need to include an additional filtering criteria for the "POSITION" column. Since I lack expertise in jQuery, I would rather accomplish this using plain vanilla J ...

javascripthtml

Troubleshooting: Issues with executing a PHP script from jQuery

I found the source code on this website: It's an amazing resource, but I'm facing an issue where my JavaScript doesn't seem to be executing the PHP script... When I set a breakpoint in Chrome's debugger before the penultimate line (}) ...

phpjavascriptjquerymysql

Guide to utilizing Materialize with Angular 2

For the past 2 days, I've been struggling with an issue. I'm fairly new to Angular 2 and I'm attempting to use Materialize with Angular 2. I managed to resolve a couple of errors that were asking me to update the TypeScript version, which I ...

javascriptangularangular2-template

Chrome has some issues with resizing the SVG Pattern element

Utilizing inline svgs, I have a svg circle filled with a pattern that should cover 100% of the container size. However, when the parent element is resized via JavaScript, the pattern no longer reflects the 100% width and height as expected. This issue seem ...

javascripthtmlcssgoogle-chromesvg

Setting the default date in angular-bootstrap-datetimepicker: a step-by-step guide

I am currently utilizing the angular-bootstrap-datetimepicker module for allowing users to choose a date and time. How can I set a default date and time when the view initially renders? Is there an attribute available that allows us to assign a boolean val ...

javascriptangularjstwitter-bootstrap

JavaScript scripts are unable to function within an Angular directive's template due to compatibility issues

I'm facing an issue with a directive (function (angular) { 'use strict'; function digest(factory) { var directive = { restrict: 'E', templateUrl: '/js/app/digest/templates/digest.tem ...

javascriptangularjsnode.js

Mastering SVG Path Coordinates using Pure JavaScript

Is it possible to target and manipulate just one of the coordinate numbers within an SVG path's 'd' attribute using JavaScript? For example, how can I access the number 0 in "L25 0" to increment it for animating the path? function NavHalf ...

javascriptsvg

Sophisticated solution for html5 video fallback with JavaScript

My Django website allows users to upload videos in mp4 format for others to watch. However, there are cases where certain browsers cannot play this format, like Firefox. In such scenarios, I want to provide a fallback option to download the video instead o ...

javascriptdjangohtml5-video

How to Disable a Dynamically Generated <li> Element Using jQuery on Click Event

Script Query: Creating <li> Elements Dynamically echo '<div class="pagination"><ul>' . "\n"; // Previous Post Link. if ( get_previous_posts_link() ) { printf( '<li>%s</li>' . "\n", get_previ ...

javascriptjqueryhtml

Utilize Javascript to establish a fresh attribute by analyzing other attributes contained in an array within the object

Currently, I am working on a data structure that looks like this: masterObject: { Steps: [ { step: { required: false, }, step: { required: false, }, step: { required: false, }, }, ] } ...

javascriptangularjsloopsforeach

What is the url of the file at input.files[i]?

I've encountered an issue with my JavaScript code. Currently, when a user uploads a file, the code grabs the file name. However, I need it to fetch the file's URL on the user's PC instead. How can I implement this? This is my code snippet: ...

javascript

FlexSlider in WordPress is failing to display captions

Before pointing out any similar questions, please note that the answer from those sources does not apply to my specific code. I am trying to achieve this through a function as outlined here But I am struggling to figure out how to add captions only if th ...

javascriptphpjquerywordpressflexslider

Encountering a 'scheduler flush execution error' and an Uncaught TypeError due to VueJS and Axios integration

After carefully examining my code, I have pinpointed the cause of this error to the following line: treeNodes.value = documentStore.convertToTree((await axios.get('/File')).data); Initially, I receive a warning: Vue warn]: Unhandled error during ...

javascripttypescriptvue.jsasynchronousaxios

The Vue JS Router is prominently displayed in the center of the webpage

I have been delving into Vue JS and working on constructing an app. I've implemented vue router, however, it seems to be causing the content within the routed component to display with excessive margins/padding. I've attempted various solutions s ...

javascriptvue.jsvuejs2

Storing data with jQuery

Looking to store objects in jQuery for events. Each event will have a date, title, and some text that needs to be stored in an array. Wondering if using a multi-dimensional array would be the best way to go so I can easily iterate through them with a count ...

javascriptjqueryarraysobject

NestJS is having trouble importing generated types from the Prisma client

When working with Prisma in conjunction with NestJs, I encountered an issue after defining my model and generating it using npx prisma generate. Upon importing the generated type, I can easily infer its structure: import { FulfilmentReport, FulfilmentRepor ...

javascriptnode.jstypescriptnestjsprisma

Enhancing the performance of a node.js Falcor router connecting a traditional REST API data source with a Falcor client

In my current setup, I have a traditional REST API that provides data in the following format: List of Users - GET /users.json users: [ {id: 0, name: "John Smith"}, ... ] User Details by Id - GET /users/0.json user: { id: 0, name: "Joh ...

javascriptnode.jsrestfalcorfalcor-router

Leverage a nearby module with a local dependency

My current challenge involves integrating a local library into my project. I have been following two tutorials: how to create a library and how to consume a local library. Despite having a well-structured sample library with package.json and index.ts, I am ...

javascriptnode.jstypescriptnpm