Attempt to fix icon performance on GH-test page

[nastiatikk]

Status: WIP

Changes

• Attempt to fix Icon Visual Test (see Issue-117 for details]

  Todos:

• [x] Designer +1 (@jeffkamo)
• [x] Designer +1 (@avelinet)

  Feedback:

none so far

[nastiatikk]

So - test pages depend on master branch and gh-pages branch. If we want to fix this we need to add couple tweaks to both those branches. We can revert them if the fix didn't work.

[jeffkamo]

@nastiatikk what tweaks does that include? Why not include that as part of this PR?

[nastiatikk]

I wanted to add font-face to fixture.scss in master and gh-pages branches. At least this is how Stencil font is attached and it works.

@font-face {
  font-family: "spline";
  font-weight: normal;
  font-style: normal;
  src: url("spline.woff") format("woff"), url("spline.ttf") format("truetype"), url("spline.svg") format("svg");
}

[jeffkamo]

Isn't that what this PR is doing? Maybe I'm not understanding what's blocking this PR.

[nastiatikk]

That we can't see if these changes work unless they're merged to master and gh-pages

[nastiatikk]

Because we can't directly commit there

[nastiatikk]

It's kind of a blind merge (or blind commit to master) and check works or no. Then undo if it doesn't.

[jeffkamo]

Right, gotcha.

So I'm okay merging this in, but how do you know that "spline.woff" is the right path? We should try and make sure that we get this at least as right as we can before committing.

[avelinet]

The svg font format can probably be removed, I don't think we need it.

[nastiatikk]

By analogy with Stencil font I added Spline font files in the fixtures.scss (also moved all fonts to the /font folder). I am still not sure it's gonna work, will continue discovering. But what I've noticed so far:

1. If I remove $icon-font-path: '../../../../bower_components/spline/test/fixtures/fonts/icon'; from icon.scss then compiled css path replaced from url("../../../../bower_components/spline/test/fixtures/fonts/icon/spline.woff") to url("../fonts/icons/spline/spline.woff" and icons still loading locally from have no idea where, because there is no ../fonts/ folder in components

2. If I remove icon font from bower (locally) keeping old font path ../../../../bower_components/spline/test/fixtures/fonts/icon' icons still loading

[nastiatikk]

Ok, seems i've discovered. They're loading from the folder I just created. Now I think I know how to fix it.

[nastiatikk]

I think now it should work. It imports font path from fixtures resources. I have reverted Vellum updates to make changes more visible. After review and before merge will update it with new Vellum values.

Status: Ready for review

[jeffkamo]

Alright, shall we give this a go? :+1:

Are there any concerns about updating gh-pages, @avelinet? (also, could use your +1 if you think this is ready)

[avelinet]

I'm not too sure what will happen with the gh-pages since there were pushes made to it. Worst case scenario we delete the branch and start fresh.

[nastiatikk]

@avelinet I reverted that push on Friday https://github.com/mobify/stencil/commits/gh-pages

[avelinet]

:+1: