📦 SVGs, fast and developer friendly in Angular

Related tags

Angular 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

ngx-fast-svg

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

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

Monorepo for all the tooling related to using ESLint with Angular

Monorepo for all the tooling related to using ESLint with Angular

Angular ESLint Monorepo for all the tooling which enables ESLint to lint Angular projects

Dec 29, 2022

Reactive Extensions for Angular

Reactive Extensions for Angular

RxAngular offers a comprehensive toolset for handling fully reactive Angular applications with the main focus on runtime performance and template rendering.

Jan 5, 2023

Semantic UI Angular Integrations

Semantic-UI-Angular Semantic-UI-Angular is a pure AngularJS 1.x set of directives for Semantic-UI components. We are considering Angular 2 support in

Dec 28, 2022

The code for a set of Angular 6+ components for the PatternFly project.

The code for a set of Angular 6+ components for the PatternFly project. Note that the release/3.x branch supports Angular 4 and 5.

Nov 15, 2022

Angular 11 & Bootstrap 5 & Material Design 2.0 UI KIT

Angular 11 & Bootstrap 5 & Material Design 2.0 UI KIT

MDB 5 Angular Angular 12 & Bootstrap 5 & Material Design 2.0 UI KIT Get Started in 4 steps MDBAngular 5 Demo 500+ material UI components Super s

Dec 30, 2022

Angular UI Component Library based on Ant Design

Angular UI Component Library based on Ant Design

NG-ZORRO An enterprise-class Angular UI component library based on Ant Design. English | 简体中文 ✨ Features An enterprise-class UI design system for Angu

Jan 6, 2023

Angular 2 building blocks :package: based on Semantic UI

Angular 2 building blocks :package: based on Semantic UI

Angular2 & Semantic UI Angular2 - Semantic UI Live demo ng-semantic.herokuapp.com Angular 2 Semantic UI version: 2.2.2 Installation npm install ng-sem

Dec 23, 2022

Native Angular components & directives for Lightning Design System

ng-lightning This library contains native Angular components and directives written from scratch in TypeScript using the Lightning Design System CSS f

Dec 8, 2022

Native AngularJS (Angular) directives for Bootstrap

Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!

Jan 3, 2023
Comments
  • Rename to fast svg

    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

    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

    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 image

    Improved image

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

    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)
Owner
Push Based
Company account of Push Based
Push Based
Sam4Sc - a migration assistant for Angular to SCAM (Single Angular Component Modules) and Standalone Components

Sam4Sc - a migration assistant for Angular to SCAM (Single Angular Component Modules) and Standalone Components

Rainer Hahnekamp 7 Nov 16, 2022
Clarity Angular is a scalable, accessible, customizable, open-source design system built for Angular.

Getting Started Clarity Angular is published as two npm packages: Contains the static styles for building HTML components. Contains the Angular compon

VMware Clarity 145 Dec 29, 2022
An example application that uses file-based routing with Angular, Analog, Vite with the Angular Router

Angular, Vite, and File-based routes This is an example application that uses Angular, Analog, and Vite for file-based routing. Routes are places in t

Brandon 9 Sep 25, 2022
Component infrastructure and Material Design components for Angular

Official components for Angular The Angular team builds and maintains both common UI components and tools to help you build your own custom components

Angular 23.2k Jan 3, 2023
🚀 Style and Component Library for Angular

ngx-ui Component & Style Library for Angular by Swimlane. Installing npm i @swimlane/ngx-ui --S Install the project's peer depencencies (moment, codem

Swimlane 654 Dec 24, 2022
A set of UI components for use with Angular 2 and Bootstrap 4.

#Fuel-UI A set of UI components for use with Angular 2 and Bootstrap 4. See Fuel-UI homepage for live demo and documentation. ##Dependencies Node Gulp

Fuel Interactive 302 Jul 4, 2022
An enterprise-class UI components based on At UI Design and Angular. 🚀 🚀 🚀

An enterprise-class UI components based on At UI Design and Angular. ?? ?? ??

塟愛鎵镞de栤仯 113 Dec 16, 2022
Angular multiselect component for web application. Easy to integrate and use.

Angular multiselect component for web application. Easy to integrate and use.

Dinh The Loc 2 Apr 20, 2022
NGX-YOUI is a Highly customizable library of Angular UI components for content and styles

NGX-YOUI NGX-YOUI is an Angular UI Library that can be highly customized with content and styles. You can easily integrate with other CSS frameworks a

NGX-YOUI 5 Nov 29, 2022
Directives, utils, and events for working with angular zoneless

az-zoneless A set of directive and utilities to manage an angular zoneless app. Using this library you can go completly zoneless and still support 3rd

Yariv Katz 8 Dec 15, 2022