diff --git a/aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts b/aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts index 7f25fa25569..83c28d496a9 100644 --- a/aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts @@ -11,13 +11,13 @@ describe('AngularJS to Angular Quick Reference Tests', () => { it('should display proper movie data', async () => { // We check only a few samples const expectedSamples: any[] = [ - {row: 0, column: 0, element: 'img', attr: 'src', value: 'images/hero.png', contains: true}, + {row: 0, column: 0, element: 'img', attr: 'src', value: 'images/hero.svg', contains: true}, {row: 0, column: 2, value: 'Celeritas'}, {row: 1, column: 3, matches: /Dec 1[678], 2015/}, // absorb timezone dif; we care about date format {row: 1, column: 5, value: '$14.95'}, {row: 2, column: 4, value: 'PG-13'}, {row: 2, column: 7, value: '100%'}, - {row: 2, column: 0, element: 'img', attr: 'src', value: 'images/ng-logo.png', contains: true}, + {row: 2, column: 0, element: 'img', attr: 'src', value: 'images/ng-logo.svg', contains: true}, ]; // Go through the samples diff --git a/aio/content/examples/ajs-quick-reference/src/app/movie.service.ts b/aio/content/examples/ajs-quick-reference/src/app/movie.service.ts index f74e6065447..cbe8299b2ec 100644 --- a/aio/content/examples/ajs-quick-reference/src/app/movie.service.ts +++ b/aio/content/examples/ajs-quick-reference/src/app/movie.service.ts @@ -8,7 +8,7 @@ export class MovieService { return [ { hero: 'Celeritas', - imageurl: 'assets/images/hero.png', + imageurl: 'assets/images/hero.svg', movieId: 1, mpaa: 'pg-13', releaseDate: '2015-12-19T00:00:00', @@ -19,7 +19,7 @@ export class MovieService { }, { hero: 'Dr Nice', - imageurl: 'assets/images/villain.png', + imageurl: 'assets/images/villain.svg', movieId: 2, mpaa: 'pg-13', releaseDate: '2015-12-18T00:00:00', @@ -30,7 +30,7 @@ export class MovieService { }, { hero: 'Angular', - imageurl: 'assets/images/ng-logo.png', + imageurl: 'assets/images/ng-logo.svg', movieId: 3, mpaa: 'pg-13', releaseDate: '2015-12-17T00:00:00', diff --git a/aio/content/examples/ajs-quick-reference/src/assets/images/hero.png b/aio/content/examples/ajs-quick-reference/src/assets/images/hero.png deleted file mode 100644 index 2a128ac3679..00000000000 Binary files a/aio/content/examples/ajs-quick-reference/src/assets/images/hero.png and /dev/null differ diff --git a/aio/content/examples/ajs-quick-reference/src/assets/images/hero.svg b/aio/content/examples/ajs-quick-reference/src/assets/images/hero.svg new file mode 100644 index 00000000000..f0a002fc724 --- /dev/null +++ b/aio/content/examples/ajs-quick-reference/src/assets/images/hero.svg @@ -0,0 +1,202 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + image/svg+xml + + + + + + Layer 1 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/aio/content/examples/ajs-quick-reference/src/assets/images/ng-logo.png b/aio/content/examples/ajs-quick-reference/src/assets/images/ng-logo.png deleted file mode 100644 index 1e488b1a494..00000000000 Binary files a/aio/content/examples/ajs-quick-reference/src/assets/images/ng-logo.png and /dev/null differ diff --git a/aio/content/examples/ajs-quick-reference/src/assets/images/ng-logo.svg b/aio/content/examples/ajs-quick-reference/src/assets/images/ng-logo.svg new file mode 100644 index 00000000000..ac78f203d21 --- /dev/null +++ b/aio/content/examples/ajs-quick-reference/src/assets/images/ng-logo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + diff --git a/aio/content/examples/ajs-quick-reference/src/assets/images/villain.png b/aio/content/examples/ajs-quick-reference/src/assets/images/villain.png deleted file mode 100644 index 26697d1a42f..00000000000 Binary files a/aio/content/examples/ajs-quick-reference/src/assets/images/villain.png and /dev/null differ diff --git a/aio/content/examples/ajs-quick-reference/src/assets/images/villain.svg b/aio/content/examples/ajs-quick-reference/src/assets/images/villain.svg new file mode 100644 index 00000000000..75851ef7d96 --- /dev/null +++ b/aio/content/examples/ajs-quick-reference/src/assets/images/villain.svg @@ -0,0 +1,110 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + diff --git a/aio/content/examples/interpolation/src/app/app.component.ts b/aio/content/examples/interpolation/src/app/app.component.ts index 686581e096e..8e90d7d4cd6 100644 --- a/aio/content/examples/interpolation/src/app/app.component.ts +++ b/aio/content/examples/interpolation/src/app/app.component.ts @@ -14,10 +14,10 @@ export class AppComponent { // #enddocregion customer title = 'Featured product:'; - itemImageUrl = '../assets/potted-plant.png'; + itemImageUrl = '../assets/potted-plant.svg'; recommended = 'You might also like:'; - itemImageUrl2 = '../assets/lamp.png'; + itemImageUrl2 = '../assets/lamp.svg'; diff --git a/aio/content/examples/interpolation/src/assets/lamp.png b/aio/content/examples/interpolation/src/assets/lamp.png deleted file mode 100644 index 24dce11901b..00000000000 Binary files a/aio/content/examples/interpolation/src/assets/lamp.png and /dev/null differ diff --git a/aio/content/examples/interpolation/src/assets/lamp.svg b/aio/content/examples/interpolation/src/assets/lamp.svg new file mode 100644 index 00000000000..549d226f507 --- /dev/null +++ b/aio/content/examples/interpolation/src/assets/lamp.svg @@ -0,0 +1,21 @@ + + + + + + + + + diff --git a/aio/content/examples/interpolation/src/assets/potted-plant.png b/aio/content/examples/interpolation/src/assets/potted-plant.png deleted file mode 100644 index 9c40e4a54cc..00000000000 Binary files a/aio/content/examples/interpolation/src/assets/potted-plant.png and /dev/null differ diff --git a/aio/content/examples/interpolation/src/assets/potted-plant.svg b/aio/content/examples/interpolation/src/assets/potted-plant.svg new file mode 100644 index 00000000000..e2b6ec7cf22 --- /dev/null +++ b/aio/content/examples/interpolation/src/assets/potted-plant.svg @@ -0,0 +1,21 @@ + + + + + + + + + diff --git a/aio/content/examples/property-binding/src/app/app.component.ts b/aio/content/examples/property-binding/src/app/app.component.ts index 1d377de7a7f..e86b1d2dd74 100644 --- a/aio/content/examples/property-binding/src/app/app.component.ts +++ b/aio/content/examples/property-binding/src/app/app.component.ts @@ -8,7 +8,7 @@ import { Component } from '@angular/core'; }) export class AppComponent { // #docregion item-image - itemImageUrl = '../assets/phone.png'; + itemImageUrl = '../assets/phone.svg'; // #enddocregion item-image // #docregion boolean isUnchanged = true; diff --git a/aio/content/examples/property-binding/src/assets/phone.png b/aio/content/examples/property-binding/src/assets/phone.png deleted file mode 100644 index 6e60e1f1a15..00000000000 Binary files a/aio/content/examples/property-binding/src/assets/phone.png and /dev/null differ diff --git a/aio/content/examples/property-binding/src/assets/phone.svg b/aio/content/examples/property-binding/src/assets/phone.svg new file mode 100644 index 00000000000..5f4fb44ad9a --- /dev/null +++ b/aio/content/examples/property-binding/src/assets/phone.svg @@ -0,0 +1,521 @@ + + + diff --git a/aio/content/examples/template-syntax/src/app/app.component.html b/aio/content/examples/template-syntax/src/app/app.component.html index ad030bf3715..13348d1e170 100644 --- a/aio/content/examples/template-syntax/src/app/app.component.html +++ b/aio/content/examples/template-syntax/src/app/app.component.html @@ -116,10 +116,10 @@

New Mental Model

- +
Mental Model
- +

@@ -184,7 +184,7 @@ button

Property vs. Attribute (img examples)

-

diff --git a/aio/content/examples/template-syntax/src/app/app.component.ts b/aio/content/examples/template-syntax/src/app/app.component.ts index 142eec5d3c1..f1be5d94fd3 100644 --- a/aio/content/examples/template-syntax/src/app/app.component.ts +++ b/aio/content/examples/template-syntax/src/app/app.component.ts @@ -90,14 +90,14 @@ export class AppComponent implements AfterViewInit, OnInit { heroIdIncrement = 1; - // heroImageUrl = 'https://wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png'; + // heroImageUrl = 'https://wpclipart.com/dl.php?img=/cartoon/people/hero/hero_silhoutte.svg'; // Public Domain terms of use: https://wpclipart.com/terms.html - heroImageUrl = 'assets/images/hero.png'; - // villainImageUrl = 'https://www.clker.com/cliparts/u/s/y/L/x/9/villain-man-hi.png' + heroImageUrl = 'assets/images/hero.svg'; + // villainImageUrl = 'http://www.clker.com/cliparts/u/s/y/L/x/9/villain-man.svg' // Public Domain terms of use https://www.clker.com/disclaimer.html - villainImageUrl = 'assets/images/villain.png'; + villainImageUrl = 'assets/images/villain.svg'; - iconUrl = 'assets/images/ng-logo.png'; + iconUrl = 'assets/images/ng-logo.svg'; isActive = false; isSpecial = true; isUnchanged = true; diff --git a/aio/content/examples/template-syntax/src/app/hero-detail.component.ts b/aio/content/examples/template-syntax/src/app/hero-detail.component.ts index d9bd3eefbd4..4b61029dec4 100644 --- a/aio/content/examples/template-syntax/src/app/hero-detail.component.ts +++ b/aio/content/examples/template-syntax/src/app/hero-detail.component.ts @@ -19,9 +19,9 @@ import { Hero } from './hero'; }) export class HeroDetailComponent { hero = new Hero(-1, '', 'Zzzzzzzz'); // default sleeping hero - // heroImageUrl = 'https://wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png'; + // heroImageUrl = 'https://wpclipart.com/cartoon/people/hero/hero_silhoutte.png.html'; // Public Domain terms of use: https://wpclipart.com/terms.html - heroImageUrl = 'assets/images/hero.png'; + heroImageUrl = 'assets/images/hero.svg'; lineThrough = ''; @Input() prefix = ''; diff --git a/aio/content/examples/template-syntax/src/assets/images/hero.png b/aio/content/examples/template-syntax/src/assets/images/hero.png deleted file mode 100644 index 2a128ac3679..00000000000 Binary files a/aio/content/examples/template-syntax/src/assets/images/hero.png and /dev/null differ diff --git a/aio/content/examples/template-syntax/src/assets/images/hero.svg b/aio/content/examples/template-syntax/src/assets/images/hero.svg new file mode 100644 index 00000000000..f0a002fc724 --- /dev/null +++ b/aio/content/examples/template-syntax/src/assets/images/hero.svg @@ -0,0 +1,202 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + image/svg+xml + + + + + + Layer 1 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/aio/content/examples/template-syntax/src/assets/images/ng-logo.png b/aio/content/examples/template-syntax/src/assets/images/ng-logo.png deleted file mode 100644 index 1e488b1a494..00000000000 Binary files a/aio/content/examples/template-syntax/src/assets/images/ng-logo.png and /dev/null differ diff --git a/aio/content/examples/template-syntax/src/assets/images/ng-logo.svg b/aio/content/examples/template-syntax/src/assets/images/ng-logo.svg new file mode 100644 index 00000000000..ac78f203d21 --- /dev/null +++ b/aio/content/examples/template-syntax/src/assets/images/ng-logo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + diff --git a/aio/content/examples/template-syntax/src/assets/images/villain.png b/aio/content/examples/template-syntax/src/assets/images/villain.png deleted file mode 100644 index 26697d1a42f..00000000000 Binary files a/aio/content/examples/template-syntax/src/assets/images/villain.png and /dev/null differ diff --git a/aio/content/examples/template-syntax/src/assets/images/villain.svg b/aio/content/examples/template-syntax/src/assets/images/villain.svg new file mode 100644 index 00000000000..75851ef7d96 --- /dev/null +++ b/aio/content/examples/template-syntax/src/assets/images/villain.svg @@ -0,0 +1,110 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + diff --git a/aio/tools/stackblitz-builder/builder.mjs b/aio/tools/stackblitz-builder/builder.mjs index 859b8c7b697..8ffbfe4f6f5 100644 --- a/aio/tools/stackblitz-builder/builder.mjs +++ b/aio/tools/stackblitz-builder/builder.mjs @@ -1,7 +1,7 @@ // Canonical path provides a consistent path (i.e. always forward slashes) across different OSes import path from 'canonical-path'; import fs from 'fs-extra'; -import {globbySync} from 'globby'; +import { globbySync } from 'globby'; import jsdom from 'jsdom'; import regionExtractor from '../transforms/examples-package/services/region-parser.js'; @@ -182,12 +182,7 @@ export class StackblitzBuilder { config.fileNames.forEach((fileName) => { let content; const extn = path.extname(fileName); - if (extn === '.png') { - content = this._encodeBase64(fileName); - fileName = `${fileName.slice(0, -extn.length)}.base64${extn}`; - } else { - content = fs.readFileSync(fileName, 'utf-8'); - } + content = fs.readFileSync(fileName, 'utf-8'); if (extn === '.js' || extn === '.ts' || extn === '.css') { content = content + this.copyrights.jsCss;