gorango / glyphs

Dynamic design system for building and managing large icon sets in Figma and packaging them for the web
https://glyphs.fyi
MIT License
411 stars 16 forks source link

Problem in computedStyle interpolation in `@glyphs/wc-core` #44

Open Hyzual opened 3 years ago

Hyzual commented 3 years ago

Hi, I've found another problem while trying to use @glyphs/wc-core.

At https://github.com/gorango/glyphs/blob/main/cli/lib/generate/wc.js#L30, there is a missing $:

- <span style={computedStyle}>
+ <span style=${computedStyle}>

The "computedStyle" is not interpolated, which results in a broken attribute style="{computedStyle}"

This means that the icons are enormous and cannot be customized by setting the "size" attribute. BrokenStyle

Unfortunately, due to issue #43 I cannot provide a codepen for easy reproduction, as it does not allow importing a sub-file. Using a bundler such as webpack, the issue can be reproduced as follow:

  1. npm install @glyphs/wc-core
  2. Import a component directly to bypass issue #43:

    import "@glyphs/wc-core/src/icons/FolderOpen";
  3. Include an icon component in HTML

    <core-folder-open
        variant="path"
        stroke-width="3"
    ></core-folder-open>

    I could try submitting a PR to fix that if you need me to but I'm not familiar with @glyphs's build system. It's unclear to me if I need to use the glyphs CLI first and then npm commands to rebuild web components.

Hyzual commented 3 years ago

Any update ? 😕 I'm willing to help resolve this

gorango commented 3 years ago

Thanks for raising this issue. I just released an update in hopes it was an easy fix but I can see that none of the computed properties seem to work aside from variant.

I'm aiming to have all of the components upgraded with improved imports in the next few weeks. Stay tuned.