0

Below is the icon that I am using, it appears as an empty space:

const giftIcon = `<svg width="25" height="24" viewBox="0 0 25 24">
                    <defs>
                        <path d="M15.786 0a2.786 2.786 0 0 1 2.785 2.786v7.428A2.786 2.786 0 0 1 15.786 13H.929A.929.929 0 0 1 0 12.071V8.357h.929c.979 0 1.78-.757 1.852-1.718l.005-.139c0-.98-.758-1.781-1.719-1.852L.93 4.643H0V.929C0 .416.416 0 .929 0h14.857zm0 .929H.929v2.785l.206.008A2.79 2.79 0 0 1 3.71 6.369l.005.165-.007.173A2.786 2.786 0 0 1 1.09 9.28l-.161.005v2.785h14.857c.979 0 1.78-.757 1.852-1.718l.005-.139V2.786A1.857 1.857 0 0 0 15.786.929zM5.649 9.75c.299 0 .541.208.541.464v.929c0 .256-.242.464-.541.464-.3 0-.542-.208-.542-.464v-.929c0-.256.243-.464.542-.464zm7.906-3.33c.828 0 1.48.626 1.48 1.487 0 .86-.652 1.479-1.48 1.479-.844 0-1.487-.618-1.487-1.48 0-.86.643-1.487 1.487-1.487zm.903-2.984-4.246 5.85H9.26l4.245-5.85h.953zm-8.81 3.528c.3 0 .542.208.542.465v.928c0 .257-.242.464-.541.464-.3 0-.542-.207-.542-.464V7.43c0-.257.243-.465.542-.465zm7.907.182c-.35 0-.769.251-.769.76 0 .51.418.753.77.753.342 0 .751-.242.751-.752s-.41-.76-.752-.76zm-3.376-3.81c.827 0 1.48.626 1.48 1.487 0 .86-.653 1.48-1.48 1.48-.844 0-1.488-.62-1.488-1.48s.644-1.488 1.488-1.488zm-4.53.843c.299 0 .541.207.541.464v.928c0 .257-.242.465-.541.465-.3 0-.542-.208-.542-.465v-.928c0-.257.243-.464.542-.464zm4.53-.117c-.351 0-.769.251-.769.761s.418.752.769.752c.343 0 .752-.242.752-.752s-.41-.76-.752-.76zm-4.53-2.67c.299 0 .541.209.541.465v.929c0 .256-.242.464-.541.464-.3 0-.542-.208-.542-.464v-.929c0-.256.243-.464.542-.464z" id="a"/>
                    </defs>
                    <g fill="none" fill-rule="evenodd">
                        <path fill="none" d="M.5 0h24v24H.5z"/>
                        <use fill="#56707A" fill-rule="nonzero" xlink:href="#a" transform="translate(3.214 5.5)"/>
                    </g>
                  </svg>`;
2
  • 2
    I see it when I paste your code here.
    – Rob Moll
    Commented Nov 13, 2021 at 21:16
  • 1
    Is that your exact code? Are you trying to put the SVG in a javascript string? Commented Nov 14, 2021 at 11:09

1 Answer 1

0

There are two issues I think. First you need to add the namespace to the svg element, xmlns='http://www.w3.org/2000/svg'. Second 'xlink:href' has been deprecated, so change the attribute name to 'href' and it should work.

Not the answer you're looking for? Browse other questions tagged or ask your own question.