We had problems running the lib in worker. That was it. But then, as I started to look at it, I discovered that we are there is room for improvement.
Bundling
While gulp is great and allows you to build the library, vite is the standard these days. With the old implementation, the library loaded all the features of svg into a single DOM element (using dom-parser) and from there, depending on the hash, it selected the features for the fiven hash. Then it ensabmages all the selected elements together with a predefined background and colors and runs an optimization process on each render.
With the new approach, we run svgo with some defined plugins in dev and write the optimized svg to the folder. Then at runtime we just ensamble the selected optimized features and return the SVG. After the selected features have been retrieved, we just ensamlbe the SVG and return it. We don't use dom-parser and we don't need to optimize the SVG at runtime.
Docs
I am planning to make a small README with a basic usage of the library, but I also prepared a page for the developer center:
I have created a Vue 3 application that can be used for local testing, but also as a playground. We need to enable deployment to GitHub pages from GitHub actions and the link should work.
Why not just use the legacy version?
We had problems running the lib in worker. That was it. But then, as I started to look at it, I discovered that we are there is room for improvement.
Bundling
While
gulpis great and allows you to build the library,viteis the standard these days. With the old implementation, the library loaded all the features of svg into a single DOM element (usingdom-parser) and from there, depending on the hash, it selected the features for the fiven hash. Then it ensabmages all the selected elements together with a predefined background and colors and runs an optimization process on each render.With the new approach, we run
svgowith some defined plugins in dev and write the optimized svg to the folder. Then at runtime we just ensamble the selected optimized features and return the SVG. After the selected features have been retrieved, we just ensamlbe the SVG and return it. We don't usedom-parserand we don't need to optimize the SVG at runtime.Docs
I am planning to make a small README with a basic usage of the library, but I also prepared a page for the developer center:
Playground
I have created a Vue 3 application that can be used for local testing, but also as a playground. We need to enable deployment to GitHub pages from GitHub actions and the link should work.
Performance Comparison
Breaking changes
See Migration Guide here
Discontinued functions
Please check the functions that have NOT been migrated: https://deploy-preview-78--developer-center.netlify.app/build/ui/identicons#discontiuned-functions
TODO
solves #2, #12, #17