packaging fonts as a component does not seem to function

blankenshipd001 commented 3 years ago

Describe the bug

We are trying to package our font icons (icomoon) as a component that can be re-used in our apps. When the files are downloaded on the client we receive an error in the devtools console.

Failed to decode downloaded font: http://localhost:3000/preview/teambit.react/react/static/css/14d34cdbb61d67c73621.ttf
:3000/preview/teambit.react/react/#hallmark/styles/fonts?preview=overview:1 OTS parsing error: invalid sfntVersion: 1008821359
:3000/preview/teambit.react/react/#hallmark/styles/fonts?preview=overview:1 Failed to decode downloaded font: http://localhost:3000/preview/teambit.react/react/static/css/c0c84b937a61e2216d6d.woff
:3000/preview/teambit.react/react/#hallmark/styles/fonts?preview=overview:1 OTS parsing error: invalid sfntVersion: 1008821359

Steps to Reproduce

Create a component
Add a couple of the icons from icomoon and export.
Attempt to use them.

@font-face {

   font-family: '#{$icomoon-font-family}';
  src:  url('./fonts/icomoon.eot');
  src:  url('./fonts/icomoon.eot') format('embedded-opentype'),
  url('./fonts/icomoon.ttf') format('truetype'),
  url('./fonts/icomoon.woff') format('woff'),
  url('./fonts/icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.icon-triangle {
  &:before {
    content: "\ea56";
  }
}

Apply the css class to a component. We were trying within the compositions file.

Expected Behavior

Icon is rendered correctly.

Specifications

Bit version: 0.0.474
Workspace type: harmony
npm / yarn version: 6.14.13
Platform: MacOs using Chrome

for harmony workspace

relevant env: react
relevant aspects

Additional context

There may be a solution or best practice for this. If so it would be nice to have a link to the example/documentation.

Our desire is just to package up our fonts to be delivered and then have a reusable set of css icon styles that can be reused as an icon component.

itaymendel commented 3 years ago

while possible, we usually don't recommend adding the font to the component, as your app will bundle it in. see a similar example here where we opt to use a CDN for the font. also, please format your code in an MD code snippet, so it'll be easier to understand the implementation.

KutnerUri commented 3 years ago

@blankenshipd001 - I see you are trying to put icomoon's font inline as a file in your component. Why not use their production link instead?

We also use icomoon - see our implementation here: https://bit.dev/teambit/design/theme/icons-font/~code/icon-font.tsx https://bit.dev/teambit/design/elements/icon/~code/icon.tsx (using https://bit.dev/teambit/base-ui/elements/icon/~code/base-icon.tsx)

Webpack should be able to bundle it, as a regular asset. Do you think we need some other plugin to handle it?

blankenshipd001 commented 3 years ago

@KutnerUri This may be the solution. My company has bundled the woff file into the application currently and we are migrating to bit. I'm not sure if they had a specific reason for not using the production download other than I believe it's a custom set of those icons.

Is there a document that tells me how to setup bit harmony to bundle these as an asset?

KutnerUri commented 3 years ago

I'm not sure. @GiladShoham could help.

Anyways, keep in mind that the webpack only bundles a preview. Though it is ugly on bit.dev, It will still work at your original application.

KutnerUri commented 3 years ago

@blankenshipd001 - I just upgraded Webpack and others in #4842. It seems to be working now, can you check?

KutnerUri commented 3 years ago

works AFAIK. reopen if still getting problems.

teambit / bit