fix(docs-infra): inline SVG icons used in page load sensitive UI (#27250)
These icons are part of the app shell and used on every load (on both desktop and mobile). Inlining them ensures they are rendered asap. PR Close #27250
This commit is contained in:
George Kalpakas
Igor Minar
parent
dca1535cb5
commit
2adf03e54a
|
|
@ -3,7 +3,7 @@
|
|||
"master": {
|
||||
"uncompressed": {
|
||||
"runtime": 3881,
|
||||
"main": 499953,
|
||||
"main": 502188,
|
||||
"polyfills": 53926
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,10 +29,12 @@
|
|||
<aio-top-menu *ngIf="isSideBySide" [nodes]="topMenuNodes"></aio-top-menu>
|
||||
<aio-search-box class="search-container" #searchBox (onSearch)="doSearch($event)" (onFocus)="doSearch($event)"></aio-search-box>
|
||||
<div class="toolbar-external-icons-container">
|
||||
<a href="https://twitter.com/angular" title="Twitter">
|
||||
<img src="assets/images/logos/twitter-icon.svg"></a>
|
||||
<a href="https://github.com/angular/angular" title="GitHub">
|
||||
<img src="assets/images/logos/github-icon.svg"></a>
|
||||
<a href="https://twitter.com/angular" title="Twitter" aria-label="Angular on twitter">
|
||||
<mat-icon svgIcon="logos:twitter"></mat-icon>
|
||||
</a>
|
||||
<a href="https://github.com/angular/angular" title="GitHub" aria-label="Angular on github">
|
||||
<mat-icon svgIcon="logos:github"></mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
</mat-toolbar-row>
|
||||
</mat-toolbar>
|
||||
|
|
|
|||
|
|
@ -104,6 +104,41 @@ export const svgIconProviders = [
|
|||
},
|
||||
multi: true,
|
||||
},
|
||||
|
||||
// Namespace: logos
|
||||
{
|
||||
provide: SVG_ICONS,
|
||||
useValue: {
|
||||
namespace: 'logos',
|
||||
name: 'github',
|
||||
svgSource:
|
||||
'<svg focusable="false" viewBox="0 0 51.8 50.4" xmlns="http://www.w3.org/2000/svg">' +
|
||||
'<path d="M25.9,0.2C11.8,0.2,0.3,11.7,0.3,25.8c0,11.3,7.3,20.9,17.5,24.3c1.3,0.2,1.7-0.6,1.7-1.2c0-0.6,0-2.6,0-4.8' +
|
||||
'c-7.1,1.5-8.6-3-8.6-3c-1.2-3-2.8-3.7-2.8-3.7c-2.3-1.6,0.2-1.6,0.2-1.6c2.6,0.2,3.9,2.6,3.9,2.6c2.3,3.9,6,2.8,7.5,2.1' +
|
||||
'c0.2-1.7,0.9-2.8,1.6-3.4c-5.7-0.6-11.7-2.8-11.7-12.7c0-2.8,1-5.1,2.6-6.9c-0.3-0.7-1.1-3.3,0.3-6.8c0,0,2.1-0.7,7,2.6' +
|
||||
'c2-0.6,4.2-0.9,6.4-0.9c2.2,0,4.4,0.3,6.4,0.9c4.9-3.3,7-2.6,7-2.6c1.4,3.5,0.5,6.1,0.3,6.8c1.6,1.8,2.6,4.1,2.6,6.9' +
|
||||
'c0,9.8-6,12-11.7,12.6c0.9,0.8,1.7,2.4,1.7,4.7c0,3.4,0,6.2,0,7c0,0.7,0.5,1.5,1.8,1.2c10.2-3.4,17.5-13,17.5-24.3' +
|
||||
'C51.5,11.7,40.1,0.2,25.9,0.2z" />' +
|
||||
'</svg>',
|
||||
},
|
||||
multi: true,
|
||||
},
|
||||
{
|
||||
provide: SVG_ICONS,
|
||||
useValue: {
|
||||
namespace: 'logos',
|
||||
name: 'twitter',
|
||||
svgSource:
|
||||
'<svg focusable="false" viewBox="0 0 50 59" xmlns="http://www.w3.org/2000/svg">' +
|
||||
'<path d="M50,9.3c-1.8,0.8-3.8,1.4-5.9,1.6c2.1-1.3,3.7-3.3,4.5-5.7c-2,1.2-4.2,2-6.5,2.5c-1.9-2-4.5-3.2-7.5-3.2' +
|
||||
'c-5.7,0-10.3,4.6-10.3,10.3c0,0.8,0.1,1.6,0.3,2.3C16.1,16.7,8.5,12.6,3.5,6.4c-0.9,1.5-1.4,3.3-1.4,5.2c0,3.6,1.8,6.7,4.6,8.5' +
|
||||
'C5,20,3.4,19.6,2,18.8c0,0,0,0.1,0,0.1c0,5,3.5,9.1,8.2,10.1c-0.9,0.2-1.8,0.4-2.7,0.4c-0.7,0-1.3-0.1-1.9-0.2' +
|
||||
'c1.3,4.1,5.1,7,9.6,7.1c-3.5,2.8-7.9,4.4-12.7,4.4c-0.8,0-1.6,0-2.4-0.1c4.5,2.9,9.9,4.6,15.7,4.6c18.9,0,29.2-15.6,29.2-29.2' +
|
||||
'c0-0.4,0-0.9,0-1.3C46.9,13.2,48.6,11.4,50,9.3z" />' +
|
||||
'</svg>',
|
||||
},
|
||||
multi: true,
|
||||
},
|
||||
];
|
||||
// tslint:enable: max-line-length
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,27 @@ describe('CustomIconRegistry', () => {
|
|||
expect(svgElement).toEqual(createSvg(svgSrc));
|
||||
});
|
||||
|
||||
it('should support caching icons with a namespace', () => {
|
||||
const mockHttp: any = {};
|
||||
const mockSanitizer: any = {};
|
||||
const mockDocument: any = {};
|
||||
|
||||
const svgSrc1 = '<svg xmlns="http://www.w3.org/2000/svg"><path d="h100" /></svg>';
|
||||
const svgSrc2 = '<svg xmlns="http://www.w3.org/2000/svg"><path d="h200" /></svg>';
|
||||
const svgSrc3 = '<svg xmlns="http://www.w3.org/2000/svg"><path d="h300" /></svg>';
|
||||
const svgIcons: SvgIconInfo[] = [
|
||||
{ name: 'test_icon', svgSource: svgSrc1 },
|
||||
{ namespace: 'foo', name: 'test_icon', svgSource: svgSrc2 },
|
||||
{ namespace: 'bar', name: 'test_icon', svgSource: svgSrc3 },
|
||||
];
|
||||
|
||||
const registry = new CustomIconRegistry(mockHttp, mockSanitizer, mockDocument, svgIcons);
|
||||
let svgElement: SVGElement|undefined;
|
||||
registry.getNamedSvgIcon('test_icon', 'foo').subscribe(el => svgElement = el);
|
||||
|
||||
expect(svgElement).toEqual(createSvg(svgSrc2));
|
||||
});
|
||||
|
||||
it('should call through to the MdIconRegistry if the icon name is not in the preloaded cache', () => {
|
||||
const mockHttp: any = {};
|
||||
const mockSanitizer: any = {};
|
||||
|
|
|
|||
|
|
@ -20,21 +20,26 @@ import { DomSanitizer } from '@angular/platform-browser';
|
|||
*/
|
||||
export const SVG_ICONS = new InjectionToken<Array<SvgIconInfo>>('SvgIcons');
|
||||
export interface SvgIconInfo {
|
||||
namespace?: string;
|
||||
name: string;
|
||||
svgSource: string;
|
||||
}
|
||||
|
||||
interface SvgIconMap {
|
||||
[namespace: string]: {
|
||||
[iconName: string]: SVGElement;
|
||||
};
|
||||
}
|
||||
|
||||
const DEFAULT_NS = '$$default';
|
||||
|
||||
/**
|
||||
* A custom replacement for Angular Material's `MdIconRegistry`, which allows
|
||||
* us to provide preloaded icon SVG sources.
|
||||
*/
|
||||
@Injectable()
|
||||
export class CustomIconRegistry extends MatIconRegistry {
|
||||
private preloadedSvgElements: SvgIconMap = {};
|
||||
private preloadedSvgElements: SvgIconMap = {[DEFAULT_NS]: {}};
|
||||
|
||||
constructor(http: HttpClient, sanitizer: DomSanitizer, @Optional() @Inject(DOCUMENT) document,
|
||||
@Inject(SVG_ICONS) svgIcons: SvgIconInfo[]) {
|
||||
|
|
@ -43,18 +48,24 @@ export class CustomIconRegistry extends MatIconRegistry {
|
|||
}
|
||||
|
||||
getNamedSvgIcon(iconName: string, namespace?: string) {
|
||||
if (this.preloadedSvgElements[iconName]) {
|
||||
return of(this.preloadedSvgElements[iconName].cloneNode(true) as SVGElement);
|
||||
}
|
||||
return super.getNamedSvgIcon(iconName, namespace);
|
||||
const nsIconMap = this.preloadedSvgElements[namespace || DEFAULT_NS];
|
||||
const preloadedElement = nsIconMap && nsIconMap[iconName];
|
||||
|
||||
return preloadedElement
|
||||
? of(preloadedElement.cloneNode(true) as SVGElement)
|
||||
: super.getNamedSvgIcon(iconName, namespace);
|
||||
}
|
||||
|
||||
private loadSvgElements(svgIcons: SvgIconInfo[]) {
|
||||
const div = document.createElement('DIV');
|
||||
svgIcons.forEach(icon => {
|
||||
const ns = icon.namespace || DEFAULT_NS;
|
||||
const nsIconMap = this.preloadedSvgElements[ns] || (this.preloadedSvgElements[ns] = {});
|
||||
|
||||
// SECURITY: the source for the SVG icons is provided in code by trusted developers
|
||||
div.innerHTML = icon.svgSource;
|
||||
this.preloadedSvgElements[icon.name] = div.querySelector('svg')!;
|
||||
|
||||
nsIconMap[icon.name] = div.querySelector('svg')!;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 51.8 50.4" style="enable-background:new 0 0 51.8 50.4;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<path class="st0" d="M25.9,0.2C11.8,0.2,0.3,11.7,0.3,25.8c0,11.3,7.3,20.9,17.5,24.3c1.3,0.2,1.7-0.6,1.7-1.2c0-0.6,0-2.6,0-4.8
|
||||
c-7.1,1.5-8.6-3-8.6-3c-1.2-3-2.8-3.7-2.8-3.7c-2.3-1.6,0.2-1.6,0.2-1.6c2.6,0.2,3.9,2.6,3.9,2.6c2.3,3.9,6,2.8,7.5,2.1
|
||||
c0.2-1.7,0.9-2.8,1.6-3.4c-5.7-0.6-11.7-2.8-11.7-12.7c0-2.8,1-5.1,2.6-6.9c-0.3-0.7-1.1-3.3,0.3-6.8c0,0,2.1-0.7,7,2.6
|
||||
c2-0.6,4.2-0.9,6.4-0.9c2.2,0,4.4,0.3,6.4,0.9c4.9-3.3,7-2.6,7-2.6c1.4,3.5,0.5,6.1,0.3,6.8c1.6,1.8,2.6,4.1,2.6,6.9
|
||||
c0,9.8-6,12-11.7,12.6c0.9,0.8,1.7,2.4,1.7,4.7c0,3.4,0,6.2,0,7c0,0.7,0.5,1.5,1.8,1.2c10.2-3.4,17.5-13,17.5-24.3
|
||||
C51.5,11.7,40.1,0.2,25.9,0.2z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
|
|
@ -1,13 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 50 49.7" style="enable-background:new 0 0 50 49.7;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<path class="st0" d="M50,9.3c-1.8,0.8-3.8,1.4-5.9,1.6c2.1-1.3,3.7-3.3,4.5-5.7c-2,1.2-4.2,2-6.5,2.5c-1.9-2-4.5-3.2-7.5-3.2
|
||||
c-5.7,0-10.3,4.6-10.3,10.3c0,0.8,0.1,1.6,0.3,2.3C16.1,16.7,8.5,12.6,3.5,6.4c-0.9,1.5-1.4,3.3-1.4,5.2c0,3.6,1.8,6.7,4.6,8.5
|
||||
C5,20,3.4,19.6,2,18.8c0,0,0,0.1,0,0.1c0,5,3.5,9.1,8.2,10.1c-0.9,0.2-1.8,0.4-2.7,0.4c-0.7,0-1.3-0.1-1.9-0.2
|
||||
c1.3,4.1,5.1,7,9.6,7.1c-3.5,2.8-7.9,4.4-12.7,4.4c-0.8,0-1.6,0-2.4-0.1c4.5,2.9,9.9,4.6,15.7,4.6c18.9,0,29.2-15.6,29.2-29.2
|
||||
c0-0.4,0-0.9,0-1.3C46.9,13.2,48.6,11.4,50,9.3z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 937 B |
Loading…
Reference in New Issue