Skip to content
This repository has been archived by the owner on Jun 25, 2020. It is now read-only.

CSS rule breaks export? #236

Open
peteruithoven opened this issue Jan 23, 2020 · 3 comments
Open

CSS rule breaks export? #236

peteruithoven opened this issue Jan 23, 2020 · 3 comments

Comments

@peteruithoven
Copy link
Contributor

After importing the css for the material design icons I get the following error

import "@mdi/font/css/materialdesignicons.css";
There was an error loading the data URI as an image on the following SVG
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [<!ENTITY nbsp "&#160;">]><svg width="200" height="150" id="svg" version="1.1" viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"><![CDATA[
.container.grow-shrink-0 { -moz-box-flex: 0; flex-grow: 0; flex-shrink: 0; }
.container.fill-height { -moz-box-align: center; align-items: center; display: flex; flex-wrap: wrap; }
.container.fill-height > .row { -moz-box-flex: 1; flex: 1 1 100%; max-width: 100%; }
.container.fill-height > .layout { height: 100%; -moz-box-flex: 1; flex: 1 1 auto; }
.container.fill-height > .layout.grow-shrink-0 { -moz-box-flex: 0; flex-grow: 0; flex-shrink: 0; }
.container.grid-list-xs .layout .flex { padding: 1px; }
.container.grid-list-xs .layout:only-child { mar…
@peteruithoven
Copy link
Contributor Author

I tried to disable font rule detection

{
        fonts: [],
}

Overriding css:

{
        modifyCss() {
          return "";
        },
}

And

{
        modifyStyle() {
          return "";
        },
        selectorRemap() {
          return "";
        }
}

But that doesn't seem to help.

@peteruithoven
Copy link
Contributor Author

Going through the mdi font css file and removing parts I've been able to track the issue down to one rule that causes the issue:

.mdi-sign-direction-remove::before {
  content: "\FFFE";
}

@peteruithoven
Copy link
Contributor Author

If I don't import the mdi font file but I just include the following rule it fails, both in Firefox and Chrome.

.someselector {
  content: "\FFFE";
}

Chrome shows a longer error which included the one problematic rule decoded:

.someselector[data-v-469af010] { content: "￾"; }

It contained the full svg file, which I've attached:
test.svg.txt

If I save that as a .svg file and open it in the browser there is no issue.

@peteruithoven peteruithoven changed the title Material design icons break export? CSS rule breaks export? Jan 23, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant