Skip to content

Commit

Permalink
refactor(docs): update main readme
Browse files Browse the repository at this point in the history
  • Loading branch information
ChristopherPHolder authored Jun 27, 2023
2 parents 2a21ace + 6b1738d commit dbec99f
Showing 1 changed file with 62 additions and 2 deletions.
64 changes: 62 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,45 @@ 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';
Expand Down Expand Up @@ -99,6 +136,28 @@ import { HttpClientFetchStrategy } from './fetch-strategy';
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:
Expand All @@ -125,12 +184,13 @@ And then just provide it in you server module.
AppModule,
ServerModule,
ServerTransferStateModule,
FastSvgModule.forRoot({
],
providers: [
provideFastSVG({
svgLoadStrategy: SvgLoadStrategySsr,
url: (name: string) => `assets/svg-icons/${name}.svg`,
}),
],
providers: [],
bootstrap: [AppComponent],
})
export class AppServerModule {}
Expand Down

0 comments on commit dbec99f

Please sign in to comment.