In order to make path animations, we need to know the lengths of the paths. This can be done in browser at runtime using native APIs, but a better implementation would be to store those values on the components at compilation time.

Use pkg

Request is depracated

Hi, thanks for sharing this set of icons 🙂. I was looking to use it in my web components project, but unfortunately I stumbled upon a couple of issues.

First issue is that when I import @glyphs/wc-core, there is a "duplicate export" issue with CoreGrinBeam:

Duplicate export 'CoreGrinBeam' (741:20) in @glyphs/wc-core/src/index.js

See reproduction on codepen: https://codepen.io/hyzual/pen/wvJJLpG

I haven't figured out how the list is built but I can confirm there is a duplicate in node_modules/@glyphs/wc-core/src/index.js :

//L740-741
export { default as CoreGrinBeam } from './icons/GrinBeam'
export { default as CoreGrinBeam } from './icons/GrinBeam'

I would be grateful if you could please take a look at that issue 🙂, as without it I must find some creative workarounds to import each icon.

Similar to handling icons and categories but enable packaging single and select variants

Summary

When downloading an SVG file using the "Download SVG" button, the content of the file is only "undefined" and cannot be used.

I tried downloading with multiple VARIANTS. However, they all had the same problem.

Screenshots

2.

Environment

• Windows 10
• Google Chrome

Waiting for Nuxt

ref, ref

For large sets, the export can take several minutes to complete. During this time, the likelihood of encountering critical errors is raised. Add a convenience method to pick up where you left off...

Everything that happens once can never happen again. But everything that happens twice will surely happen a third time.

Paulo Coelho, The Alchemist

Enable dynamic generation of components for popular JS frameworks

When I try and call the components directly from the unpkg CDN (listed here) e.g:

<script src="https://unpkg.com/@glyphs/wc-core" type="module"></script>
<script src="https://unpkg.com/@glyphs/wc-brands" type="module"></script>
<script src="https://unpkg.com/@glyphs/wc-flags" type="module"></script>

I get the following error:

Uncaught ReferenceError: assignment to undeclared variable parcelRequire
wc-core:1:988

And the following warning:

Source map error: Error: request failed with status 404
Resource URL: https://unpkg.com/@glyphs/wc-core
Source Map URL: /index.js.map

(Same errors and warnings with wc-brands & wc-flags)

When I try the files locally (downloaded through jsdelivr) I get the following error:

Loading module from “https://localhost:7209/lib/glyphs/wc-core” was blocked because of a disallowed MIME type (“”)

Granted unsure if you have to call the library otherwise when used locally.
For reference, my codebase uses ASP.NET with .NET 6 and I use libman to grab the library locally but that shouldn't matter when it comes to this issue.

related to #15 #40

• Hide left sidebar <1000px (depends on #5)
• Hide right sidebar <600px - open icons in new page (depends on #4)
• Optimize input scrubbers

Sorry to open as an issue, but i couldn't find any contact info on your github. I'de like to contribute or maybe collaborate with my project bridged.xyz https://github.com/bridgedxyz . If you are interested please contact me via email on my profile.

Great work gorango!

I see a great great potential here.

This repo currently hosts several distinct npm packages and other tools (figma plugin, docs site).

We need more robust descriptions and guides throughout.

Mock and build template for single icon view.
Needed for mobile and SEO.

it might work after some webpack shenanigans. which I'm not willing to do for an icon library.

./node_modules/@glyphs/react-core/src/icons/A.jsx
Module parse failed: Unexpected token (9:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     case 'path':
|       return (
>         <>
|           <path d="M29.3335 48.4004H50.6668" stroke="#C2CCDE" strokeLinecap={strokeLinecap} strokeLinejoin={strokeLinejoin} strokeWidth={strokeWidth || 3}/>
|           <path d="M24 64L39.4342 16.4113C39.5137 16.1661 39.7422 16 40 16C40.2578 16 40.4863 16.1661 40.5658 16.4113L56 64" stroke="#C2CCDE" strokeLinecap={strokeLinecap} strokeLinejoin={strokeLinejoin} strokeWidth={strokeWidth || 3}/>

also, no typescript support. you will have to provide your own .d.ts file

same as title, i wanna change the stoke color via props.

Figma variants have been released and the project would benefit from leveraging these new features.

Depends on #10

Currently the sync command fetches and downloads all icons in a requested set, regardless of whether the assets already exist in the target location.

Allow users to specify the location of existing assets and to download only icons that have been changed since the last successful sync execution.

Please change search mechanism it works so bad. Use alike Algolia etc.
Ex. when I type buy it can show me icons about money and ecommerce. Or when I type menu it should give me hamburger icon.

Thanks..

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.

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.

There is currently lots of repeating tailwing code for buttons, inputs, etc.

Errors in Contributing guide:

1. "Code of Conduct" file is missing or the link is invalid. Current link is https://github.com/gorango/glyphs/blob/main/.github/CODE_OF_CONDUCT.md.

2. There is no "Project Structure" and "Financial Contribution" sections but they are present in the Content section with links.
   I would suggest completely remove them until these sections will be made. Or remove just links and add a note like "(will be added later)".

I decided to add second item as a bug after I ended in the situation on a screenshot - Glyphs Github main page with the broken Contributing Guide link in the address bar:

Repro script:

1. Go to Glyphs contributing guide: https://github.com/gorango/glyphs/blob/main/contributing.md
2. Click one of the broken link "Project Structure" or "Financial Contribution".
3. Then click some other link, Glyphs Github page in my case.
4. Click "Back" browser button.

The error on a screenshot happens in desktop Firefox browser (81.0.2). Desktop Chrome correctly shows Contributing Guide page. So this is more like a browser problem, but easy to fix on your side.

Thanks for the Glyphs!

Depends on #9

Convert paths to outlines: package

Font generators cannot handle SVG paths and require outlines. This feature might also be useful for flat variants like bold in the core set, filled in brands, and even core's poly.

related to #25

Default layout nav - hide search, links in overlay view <600px

I faced this issue when trying to use glyphs react-core in Next.JS:

As described, the issue comes from the use of strings instead of style mappings in the components. For example, looking at CoreSquare:

The style attribute is using string instead of object, and

the svg attributes (i.e. stroke-width, stroke-linecap, stroke-linejoin) are also not using the proper camelcase attribute texts.

Can these be fixed?

• Move left sidebar to top menu
• Move right sidebar to top of page

Depends on #5

➜  fjolne glyphs add

  Add a new icon set config by providing a file key and access token from Figma
  Instructions can be found at https://glyphs.fyi/docs/cli

? Figma File Key: iyfw1gTNRfjjLVK7UfbsVO
? Figma Personal Access Token: ************************************************
(node:1623) UnhandledPromiseRejectionWarning: ReferenceError: personalAccessToken is not defined
    at /home/fjolne/.nvm/versions/node/v12.19.0/lib/node_modules/@glyphs/cli/bin/glyphs-add:95:45
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
(node:1623) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:1623) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

@glyphs/cli v0.3.1, fresh install from NPM