Tutorial: How to get a hardcoded SVG image that can be used inside the <script> tag

[BenJackGill]

UPDATE:

Quasar SVG strings contain a mix of path, style, transform and viewbox information. And they use various delimiters to seperate them. There can also be multiple paths for each svg.

So I built this function to parse and build a hardcoded SVG from all of that information:

const buildSvg = (quasarSvg: string): string => {
    // Split the input string into definitions and viewBox
    const [def, viewBox] = quasarSvg.split("|");

    // Map each path definition to its attributes
    const nodes = def.split("&&").map((path) => {
        const [d, style, transform] = path.split("@@");
        return { d, style, transform };
    });

    // Generate the SVG string using template literals and the map method
    const svg = `<svg viewBox="${viewBox}">${
        nodes.map(node => `
            <path d="${node.d}" 
            ${node.style ? `style="${node.style}"` : ''} 
            ${node.transform ? `transform="${node.transform}"` : ''}></path>
        `).join('')
    }</svg>`;

    return svg;
};

You can use it like this:

// Import from the Quasar SVG icon set
import { ionHome } from "@quasar/extras/ionicons-v6";

// Convert it to a hardcoded SVG image
const hardCodedSvg = buildSvg(ionHome);

// Use the hardcoded SVG image inside your <script> tag however you need
console.log(hardCodedSvg);

The above code will console log this string:

<svg viewBox="0 0 512 512">
   <path d="M-11.569999999999993,256a267.57,173.44 0 1,0 535.14,0a267.57,173.44 0 1,0-535.14,0Z" 
      style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32;" 
      transform="rotate(-45 256 256.002)"></path>
   <path d="M334.04 177.96L177.96 334.04M278.3 278.3l-44.6-44.6M322.89 233.7l-44.59-44.59M456.68 211.4L300.6 55.32M211.4 456.68L55.32 300.6M233.7 322.89l-44.59-44.59" 
      style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32;"></path>
</svg>

ORIGINAL POST:

I needed a hardcoded HTML img/svg tag to use with apexcharts inside the <script> tag and I had a hard time figuring it out.

But I got there eventually. So if anyone else needs a hardcoded SVG image from the Quasar icon sets this is how you can do it...

The first thing to know is that Quasar store SVG icons as a concatenation of theSVG path data and the viewBox data, using | as a delimiter between those things. See here.

So to get it working you need to import the icon, then split the string based on the | delimiter. That will give you two parts. The first part is the SVG path data, and the second part is the SVG viewBox data.

Then you build the SVG from that.

For example:

// Import the Quasar icon
import { ionHome } from "@quasar/extras/ionicons-v6";

// Get the path and viewBox parts of the string
const ionHomeParts = ionHome.split("|");
const ionHomePath = ionHomeParts[0];
const ionHomeViewBox = ionHomeParts[1];

// Build an SVG from that
const ionHomeSvg = `
  <svg viewBox="${ionHomeViewBox}">
    <path d="${ionHomePath}"></path>
  </svg>
`;

// Then use the hardcoded ionHomeSvg anywhere you need here in the script tag

Hope that helps anyone else who needs a hardcoded SVG image string.