parsers
svgo
parsers | svgo | |
---|---|---|
10 | 30 | |
111 | 20,390 | |
7.2% | 0.4% | |
6.8 | 8.9 | |
5 months ago | 10 days ago | |
TypeScript | JavaScript | |
GNU General Public License v3.0 or later | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
parsers
- Show HN: Specify 2.0 – Your design token engine
-
How do you make the devs life easier ?
Specify if also a good all-in-one tool I just found yesterday https://specifyapp.com/
- How can one create this type of animation? Especially with react js
-
kickstartDS is Open Source now. Let’s start to democratize Design Systems today
Today quite some companies are already tackling similar problems. Talking of Knapsack.cloud, Backlight.dev, Specify, Supernova and many more, here. They all deliver value to simplify workflows for setup, integration, documentation and management of Design Systems. This is all super helpful in spreading the love about Design Systems to teams out there, and is a huge benefit to the process side of things. But you usually still need to create or import all of your components, which means that you still have some hard work before to you yourself, before finally benefitting from these tools. There’s also a lot (knowledge and work) going into the setup of a Design System (semantic tokens, hardened components, etc) that’s not solved by those tools, yet.
-
Specify VS Style Dictionary
By default Specify returns design data in JSON but thanks its open source parsers you can transform your design data in any formats. I repeat, in any formats.
-
El nuevo paradigma: de código a diseño
https://story.to.design/ https://specifyapp.com/
-
Experimenting with Shape Up
At Specify, We started experimenting with the Shape Up methodology a few weeks ago to define focused projects, address unknowns, and increase collaboration and engagement within the team. So, I started to learn more about how other teams implemented it, too.
- Specify
-
Translating Figma designs to Tailwind
here's a list of their parsers: https://github.com/Specifyapp/parsers/tree/master/parsers
-
From Figma to React Native using Specify
For each rule we can use a different filter, such that the rule only applies to certain types of design tokens. Next to filters, we can also use parsers, which will manipulate the raw design tokens (which are in JSON format) and output a format that suits the programming language and platform more. Parsers behave like a pipeline, where each parser receives the input of the previous one. There are a lot of parsers to choose from, some perform very low level transformations such as round-number and camelcasify, but also full-blown parsers to a single technology such as to-tailwind and to-react-native.
svgo
-
SVG Viewer – View, edit, and optimize SVGs
Surprised this is being discussed here. It's worth noting that SVGOMG runs SVGO 3.0.0 while the latest version is 3.2.0 (so run SVGO locally for the latest optimizations), but I understand that once https://github.com/svg/svgo/pull/1943 is merged Jake will release an updated version of SVGOMG.
-
Random Code Inspiration Volume 2
image-shrinker is a simple, easy to use open source tool for shrinking images. Under the hood it uses pngquant, mozjpg, SVGO, and gifsicle. You can also install these tools individually if you need to compress some images. I often use pngquantafter exporting PNGs for web projects from Figma or similar tools. I literally run it like this:
-
Dynamic SVG images using Next.js
In addition to the techniques we’ve discussed so far, there are optimization tools available that can further enhance SVG images. These tools, such as SVGO and ImageOptim, offer valuable features to reduce file size and clean up SVG markup, making it easier to standardize and optimize the overall performance of SVG assets.
-
Is it possible to save multiple files as optimized SVGs at once?
Open the terminal and cd to the folder containing your SVG files and run the command inkscape *.svg --export-plain-svg --export-type=svg And Inkscape is going to save your files as plain SVG and append the word "_out" to them. Note : Plain SVG files are not optimized for the web, you should use SVGO or any other Node.js tool, there are a lot of them on MPM
- F360 going crazy over a client supplies SVG. Anything to clean it up?
- What is the benefit of stripping viewBox?
-
Ask HN: FOSS Projects Worth Donating To?
Look at software you use and identify underlying libraries.
SVGO https://github.com/svg/svgo is used by many graphics software but hasn't seen donations commensurate with usage https://opencollective.com/svgo
- Создаем React-компоненты иконок с помощью Figma API и SVGR. Часть 2.
- Used an online SVG editor, this code got added to my file. I've already opened the file. How fucked am I?
-
Using SVGs in Common Lisp web apps with Djula
There are still a lot of things cl-djula-svg is capable of doing. For the immediate future, I am looking at adding optimization capabilities something like what svgo is doing for svgr. If you know anything else needs to be done to improve the package, please open an issue in the repository.
What are some alternatives?
design-tokens - 🎨 Figma plugin to export design tokens to json in an amazon style dictionary compatible format.
svgomg - Web GUI for SVGO
design-tokens - Design token generator written in Deno + TS
svgr - Transform SVGs into React components 🦁
style-dictionary - A build system for creating cross-platform styles.
svg-to-react - Tool to convert SVG files to React components
theme-ui - Build consistent, themeable React apps based on constraint-based design principles
Beatbump - Alternative YouTube Music frontend built with Svelte/SvelteKit 🎧
motion-canvas - Visualize Your Ideas With Code
easyeda-svg-import - Simple SVG Importer for EasyEDA PCB that doesn't convert everything to Comic Sans 😄
megaparsec - Industrial-strength monadic parser combinator library
xooks - General purpose react hooks collection