function encodeSVG(svg) {
  return encodeURIComponent(svg)
    .replace(/%0A/g, '')
    .replace(/%20/g, ' ')
    .replace(/%3D/g, '=')
    .replace(/%3A/g, ':')
    .replace(/%2F/g, '/')
    .replace(/%22/g, '"')
    .replace(/%2C/g, ',')
    .replace(/%25/g, '%');
}

// Your SVG content
const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" width="3rem" height="3rem" fill="#81bffc" viewBox="0 0 16 16" class="bi bi-caret-up-fill"><path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"></path></svg>`;

// Encode the SVG content
const encodedSVG = encodeSVG(svgContent);

// Create the data URL
const dataURL = `url('data:image/svg+xml,${encodedSVG}')`;

// Now you can use `dataURL` as a CSS background-image
console.log(`background-image: ${dataURL};`);