New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styled SVGs are losing their CSS on webpack #9122

Closed
allanchua101 opened this Issue Nov 29, 2018 · 1 comment

Comments

Projects
None yet
2 participants
@allanchua101

allanchua101 commented Nov 29, 2018

Hi Guys,

I am trying to load this American Express Icon (SVG) as a component on our VueJS App and I am getting this message:

- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.

Question: Will moving this style components inside the SVG on a sass file work? What do you think could be the best approach in loading SVG icons that could be styled by targeting the paths without using img tag?

<template>
<svg id="Icon_American_Express" data-name="Icon American Express" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 27.143 19">
  <defs>
    <style>
      .cls-1, .cls-2 {
        fill: none;
      }

      .cls-1 {
        clip-rule: evenodd;
      }

      .cls-3 {
        clip-path: url(#clip-path);
      }

      .cls-4 {
        clip-path: url(#clip-path-2);
      }

      .cls-5 {
        fill: #007dcd;
      }

      .cls-6 {
        clip-path: url(#clip-path-3);
      }

      .cls-7 {
        fill: #fff;
      }
    </style>
    <clipPath id="clip-path">
      <path id="Path_1272" data-name="Path 1272" class="cls-1" d="M50-11.438A2.567,2.567,0,0,1,52.578-14H74.565a2.578,2.578,0,0,1,2.578,2.562V2.438A2.567,2.567,0,0,1,74.565,5H52.578A2.578,2.578,0,0,1,50,2.438Z" transform="translate(-50 14)"/>
    </clipPath>
    <clipPath id="clip-path-2">
      <path id="Path_1271" data-name="Path 1271" class="cls-2" d="M-28,209.071H600.357V-42H-28Z" transform="translate(28 42)"/>
    </clipPath>
    <clipPath id="clip-path-3">
      <path id="Path_1275" data-name="Path 1275" class="cls-1" d="M73.027-2.889H71.835v-.588h1.04s.379.043.379-.2c0-.23-.567-.212-.567-.212s-.924.078-.924-.761a.766.766,0,0,1,.835-.787H73.88v.6H72.848s-.357-.07-.357.182c0,.211.487.181.487.181S74-4.552,74-3.783a.826.826,0,0,1-.892.9c-.05,0-.081,0-.081,0Zm-5.945,0V-5.434H69.17v.592H67.756v.393h1.38v.58h-1.38v.433H69.17v.553Zm3.584,0H69.474v-.588h1.045s.375.043.375-.2c0-.23-.567-.212-.567-.212s-.924.078-.924-.761a.766.766,0,0,1,.835-.787h1.286v.6H70.488s-.358-.07-.358.182c0,.211.486.181.486.181s1.023-.073,1.023.7a.826.826,0,0,1-.892.9c-.051,0-.081,0-.081,0Zm-9.03,0h-.585l-.71-.757-.714.757H57.138V-5.442h2.437l.768.812.772-.808h.513v0h1.624a.735.735,0,0,1,.848.751c0,.752-.282.986-1.147.986H62.3v.821ZM60.8-4.141l.83.89V-5.028l-.83.886Zm-2.986.7h1.41l.661-.7-.661-.7h-1.41v.393h1.375v.58H57.812v.432ZM62.3-4.371h.692c.2,0,.366-.108.366-.242s-.165-.242-.366-.242H62.3v.484ZM66.1-2.88v-.5a.425.425,0,0,0-.447-.389H65v.886h-.67V-5.434h1.625a.728.728,0,0,1,.848.747.653.653,0,0,1-.375.6.625.625,0,0,1,.321.579v.631ZM65-4.367h.692c.2,0,.366-.108.366-.242s-.165-.242-.366-.242H65v.484Zm-.5-2.009h.673V-8.938H64.5Zm-5.187-.009V-8.938H61.4v.6H59.985v.393h1.379v.579H59.985v.433H61.4v.553Zm-1.049,0V-8.148l-.839,1.763h-.549l-.844-1.755v1.755H54.709l-.232-.536H53.254l-.237.536h-.732L53.4-8.938h.942l1.018,2.347V-8.938h1.058l.736,1.586.732-1.586h1.058v2.554ZM53.54-7.573h.652l-.326-.76ZM71.415-6.384,70.354-8.091v1.707H69.042l-.237-.536H67.582l-.232.536H66.3a1.12,1.12,0,0,1-.9-1.206c0-1.418,1.022-1.361,1.057-1.37l.826.021v.575l-.678.009s-.442,0-.5.558c-.006.064-.009.123-.008.177a.559.559,0,0,0,.8.587l.83-1.906h.937l1,2.316V-8.938h.946l1.049,1.681V-8.938h.674v2.554ZM67.868-7.573h.652l-.321-.76-.33.76ZM63.515-6.384v-.5a.424.424,0,0,0-.446-.389h-.652v.886h-.67V-8.938h1.625a.728.728,0,0,1,.848.748.653.653,0,0,1-.375.6.625.625,0,0,1,.326.579v.631Zm-1.1-1.487h.692c.2,0,.366-.108.366-.242s-.165-.242-.366-.242h-.692Z" transform="translate(-52.286 8.96)"/>
    </clipPath>
  </defs>
  <g id="Group_130" data-name="Group 130" class="cls-3" transform="translate(0 0)">
    <g id="Group_129" data-name="Group 129" class="cls-4" transform="translate(-105.857 -38)">
      <path id="Path_1270" data-name="Path 1270" class="cls-5" d="M45-19H85.714V13.571H45Z" transform="translate(54.071 50.214)"/>
    </g>
  </g>
  <g id="Group_132" data-name="Group 132" class="cls-6" transform="translate(3.102 6.84)">
    <g id="Group_131" data-name="Group 131" class="cls-4" transform="translate(-108.959 -44.84)">
      <path id="Path_1273" data-name="Path 1273" class="cls-7" d="M47.286-13.96H82.571V5.691H47.286Z" transform="translate(54.888 52.014)"/>
    </g>
  </g>
</svg>
</template>
@vue-issue-bot

This comment has been minimized.

vue-issue-bot commented Nov 29, 2018

Hello, your issue has been closed because it does not conform to our issue requirements. In order to ensure every issue provides the necessary information for us to investigate, we require the use of the Issue Helper when creating new issues. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment