How to use svg in Vue standalone script without build step-CodePudding

I'm trying to use Vue as a standalone script in an HTML file, but it's causing my inline svg icons to just become solid filled squares. I've tried both Vue 2 and Vue 3 as standalone scripts and both give the same behavior.

Although I've found solutions to Vue's svg issues that involve webpack loader configuration, I'm looking for a way to resovle the svg issues without any build step and only using Vue as a standalone script.

Note that the icon svg is copied directly from Carbon Design Icons

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/vue@3"></script>
  </head>

  <body>
    <div id="app">
      {{message}}
      <svg
        id="icon"
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
      >
        <defs>
          <style>
            .cls-1 {
              fill: none;
            }
          </style>
        </defs>
        <path
          d="M16,8a5,5,0,1,0,5,5A5,5,0,0,0,16,8Zm0,8a3,3,0,1,1,3-3A3.0034,3.0034,0,0,1,16,16Z"
        />
        <path
          d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM10,26.3765V25a3.0033,3.0033,0,0,1,3-3h6a3.0033,3.0033,0,0,1,3,3v1.3765a11.8989,11.8989,0,0,1-12,0Zm13.9925-1.4507A5.0016,5.0016,0,0,0,19,20H13a5.0016,5.0016,0,0,0-4.9925,4.9258,12,12,0,1,1,15.985,0Z"
        />
        <rect
          id="_Transparent_Rectangle_"
          data-name="&lt;Transparent Rectangle&gt;"
          
          width="32"
          height="32"
        />
      </svg>
    </div>
    <div>
      Icon outside of Vue
      <svg
        id="icon2"
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
      >
        <defs>
          <style>
            .cls-2 {
              fill: none;
            }
          </style>
        </defs>
        <path
          d="M16,8a5,5,0,1,0,5,5A5,5,0,0,0,16,8Zm0,8a3,3,0,1,1,3-3A3.0034,3.0034,0,0,1,16,16Z"
        />
        <path
          d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM10,26.3765V25a3.0033,3.0033,0,0,1,3-3h6a3.0033,3.0033,0,0,1,3,3v1.3765a11.8989,11.8989,0,0,1-12,0Zm13.9925-1.4507A5.0016,5.0016,0,0,0,19,20H13a5.0016,5.0016,0,0,0-4.9925,4.9258,12,12,0,1,1,15.985,0Z"
        />
        <rect
          id="_Transparent_Rectangle_"
          data-name="&lt;Transparent Rectangle&gt;"
          
          width="32"
          height="32"
        />
      </svg>
    </div>
  </body>
  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          message: "Hello Vue!"
        };
      }
    }).mount("#app");
  </script>
</html>

https://codesandbox.io/s/wonderful-albattani-dxkvdt?file=/index.html:0-2221

CodePudding user response：

change fill:none to fill:transparent

CodePudding user response：

This ended up not being a Vue issue, but a problem in the SVG code copied from an icon library. Estus Flask spotted that the style tag inside the SVG defs was likely the problem because it can cause inconsistent behavior in different scenarios, such as whether or not the inline svg style is contained within a div managed by Vue. The solution was moving that style class to a separate stylesheet.