Complete icons design system from Figma to web components
Head on to the Glyphs official website: https://glyphs.fyi/docs
Please make sure to read the Contributing Guide before making a pull request.
Glyphs is following Semantic Versioning 2.0.
Dynamic design system for building and managing large icon sets in Figma and packaging them for the web
Home Page: https://glyphs.fyi
License: MIT License
Complete icons design system from Figma to web components
Head on to the Glyphs official website: https://glyphs.fyi/docs
Please make sure to read the Contributing Guide before making a pull request.
Glyphs is following Semantic Versioning 2.0.
Waiting for Nuxt
Everything that happens once can never happen again. But everything that happens twice will surely happen a third time.
Paulo Coelho, The Alchemist
Similar to handling icons and categories but enable packaging single and select variants
Errors in Contributing guide:
"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.
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:
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!
Request is depracated
➜ 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
same as title, i wanna change the stoke color via props.
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
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.
This repo currently hosts several distinct npm packages and other tools (figma plugin, docs site).
We need more robust descriptions and guides throughout.
Default layout nav - hide search, links in overlay view <600px
related to #25
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.
Mock and build template for single icon view.
Needed for mobile and SEO.
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.
Enable dynamic generation of components for popular JS frameworks
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?
Figma variants have been released and the project would benefit from leveraging these new features.
Depends on #10
Depends on #9
There is currently lots of repeating tailwing code for buttons, inputs, etc.
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:
npm install @glyphs/wc-core
Import a component directly to bypass issue #43:
import "@glyphs/wc-core/src/icons/FolderOpen";
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.
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...
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.
Depends on #5
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.
<!-- input -->
<core-icon name='box' size='80px' />
<!-- result -->
<svg width="undefined" height="80px" ...> ... </svg>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.