search

jpkleemans / vite-svg-loader

Vite plugin to load SVG files as Vue components
MIT License
555 stars 59 forks source link

Prevent removing <style> element from svg #91

Closed DirectorRen-TV closed 1 year ago

DirectorRen-TV commented 1 year ago

There's a problem with importing some svg's which have some <style> tags. Some search lead me to Vue's compileTemplate function: it just removes all <style> tags because of solution of Vue devs. This issue can be solved by adding an option to get around via replacing <style> with <component is="style"> (in my project i've cloned your package and added svg = svg.replace(/<style/g, '<component is="style"').replace(/<\/style/g, '</component') before compiling template and that works) How it must be icon-1 How it appears icon-2

svg's source 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63 52" width="63" height="52">
  <defs >
    <filter id="prefix__a" x="72.147" y="17.5" width="74" height="35" filterUnits="userSpaceOnUse">
      <feOffset dy="1" id="prefix__feOffset4" />
      <feGaussianBlur stdDeviation=".5" result="b" id="prefix__feGaussianBlur6" />
      <feFlood flood-color="#404040" flood-opacity=".082" id="prefix__feFlood8" />
      <feComposite operator="in" in2="b" id="prefix__feComposite10" result="result1" />
      <feComposite in="SourceGraphic" in2="result1" id="prefix__feComposite12" />
    </filter>
    <filter id="prefix__c" x="143.147" y="17.5" width="46" height="35" filterUnits="userSpaceOnUse">
      <feOffset dy="1" id="prefix__feOffset15" />
      <feGaussianBlur stdDeviation=".5" result="d" id="prefix__feGaussianBlur17" />
      <feFlood flood-color="#404040" flood-opacity=".082" id="prefix__feFlood19" />
      <feComposite operator="in" in2="d" id="prefix__feComposite21" result="result1" />
      <feComposite in="SourceGraphic" in2="result1" id="prefix__feComposite23" />
    </filter>
    <filter id="prefix__e" x="0" y="0" width="42.963" height="70" filterUnits="userSpaceOnUse">
      <feOffset dy="3" id="prefix__feOffset26" />
      <feGaussianBlur stdDeviation="3" result="f" id="prefix__feGaussianBlur28" />
      <feFlood flood-opacity="0" id="prefix__feFlood30" />
      <feComposite operator="in" in2="f" id="prefix__feComposite32" result="result1" />
      <feComposite in="SourceGraphic" in2="result1" id="prefix__feComposite34" />
    </filter>
    <filter id="prefix__g" x="27.364" y="37.18" width="19.848" height="19.848" filterUnits="userSpaceOnUse">
      <feOffset dy="3" id="prefix__feOffset37" />
      <feGaussianBlur stdDeviation="3" result="h" id="prefix__feGaussianBlur39" />
      <feFlood flood-opacity="0" id="prefix__feFlood41" />
      <feComposite operator="in" in2="h" id="prefix__feComposite43" result="result1" />
      <feComposite in="SourceGraphic" in2="result1" id="prefix__feComposite45" />
    </filter>
    <filter id="prefix__i" x="28.18" y="20.696" width="35.516" height="35.516" filterUnits="userSpaceOnUse">
      <feOffset dy="3" id="prefix__feOffset48" />
      <feGaussianBlur stdDeviation="3" result="j" id="prefix__feGaussianBlur50" />
      <feFlood flood-opacity="0" id="prefix__feFlood52" />
      <feComposite operator="in" in2="j" id="prefix__feComposite54" result="result1" />
      <feComposite in="SourceGraphic" in2="result1" id="prefix__feComposite56" />
    </filter>
    <style>
      .prefix__d {
        fill: var(--brand,#3997d3)
      }

      .prefix__i {
        fill: #ff4150
      }

      .prefix__e {
        fill: #f2f4f9
      }

      .prefix__f {
        fill: #fff
      }
    </style>
  </defs>
  <g transform="translate(-349 -40)" id="prefix__g129">
    <g transform="translate(349 40)" id="prefix__g127">
      <g transform="translate(-3.65 -6)" id="prefix__g77" filter="url(#prefix__e)">
        <path d="M60 0l5.353 12.235v35.177S67.407 52 69.941 52l7.137-1.631 5.863-7.545 2.022-21.412L82.941 0z"
          transform="translate(-51 6)" id="prefix__path75" fill="var(--hovered-brand,#53aae1)" />
      </g>
      <path class="prefix__d" d="M302.588 7.495A7.5 7.5 0 00295.093 0H285v42.824l8.794 2.141 8.794-2.141V7.495z"
        transform="translate(-256.706)" id="prefix__path79" />
      <path class="prefix__d" d="M18.206 5.353a5.353 5.353 0 10-10.706 0v6.882h10.706z" transform="translate(-7.5)"
        id="prefix__path81" />
      <g transform="translate(15.294 21.412)" id="prefix__g85">
        <path class="prefix__e" d="M170.5 213.059h-13V210h13l1.342 1.529z" transform="translate(-157.5 -210)"
          id="prefix__path83" />
      </g>
      <g transform="translate(15.294 15.294)" id="prefix__g89">
        <path class="prefix__e" d="M170.5 153.059h-13V150h13l1.342 1.529z" transform="translate(-157.5 -150)"
          id="prefix__path87" />
      </g>
      <g transform="translate(28.294 21.412)" id="prefix__g93">
        <path class="prefix__f" d="M298 213.059h-13V210h13z" transform="translate(-285 -210)" id="prefix__path91" />
      </g>
      <g transform="translate(28.294 15.294)" id="prefix__g97">
        <path class="prefix__f" d="M298 153.059h-13V150h13z" transform="translate(-285 -150)" id="prefix__path95" />
      </g>
      <g transform="translate(15.294 9.176)" id="prefix__g101">
        <path class="prefix__e" d="M167.441 93.059H157.5V90h9.941z" transform="translate(-157.5 -90)"
          id="prefix__path99" />
      </g>
      <path class="prefix__d" d="M162.088 420v4.588s-2.054 4.588-4.588 4.588h13l2.022-4.588L170.5 420z"
        transform="translate(-142.206 -377.177)" id="prefix__path103" />
      <path d="M285 420v9.176h13a9.176 9.176 0 009.176-9.176z" transform="translate(-256.706 -377.177)"
        id="prefix__path105" fill="var(--pressed-brand,#1d83c4)" />
      <g transform="translate(32.717 10.083)" id="prefix__g125">
        <g transform="translate(0 27.097)" id="prefix__g111">
          <g transform="translate(-36.36 -43.18)" id="prefix__g109" filter="url(#prefix__g)">
            <path d="M.141 439.264a.479.479 0 010-.678l.889-.889a.479.479 0 11.678.678l-.889.889a.479.479 0 01-.678 0z"
              transform="translate(36.36 -394.38)" id="prefix__path107" fill="#64798a" />
          </g>
        </g>
        <path class="prefix__d" d="M401.389 4.224L399.2 2.03l1.8-1.8a.773.773 0 011.094 0l1.1 1.1a.773.773 0 010 1.094z"
          transform="translate(-374.474)" id="prefix__path113" />
        <path class="prefix__i"
          d="M244.877 40.535l-3.389-3.389 8.622-8.622a.773.773 0 011.094 0l2.3 2.3a.773.773 0 010 1.094z"
          transform="translate(-226.533 -26.545)" id="prefix__path115" />
        <g transform="translate(-36.36 -16.08)" id="prefix__g119" filter="url(#prefix__i)">
          <path class="prefix__i"
            d="M14.1 188.7l-.73-.73a.639.639 0 01-.026-.876l13.965-15.724 3.389 3.389-15.722 13.966a.639.639 0 01-.876-.025z"
            transform="translate(24 -144.67)" id="prefix__path117" />
        </g>
        <path
          d="M236.344 166.937l-3.163-3.163a.639.639 0 010-.9.639.639 0 01.9 0l3.163 3.163a.639.639 0 010 .9.639.639 0 01-.9 0z"
          transform="translate(-218.564 -152.608)" id="prefix__path121" fill="#fcd462" />
        <path
          d="M341.8 97.828a.641.641 0 00-.174-.59l-.083-.083-.1-.1-.6.6.2.2a.534.534 0 01.1.612 15.265 15.265 0 01-4.323 4.809l-.257-.257-.5.5a.494.494 0 000 .7l.364.364a.277.277 0 00.392 0c3.333-3.39 4.719-5.533 4.981-6.755z"
          transform="translate(-315.124 -91.049)" id="prefix__path123" fill="#3d3d3c" />
      </g>
    </g>
  </g>
</svg>
jpkleemans commented 1 year ago

Hi, thanks for your post. That's a nice solution. Could you create a PR for that?

DirectorRen-TV commented 1 year ago

Created a pull request