📦 SVGs, fast and developer friendly in Angular

Push Based

Last update: Nov 28, 2022

Related tags

Learning resource ngx-fast-svg

Overview

View settings

all icons fixed size e.g. 30px
button to align all icons distributes
button to align all icons onscreen
button to align all icons offscreen

Numbers

bundle size (bundles in angular app)
html size (list inc icons and cache)

Measures

Cold add icons x 15
Hot (all icons) add icons x 15
SSR (viewport icons) + add icons x 15
SSR (all icons) + add icons x 15

Overview

Names	Lazyloading	Preloading	SSR	Prerendering
ngx-fast-svg	native
ionic-ionic	programmatically
font-awesome
ant
material-module
angular

https://bundlephobia.com/api/size?package=@ant-design/[email protected]

Names	Size
ionic-ionic-module	89.29 KB
font-awesome-font-awesome-module	64.75 KB
ant-ant-module	24.38 KB
material-material-module	16.92 KB
angular-angular-module	1.54 KB
fast-icon-fast-icon-module	1.52 KB

Sample set SVG icons

Names	Size	Elements
account.svg	340 Bytes	1
back.svg	369 Bytes	1
consulting.svg	22.01 KB	41
custom_workshops.svg	23.92 KB	64
custom_workshops_1.svg	22.94 KB	56
custom_workshops_2.svg	17.57 KB	41
custom_workshops_3.svg	17.48 KB	40
delete.svg	194 Bytes	1
engineering.svg	44.33 KB	105
error.svg	8.39 KB	78
genre.svg	344 Bytes	3
imdb.svg	305 Bytes	2
play.svg	251 Bytes	1
popular.svg	360 Bytes	2
sad.svg	499 Bytes	4
search.svg	462 Bytes	1
top_rated.svg	491 Bytes	2
upcoming.svg	313 Bytes	2
website.svg	343 Bytes	2
who-we-are.svg	26.64 KB	56
workshops.svg	35.15 KB	94

Comments

Rename to fast svg
ngx-fast-lib

rename internals (variables/classes/methods)

rename files

fix configuration

use native browser fetch

use template tag to store cache

ngx-fast-lib-demo

fix imports

fix css classes

fix labels

general

fix configurations

use npm in ci

fix release and ci pipelines
opened by Karnaukhov-kh 1
refactor: store cache in template tag

Description

Previously cache was stored in performance optimized styled <div> element. Same or even bigger benefits can be reached by using <template> tag.

<template> content is considered “out of the document”, so it doesn’t affect anything.

opened by Karnaukhov-kh 0
feat: use runOutsideAngular to improve load event

Description

If we use runOutsideAngular in fast-icon component we can reduce Event load processing time by a lot.

Measures

Test were done in demo app. As you can see when we add 360 icons now scripting time goes down from 130ms to 5ms (96%)

Original

Improved

opened by Karnaukhov-kh 0
Add flame charts to the docs
Add comparison flame charts to the docs.

[ ] specify the different cases to test

[ ] all on screen

[ ] on/off screen

[ ] all off screen

[ ] specify test set

[ ] standard icon set

[ ] Big svg data

[ ] data to track

[ ] network

[ ] Browse scripting time

[ ] Render work

documentation
opened by BioPhoton 0

Releases(ngx-fast-lib-0.2.2)

ngx-fast-lib-0.2.2(Dec 28, 2022)

0.2.2 (2022-12-28)
Source code(tar.gz)
Source code(zip)
ngx-fast-lib-0.2.1(Dec 2, 2022)
0.2.1 (2022-12-02)

Bug Fixes

restore package json (nx issue #10626) (de8299a)

Source code(tar.gz)
Source code(zip)
ngx-fast-lib-0.2.0(Jun 17, 2022)
0.2.0 (2022-06-17)

Features

inherit viewBox from original svg (65cd781)

Source code(tar.gz)
Source code(zip)
ngx-fast-lib-0.1.4(May 26, 2022)
0.1.4 (2022-05-26)

Bug Fixes

fix comments (3e7b1ee)

Source code(tar.gz)
Source code(zip)
ngx-fast-lib-0.1.3(May 26, 2022)
0.1.3 (2022-05-26)

Bug Fixes

use proper readme (252312d)

Source code(tar.gz)
Source code(zip)
ngx-fast-lib-0.1.2(May 26, 2022)
0.1.2 (2022-05-26)

Bug Fixes

fix comments (17c0973)

Source code(tar.gz)
Source code(zip)

A free e-library for developer to read and upload ebooks they would like to share with the community and help other developers grow.

Techlib 🚀 Techlib A free e-library for developer to read and upload ebooks they would like to share with the community and help other developers grow

Dec 15, 2022

Palaemon is an open-source developer tool for monitoring health and resource metrics of Kubernetes clusters and analyzing Out of Memory (OOMKill) errors

Palaemon 🍤 🍤 An Electron based developer tool for Kubernetes cluster monitoring and error analysis Palaemon is a Greek, child sea-god who came to ai

Dec 28, 2022

A container-friendly alternative to os.cpus().length. Both cgroups v1 and cgroups v2 are supported.

node-cpu-count A container-friendly alternative to os.cpus().length. Both cgroups v1 and cgroups v2 are supported. Installation $ npm install node-cpu

Jan 17, 2022

A health-focused app for users to be able to track workouts and nutritional data with a social media component to inspire friendly competition among the users.

Aug 26, 2022

Hadmean is an internal tool generator. It is language agnostic, schema driven, extremely customizable, featured packed, user-friendly and has just one installation step.

Hadmean Report a Bug · Request a Feature · Ask a Question Table of Contents About Quick Demo Motivation Why you should try Hadmean Getting Started Pre

Dec 29, 2022

Personal developer portfolio written with NextJS and Tailwind CSS.

Developer Portfolio This is a Next.js, Tailwind CSS blogging starter template. Probably the most feature rich nextjs markdown blogging template out th

Dec 20, 2021

Chappe - 🧑‍💻 Developer Docs builder. Write guides in Markdown and references in API Blueprint. Comes with a built-in search engine.

Chappe Developer Docs builder. Write guides in Markdown and references in API Blueprint. Comes with a built-in search engine. Chappe is a Developer Do

Jan 1, 2023

🧑‍💻 Developer Docs builder. Write guides in Markdown and references in API Blueprint. Comes with a built-in search engine.

Developer Docs builder. Write guides in Markdown and references in API Blueprint. Comes with a built-in search engine. Chappe is a Developer Docs buil

Blog-webapp - A simple webapp prototype that serves tech news, blogs, and anything else a developer might want to learn or get help with

Blog Web app A simple webapp prototype that serves tech news, blogs, and anythin

Nov 3, 2022

📦 SVGs, fast and developer friendly in Angular

Related tags

Overview

View settings

Numbers

Measures

Overview

Sample set SVG icons

You might also like...

Comments

ngx-fast-lib

ngx-fast-lib-demo

general

Description

Description

Measures

Releases(ngx-fast-lib-0.2.2)

ngx-fast-lib-0.2.2(Dec 28, 2022)

0.2.2 (2022-12-28)

ngx-fast-lib-0.2.1(Dec 2, 2022)

0.2.1 (2022-12-02)

Bug Fixes

ngx-fast-lib-0.2.0(Jun 17, 2022)

0.2.0 (2022-06-17)

Features

ngx-fast-lib-0.1.4(May 26, 2022)

0.1.4 (2022-05-26)

Bug Fixes

ngx-fast-lib-0.1.3(May 26, 2022)

0.1.3 (2022-05-26)

Bug Fixes

ngx-fast-lib-0.1.2(May 26, 2022)

0.1.2 (2022-05-26)

Bug Fixes

Owner

Push Based

Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

Catalogist is the easy way to catalog and make your software and (micro)services visible to your organization in a lightweight and developer-friendly way.

A 👩‍💻 developer-friendly entity management system for 🕹 games and similarly demanding applications, based on 🛠 ECS architecture.

Fast, and friendly Bun web framework

Firebase Storage with Angular 14 example: Upload File, Retrieve, Display, Download Url & Delete using @angular/fire AngularFireStorage

Angular JWT refresh token with Interceptor, handle token expiration in Angular 14 - Refresh token before expiration example

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

This project is for hacktoberfest to encourage new developer and open source developers to contribute to open source and improve skills which require debugging, write testable code, industry standards, problem solving and many more,

A collection of preloaded and essential files that makes the website more attractive, smooth and user friendly

Simple shopping cart prototype which shows how React components and Redux can be used to build a friendly user experience with instant visual updates and scalable code in e-commerce applications.