Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/push-based/ngx-fast-svg
📦 SVGs, fast and developer friendly in Angular
https://github.com/push-based/ngx-fast-svg
Last synced: 23 days ago
JSON representation
📦 SVGs, fast and developer friendly in Angular
- Host: GitHub
- URL: https://github.com/push-based/ngx-fast-svg
- Owner: push-based
- Created: 2022-04-11T22:23:08.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-13T11:22:44.000Z (2 months ago)
- Last Synced: 2024-10-24T23:28:15.199Z (about 2 months ago)
- Language: TypeScript
- Homepage:
- Size: 8.01 MB
- Stars: 56
- Watchers: 6
- Forks: 5
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- awesome-angular - ngx-fast-svg - SVGs, fast and developer friendly in Angular. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-fast-svg - SVGs, fast and developer friendly in Angular. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-fast-svg - SVGs, fast and developer friendly in Angular. (Table of contents / Third Party Components)
README
# ngx-fast-svg
Fast SVG's for Angular powered by browser native features with best performance practices and DX in mind.
## Why another SVG lib for Angular?
Current implementations of SVG handling in the Browser lacks of awareness of performance.
This library covers next aspects that developers should consider for their projects:
- Image loading performance
- Initial rendering performance and runtime performance
- SVG reusability
- Optimized bundle size
- SSR
- Edge ready (only edge safe APIs are used)
## Getting started
### Install
```bash
npm install @push-based/ngx-fast-svg --save
# or
yarn add @push-based/ngx-fast-svg
```
### Setup
#### Setup the library in your standalone application:
**main.ts**
```typescript
import { provideFastSVG } from '@push-based/ngx-fast-svg';
bootstrapApplication(AppComponent, {
providers: [
// ... other providers
provideFastSVG({
url: (name: string) => `path/to/svg-assets/${name}.svg`,
})
]
});
```
#### Setup the library in your Angular application using NgModules:
**app.module.ts**
```typescript
// ...
import { provideFastSVG } from '@push-based/ngx-fast-svg';
@NgModule({
declarations: [AppComponent],
providers: [
provideFastSVG({
url: (name: string) => `path/to/svg-assets/${name}.svg`,
})
],
bootstrap: [AppComponent]
})
export class AppModule {}
```
or if you're using an older version of the library, you can still do:
```typescript
// ...
import { FastSvgModule } from '@push-based/ngx-fast-svg';
@NgModule({
declarations: [AppComponent],
imports: [
FastSvgModule.forRoot({
url: (name: string) => `path/to/svg-assets/${name}.svg`,
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
```
### Usage in the template
```html
```
### Advanced usage
#### Providing additional options
During setup phase you can provide additional optional settings such as:
```typescript
defaultSize?: string;
suspenseSvgString?: string;
svgLoadStrategy?: Type;
```
`svgLoadStrategy` can be any injectable class that has `config` that excepts method that accepts url and returns observable string,
and `load` which accepts the configured url as an observable and returns the svg as an observable string.
```typescript
@Injectable()
export abstract class SvgLoadStrategy {
abstract load(url: string): Observable;
}
```
**app.module.ts**
```typescript
// ...
import { FastSvgModule } from '@push-based/ngx-fast-svg';
import { loaderSvg } from './assets';
import { HttpClientFetchStrategy } from './fetch-strategy';
@NgModule({
declarations: [AppComponent],
imports: [
FastSvgModule.forRoot({
url: (name: string) => `path/to/svg-assets/${name}.svg`,
defaultSize: '32',
suspenseSvgString: loaderSvg,
svgLoadStrategy: HttpClientFetchStrategy
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
```
or in a standalone application:
**main.ts**
```typescript
import { provideFastSVG } from '@push-based/ngx-fast-svg';
import { loaderSvg } from './assets';
import { HttpClientFetchStrategy } from './fetch-strategy';
bootstrapApplication(AppComponent, {
providers: [
// ... other providers
provideFastSVG({
url: (name: string) => `path/to/svg-assets/${name}.svg`,
defaultSize: '32',
suspenseSvgString: loaderSvg,
svgLoadStrategy: HttpClientFetchStrategy
})
]
});
```
#### SSR Usage
You can provide your own SSR loading strategy that can look like this:
```typescript
@Injectable()
export class SvgLoadStrategySsr implements SvgLoadStrategy {
load(url: string): Observable {
const iconPath = join(process.cwd(), 'dist', 'app-name', 'browser', url);
const iconSVG = readFileSync(iconPath, 'utf8');
return of(iconSVG);
}
}
```
And then just provide it in you server module.
**app.server.module.ts**
```typescript
@NgModule({
declarations: [],
imports: [
AppModule,
ServerModule,
ServerTransferStateModule,
],
providers: [
provideFastSVG({
svgLoadStrategy: SvgLoadStrategySsr,
url: (name: string) => `assets/svg-icons/${name}.svg`,
}),
],
bootstrap: [AppComponent],
})
export class AppServerModule {}
```
#### Providing a lazy configuration
If you need to provide a lazy configuration you can use the config method in the `SvgLoadStrategy`:
```typescript
@Injectable()
class LazyConfigSvgLoadStrategy extends SvgLoadStrategyImpl {
dummyLazyConfig$ = timer(5_000).pipe(map(() => 'assets/svg-icons'))
override config(url: string): Observable {
return this.dummyLazyConfig$.pipe(map((svgConfig) => `${svgConfig}/${url}`));
}
}
```
And pass it to the provider function:
```typescript
import { provideFastSVG } from '@push-based/ngx-fast-svg';
bootstrapApplication(AppComponent, {
providers: [
// ... other providers
provideFastSVG({
url: (name: string) => `${name}.svg`,
svgLoadStrategy: LazyConfigSvgLoadStrategy,
})
]
});
```
## Features
### :sloth: Lazy loading for SVGs
Lazy loading is referring to loading resources only if they are visible on screen. Like lazy loading imgs.
It can be implemented natively over loading attribute or over viewportobserver.
This library supports lazy loading for SVGs using purely browser native features.
- We display an empty SVG at the beginning. Invisible and without dimensions.
- On View init the size is applied even if no svg is loaded to avoid flickering in dimensions.
- A suspense svg is displayed at the same time to reduce visual flickering.
- We use an img element here to leverage the browsers native features:
- Lazy loading (loading="lazy") to only load the svg that are actually visible
- The image is styled with display none. this prevents any loading of the resource ever.
on component bootstrap we decide what we want to do. When we remove display none it performs the browser native behavior.
### :floppy_disk: Caching
We use a DOM caching mechanism to display svg over the 'use' tag and an href attribute.
When the browser loaded the svg resource we trigger the caching mechanism.
`re-fetch -> cache-hit -> get SVG -> cache in DOM`
Cached SVG elements can be reused in multiple places and support different styling.
### :rocket: Optimized for performance
This library leverages best performance practices:
- Component is styled with `content-visiblity: auto;` and `contain: content;`. It makes instances outside of viewport completely excluded from browser style recalculation process.
- Cache is stored in a tag which is not processed by the browser.
- We use native browser `fetch` which is not patched by `zone.js` and is on average 2.5 times faster than fetching over `HTTPClient`.
### 🤖 SSR Support
This library also supports SSR. url and loading function can be configured over DI.
### 🤖 SSR Transfere State (rendered SVG as HTML)
If SSR load svgs on server the rendered HTML ends up in DOM cache and ships to the client.
On the client no additional requests are needed.
## Comparison
> 🖥️ Interactive demo available [here](https://push-based.github.io/ngx-fast-svg).
Here's library comparison with other popular SVG solutions.
| Library | SSR [1] | Lazy loading [2] | Optimized render performance [3] | Transfere State | Size |
|------------------|------------|-------------------|----------------------------------|-----------------|----------|
| ngx-fast-svg | `easy` | browser natively | ✔️ | ✔️ | 1.52 KB |
| ionic | `moderate` | viewport observer | ✔️ | ❌ | 1.44 KB |
| angular-svg-icon | `moderate` | ❌ | ❌ | ❌ | 1.54 KB |
| material | `easy` | ❌ | ❌ | ❌ | 16.92 KB |
| ant | `moderate` | ❌ | ❌ | ❌ | 24.38 KB |
| font-awesome | `hard` | ❌ | ❌ | ❌ | 64.75 KB |
**[1] SSR**
Server Side Rendering is working. The depending on how easy it is to set it up we distinguish between `easy`, `moderate`, `hard`.
**[2] Lazy loading**
We refer to lazy loading as on demand loading of SVG files based on their visibility in the viewport.
**[3] Optimized render performance**
To display (render) SVGs the browser takes time. We can reduce that time by adding a couple of improvements.
---
made with ❤ by [push-based.io](https://www.push-based.io)